Docusaurus でブログサイトを作成する

ブログの作成手法を色々調べた結果(WordPress Hexo 等)、Docusaurusが最も簡単にそれなりのサイトが作成できそうだという結論に至りました。(当方所感)

Docusaurus とは

• facebook が開発のベースとなってます。
• コンテンツをMarkdownで記載すればWebサイトの体裁が出来上がります。
• Docusaurusのサイト自体がDocusaurusで出来ているので、このサイトを見るのが手っ取り早いです。
  つまりこのサイトと同じような構成で独自のWebサイトが作成できます。

この記事の目的

• Docusaurus をインストールします。
• 最低限のカスタマイズを実施します。
• ローカルでWebサイトを起動し、動作を確認します。

導入手順

Node.js インストール

Nodeダウンロードサイト

Docusaurus プロジェクトの作成

• https://docusaurus.io/docs/installation

npx create-docusaurus@latest my-website classic

サイト起動

cd my-website
npm run start

http://localhost:3000/ で起動イメージが確認できます。

Docs-only mode へ切り替え

• blogレイアウトを削除します。
  (blogレイアウトが必要な場合はこの手順は不要です。)
  https://docusaurus.io/docs/docs-introduction#docs-only-mode

• docusaurus.config.jsを下記のとおり編集します。

docusaurus.config.js

module.exports = {
  // ...
  presets: [
    '@docusaurus/preset-classic',
    {
      docs: {
        routeBasePath: '/', // Serve the docs at the site's root
        /* other docs plugin options */
      },
      blog: false, // Optional: disable the blog plugin
      // ...
    },
  ],
};

• docs/intro.mdを以下のとおり編集します。

docs/intro.md

---
slug: /
---

This page will be the home page when users visit https://example.com/.

• /src/pages/index.jsを削除します。
  ※ サイトの初期ページをdocsサイトにするためindex.jsの削除が必要です。

• 設定後イメージ
  

コンテンツの追加

• コンテンツの追加はMarkdownファイルを追加するだけです。

/docs/サンプル/サンプル.md　　

👇GitHubはこちら

• https://github.com/jun-knd/docusaurus.github.git

👇参考URL

• Docusaurus サイト