Docusaurusの構築フロー
Docusaurusを試してみる。
特徴
- Meta社が作成した、ドキュメントに特化したフレームワーク
- Reactベース
- Markdownで書ける
- Algoliaと連携して検索もやりやすくなる
- バージョン管理が容易
- 多言語対応
- ダークモード対応
目標
- ローカルにDocusaurus構築
- GitHubリポジトリにpush
- Netlifyにデプロイ
- デフォルト設定を自分用に修正
- 試しにドキュメント追加
- チュートリアルを一通りやってみる
- Algolia連携 -> WIP
- 多言語設定
- Meta tag設定
- docusaurus.config.jsの修正
- Blogの設定
ローカルにDocusaurus構築
下記実行
npx create-docusaurus@latest documents classic
下記表示されるので、y
を入力しEnter。
Ok to proceed? (y)
documentsディレクトリが作成されるので、移動し npm start
documents
npm start
ローカルで表示できた。早っ!
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完了。
Netlifyにデプロイ
デプロイします。今回はNetlifyにデプロイします。
[Add new site]をクリック -> [Important an existing project]をクリックします。
GitHubをクリックします。
先ほど作成したリポジトリを選択します。
設定し、[Deploy start] をクリック。
デプロイ完了。これまた早い。
サイト名(URL)は変えたいので、[SIte settings] -> [Change site name]をクリックし、Site nameを修正
以上
デフォルト設定を自分用に修正
ヘッダやフッタのリンクを修正
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ページへ遷移するように設定した。
(不特定多数のユーザに編集させたくない場合、権限等の設定に注意してください。)
試しにドキュメント追加
docsディレクトリ配下にmdファイルを配置。
demo.mdファイルを追加し記載。
ファイル
画面
メモ
- Markdown Headersにはサイドバーの表示位置を記載
sidebar_position: 1
- H1がタイトルになる
Algolia連携
docsearchを利用
下記参考
申請する
https://docsearch.algolia.com/apply/ にて申請
項目 | 内容 |
---|---|
DOCUMENTATION OR BLOG URL | NetlifyにデプロイしたサイトURL |
メールアドレス | |
REPOSITORY URL | GitHubのリポジトリURL |
登録し、しばし待つ必要あり。
docsearchに関しては一旦待ち。
[WIP]多言語設定
先ほど作成した日本語ドキュメントを多言語化してみる。
今回は、
- 主言語:ja
- 複言語:en
読む ->
→
一旦後回し
チュートリアルを一通りやってみる
Tutorial - Basicsは特に問題なし。基本的な利用方法について
チュートリアルを一通りやってみる_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` に反映される。
チュートリアルを一通りやってみる_3
翻訳
途中で止まっていた下記の続き
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
一旦保留。
チュートリアルを一通りやってみる_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',
},
],
},
},
};
追加はされた。翻訳についてはもう少し確認する。
Meta tag系もやっておきたいので明日 ->
Meta tag設定
各mdファイルのheaderに下記追加で対応できる。
---
sidebar_position: 1
title: Tutorial Intro
description: A short description of this page
keywords: [keywords, describing, the main topics]
---
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.
バージョン管理
不要そうなので一旦なしにする。
下記削除
-
versions.json
-
docusaurus.config.jsから下記削除
{
type: 'docsVersionDropdown',
position: 'right',
},
多言語 続き
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
切り替えできた。
トップページの修正
/src/pages/index.js
の修正。
一通り良さそう。
あとはDocsearch待ち。
Blogの設定
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。
トップページをデフォルトの /src/pages/old_index.js
から、docs配下のトップページに変更する。下記3ステップで対応できる。
routeBasePath
を追記する。
1. docusaurus.config.js に presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
routeBasePath: '/', // <-追記
sidebarPath: require.resolve('./sidebars.js'),
slug: /
を追記する
2. docsのトップページのmdファイルに slug: /
3. /src/pages/old_index.js
を削除
/src/pages/old_index.js
を削除する。
以上で対応完了です。
ref:
Docs-only mode
下記を追加した。