この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。サービスグループの武田です。
先日Docusaurusを導入して試してみました。
標準でドキュメントとブログを管理できる構成で作成されていました。今回はデフォルトの構成からブログ機能を外し、ドキュメントのみのサイトを構築する方法を試してみました。
環境
次の環境で検証をしています。
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.4
BuildVersion: 19E266
$ node -v
v10.19.0
$ grep @docusaurus package.json
"@docusaurus/core": "^2.0.0-alpha.48",
"@docusaurus/preset-classic": "^2.0.0-alpha.48",
プロジェクトの作成
作成は前回と同様、コマンドでさくっと済ませます。
$ cd /path/to/working
$ npx @docusaurus/init@next init devio classic
$ cd devio
設定変更で構成を変えてみる
実現したい構成(挙動)は次のものです。
- サイトのヘッダからメニューを削除
- ドキュメントのみのサイトなので不要
- ドキュメントのURLから
/docs/
を削除http://localhost:3000/doc1
というURLでアクセスしたい
- サイトのトップページにアクセスした際、自動的にドキュメントのトップに遷移できる
それぞれ順番に見ていきましょう。
サイトのヘッダからメニューを削除
これは前回も似たようなことをやりました。今回はヘッダメニューをまるっと消してしまいます。
docusaurus.config.js
@@ -13,20 +13,6 @@ module.exports = {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
- links: [
- {
- to: 'docs/doc1',
- activeBasePath: 'docs',
- label: 'Docs',
- position: 'left',
- },
- {to: 'blog', label: 'Blog', position: 'left'},
- {
- href: 'https://github.com/facebook/docusaurus',
- label: 'GitHub',
- position: 'right',
- },
- ],
},
footer: {
style: 'dark',
ドキュメントのURLから/docs/を削除
デフォルトでは、ドキュメントにはhttp://localhost:3000/docs/doc1
のように/docs/
のパスが付きます。ドキュメントのみのサイトにする場合は冗長に感じられるためhttp://localhost:3000/doc1
でアクセスできるようにします。これはrouteBasePath
の設定を追加するだけです。
docusaurus.config.js
@@ -83,6 +69,7 @@ module.exports = {
'@docusaurus/preset-classic',
{
docs: {
+ routeBasePath: '',
sidebarPath: require.resolve('./sidebars.js'),
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
サイトのトップページにアクセスした際、自動的にドキュメントのトップに遷移できる
ドキュメントのみのサイトにする場合、デフォルトのトップページは不要です。そのためアクセスされたらドキュメントのトップに遷移するようにリダイレクトをしかけましょう。src/pages/index.js
を次のようなシンプルな内容に置き換えます。
src/pages/index.js
import React from 'react';
import { Redirect } from '@docusaurus/router';
import useBaseUrl from '@docusaurus/useBaseUrl';
function Home() {
return <Redirect to={useBaseUrl('doc1')} />;
}
export default Home;
動作確認
それでは最後に動作確認をしておきます。コマンドでサイトを起動しましょう。
$ npm start
自動的にドキュメントトップにリダイレクトされ、実現したかった構成ができています!
まとめ
Docusaurusのデフォルト構成からドキュメントのみの構成に変更してみました。不要なファイルなどを整理すればすぐにでも使い始められますね。