Tech Blog
•
TypeScriptReactDocusaurus

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

はじめに

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

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

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

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

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

rm -rf docs

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

rm src/pages/index.tsx

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

const config: Config = {
  // 他設定 ...
  presets: [
    [
      'classic',
      {
+       docs: false,
-       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: {
+         routeBasePath: '/',
          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,
    ],

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

Ref