Open24

Docusaurusの構築フロー

koushikagawakoushikagawa

特徴

  • Meta社が作成した、ドキュメントに特化したフレームワーク
  • Reactベース
  • Markdownで書ける
  • Algoliaと連携して検索もやりやすくなる
  • バージョン管理が容易
  • 多言語対応
  • ダークモード対応
koushikagawakoushikagawa

目標

  • ローカルにDocusaurus構築
  • GitHubリポジトリにpush
  • Netlifyにデプロイ
  • デフォルト設定を自分用に修正
  • 試しにドキュメント追加
  • チュートリアルを一通りやってみる
  • Algolia連携 -> WIP
  • 多言語設定
  • Meta tag設定
  • docusaurus.config.jsの修正
  • Blogの設定
koushikagawakoushikagawa

ローカルにDocusaurus構築

下記実行

npx create-docusaurus@latest documents classic

下記表示されるので、yを入力しEnter。

Ok to proceed? (y) 

documentsディレクトリが作成されるので、移動し npm start

documents
npm start

ローカルで表示できた。早っ!

koushikagawakoushikagawa

GitHubリポジトリにpush

GitHubリポジトリにpushします。

リポジトリを新規作成します。

ローカルのDocusaurusを作成したリポジトリにpushする。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/[ユーザ名]/documents.git
git push -u origin main

push完了。

koushikagawakoushikagawa

Netlifyにデプロイ

デプロイします。今回はNetlifyにデプロイします。

[Add new site]をクリック -> [Important an existing project]をクリックします。

GitHubをクリックします。

先ほど作成したリポジトリを選択します。

設定し、[Deploy start] をクリック。

デプロイ完了。これまた早い。

サイト名(URL)は変えたいので、[SIte settings] -> [Change site name]をクリックし、Site nameを修正

以上

koushikagawakoushikagawa

デフォルト設定を自分用に修正

ヘッダやフッタのリンクを修正

docusaurus.config.jsの修正

ヘッダのGitHubリンク

themeConfig:のGitHubリンクを修正

themeConfig:
  ・・・中略・・・
          {
   -         href: 'https://github.com/facebook/docusaurus',
   +       href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },

フッタのリンク

下記を修正

 footer: {
        style: 'dark',
        links: [
          {

記事のEdit this page のリンク先修正

docusaurus.config.jsの修正

 presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          editUrl: 
 -           'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
 +           'https://github.com//[ユーザ名]/documents/edit/main/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://github.com//[ユーザ名]/documents/edit/main/',
        },

[Edit this page]クリックで、GitHubのeditページへ遷移するように設定した。
(不特定多数のユーザに編集させたくない場合、権限等の設定に注意してください。)

https://youtu.be/066LINJ9OnU

koushikagawakoushikagawa

試しにドキュメント追加

docsディレクトリ配下にmdファイルを配置。

demo.mdファイルを追加し記載。

ファイル

画面

メモ

  • Markdown Headersにはサイドバーの表示位置を記載
    sidebar_position: 1
  • H1がタイトルになる
koushikagawakoushikagawa

チュートリアルを一通りやってみる_2

バージョン管理

ドキュメントのバージョン管理が可能。
下記実行

npm run docusaurus docs:version 1.0

下記ディレクトリ・ファイルが作成される。

  • versioned_docs
  • versioned_sidebars
  • versions.json

バージョン管理ドロップダウンの追加

docusaurus.config.jsに下記追記

module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'docsVersionDropdown',
        },
      ],
    },
  },
};

追加された。
![](https://storage.googleapis.com/zenn-user-upload/4facbe46f393-20220418.png)

### ドキュメントアップデートについて
- `versioned_docs/version-1.0/hello.md` が更新されると、 `http://localhost:3000/docs/hello` に反映される
- `docs/hello.md` が更新されると、 `http://localhost:3000/docs/next/hello` に反映される。



koushikagawakoushikagawa

チュートリアルを一通りやってみる_3

翻訳

途中で止まっていた下記の続き
https://zenn.dev/link/comments/f87f20c6159bbc

docusaurus.config.js にて、defaultを en、副言語を ja に設定。

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ja'],
  },
};

jaファイル作成

/i18n/ja/docusaurus-plugin-content-docs/current/intro.md を作成し、日本語にする

翻訳スタート

ここでエラーが表示される。下記実行すると

npm run start -- --locale ja

下記のエラーが表示される。

[INFO] Starting the development server...
[ERROR] Error: "baseUrl" is required
"title" is required

