Tech Blog
•
TypeScriptReactDocusaurus

Docusaurus の scaffold で作成した Project で Blog 機能を廃止し docs 機能のみ使用するように変更する

はじめに

Docusaurus の Project を簡単に始める方法として scaffold を使用する方法が推奨されています。 Scaffold で作成した Project には Blog 機能やトップページ等多くの機能が組み込まれています。

Docusaurus を単にドキュメント管理のために使用したい場合は docs 以外の機能を廃止したほうがスッキリするのでドキュメント管理のためだけに使用する方法を記載しておきます。

scaffold 直後の構成

npx create-docusaurus@latest my-website classic 等で作成した直後の Project 構成は以下のようになっています。

> tree -L 2 -I node_modules/
.
├── README.md
├── blog
│   ├── 2019-05-28-first-blog-post.md
│   ├── 2019-05-29-long-blog-post.md
│   ├── 2021-08-01-mdx-blog-post.mdx
│   ├── 2021-08-26-welcome
│   ├── authors.yml
│   └── tags.yml
├── docs
│   ├── intro.md
│   ├── tutorial-basics
│   └── tutorial-extras
├── docusaurus.config.ts
├── package-lock.json
├── package.json
├── sidebars.ts
├── src
│   ├── components
│   ├── css
│   └── pages
├── static
│   └── img
└── tsconfig.json

blog ディレクトリの削除 及び 設定の変更

不要となる blog ディレクトリを削除'します。

rm -rf blog

及び src/pages/index.tsx を削除します。

rm src/pages/index.tsx

docusaurus.config.ts 内の blog に関する設定を削除するとともに、 docs に routeBasePath: "/", を追加します。

const config: Config = {
  // 他設定 ...
  presets: [
    [
      'classic',
      {
        docs: {
+         routeBasePath: "/",
          sidebarPath: './sidebars.ts',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
-       blog: {
-         showReadingTime: true,
-         feedOptions: {
-           type: ['rss', 'atom'],
-           xslt: true,
-         },
-         // Please change this to your repo.
-         // Remove this to remove the "edit this page" links.
-         editUrl:
-           'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-         // Useful options to enforce blogging best practices
-         onInlineTags: 'warn',
-         onInlineAuthors: 'warn',
-         onUntruncatedBlogPosts: 'warn',
-       },
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],

ここまで対応すれば / へアクセスした際に docs 以下のコンテンツが表示されるようになります。

追加オプション

ヘッダーから Blog リンクの削除

必要に応じて ヘッダーから /blog へのリンクを削除します。

const config: Config = {
  // 他設定 ...
  themeConfig: {
    // Replace with your project's social card
    image: 'img/docusaurus-social-card.jpg',
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          type: 'docSidebar',
          sidebarId: 'tutorialSidebar',
          position: 'left',
          label: 'Tutorial',
        },
-       {to: '/blog', label: 'Blog', position: 'left'},
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },

Ref