一旦保留。

koushikagawakoushikagawa

チュートリアルを一通りやってみる_3_もう一度

docusaurus.config.jsの書き方が間違えている様子。下記追記

const config = {
・・・中略
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ja'],
  },
・・・中略
},

下記実行

npm run start -- --locale ja

表示されるが、うまく翻訳されていない。 -> 後ほど確認(TODO)

言語切替ドロップダウン追加

メニューに言語切替のドロップダウン追加

module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'localeDropdown',
        },
      ],
    },
  },
};

追加はされた。翻訳についてはもう少し確認する。

koushikagawakoushikagawa

Meta tag設定

各mdファイルのheaderに下記追加で対応できる。

---
sidebar_position: 1
title: Tutorial Intro
description: A short description of this page
keywords: [keywords, describing, the main topics]
---

koushikagawakoushikagawa

docusaurus.config.jsの修正

configを修正

const config = {
-   title: 'My Site',  
+   title: 'My documents',
   tagline: 'Dinosaurs are cool',
-   url: 'https://your-docusaurus-test-site.com',
+   url: 'https://my-documents.netlify.app/',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
-   organizationName: 'facebook', // Usually your GitHub org/user name.
+   organizationName: 'KoushiKagawa', // Usually your GitHub org/user name.
-   projectName: 'docusaurus', // Usually your repo name.
+   projectName: 'documents', // Usually your repo name.


koushikagawakoushikagawa

バージョン管理

不要そうなので一旦なしにする。

下記削除

  • versions.json

  • docusaurus.config.jsから下記削除

{
            type: 'docsVersionDropdown',
            position: 'right',
          },
koushikagawakoushikagawa

多言語 続き

mdファイルの多言語化

  • /i18n/ja/docusaurus-plugin-content-docs/current/配下に docsと同じファイルを配置し、言語を日本語にすることでコンテンツの切り替え完了する。

  • 英語はあるが日本語はない場合、日本語URLでも英語ドキュメントが表示される。

pageの多言語化

下記実行

npm run write-translations -- --locale ja

下記ファイルが作成される

[INFO] 56 translations will be written at i18n/ja/code.json.
[INFO] 4 translations will be written at i18n/ja/docusaurus-theme-classic/navbar.json.
[INFO] 9 translations will be written at i18n/ja/docusaurus-theme-classic/footer.json.
[INFO] 3 translations will be written at i18n/ja/docusaurus-plugin-content-blog/options.json.
[INFO] 3 translations will be written at i18n/ja/docusaurus-plugin-content-docs/current.json.

ここら辺を修正する必要あり。

ローカル環境でi18n確認するためには、下記実行する。

npm run start -- --locale ja

切り替えできた。

https://youtu.be/vG_y6Ijk8ZM

koushikagawakoushikagawa

Blogの設定

Blogデフォルトのままだったので設定する。

全てここに書いてある。
https://docusaurus.io/docs/blog

authorの設定

/blog/authors.yml に下記追加。

Koshi:
  name: Koshi Kagawa
  title: PM
  url: https://github.com/koushikagawa
  image_url: https://avatars.githubusercontent.com/u/19630409?v=4

2019-05-28-first-blog-post.md の修正

デフォルトの 2019-05-28-first-blog-post.md を修正する。

こちらも修正

---
slug: first-blog-post
title: First Blog Post
authors: Koshi
tags: [docusaurus]
---

I used docusaurus.

It is useful because it is simple and lacks markdown.

How to get started is summarized in [zenn](https://zenn.dev/koushikagawa/scraps/6f38fbc8a2b3ee).

ファイル名を 2022-04-22-first-blog-post.md に修正する。

Blog不要な場合

下記で対応

  • blogディレクトリを削除
  • configファイルより blog: false に修正する。
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

blogのi18nについて

/i18n/ja/docusaurus-plugin-content-blog/ 配下に同様のファイル名を作成し、ローカライズすればOK。

koushikagawakoushikagawa

トップページをデフォルトの /src/pages/old_index.js から、docs配下のトップページに変更する。下記3ステップで対応できる。

1. docusaurus.config.js に routeBasePathを追記する。

docusaurus.config.js
presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          routeBasePath: '/', // <-追記
          sidebarPath: require.resolve('./sidebars.js'),
         

2. docsのトップページのmdファイルに slug: / を追記する

test.md
slug: /

3. /src/pages/old_index.js を削除

/src/pages/old_index.js を削除する。

以上で対応完了です。

ref:
Docs-only mode