/test-docs/                    : 新しいプロジェクト名
  ├ docs/                     : Markdown ファイル配置先 (中のページ名やディレクトリー名は任意)
  │  └ intro.md -> index.md  : トップページに表示するページ (index.md にリネーム)
  ├ src/                      : ドキュメント以外のファイル配置先
  │  └ css/
  │  　  └ custom.css        : カスタマイズ CSS ファイル
  ├ static/                   : 静的ディレクトリー
  │  └ img/                  : 画像ファイル配置先
  │  　  └ favicon.ico       : ファビコン (任意)
  ├ .gitignore                : Git 保管時の除外ファイル
  ├ docsaurus.config.js       : 全体の構成ファイル
  ├ package-lock.json         : (npm パッケージの設定)
  ├ package.json              : (npm パッケージの設定)
  ├ README.md                 : (README ファイル)
  └ sidebars.js               : ドキュメントのサイドバー表示順の指定 (目次)

1
/** @type {import('@docusaurus/types').Config} */
2
const config = {
3
  // タイトル (ブラウザーのタブに表示、等)
4
  title: 'テストドキュメント',
5
  // ファビコン、/static/ からのパス
6
  favicon: 'img/favicon.ico',
7

8
  // GitLab Pages の URL
9
  // (URL が環境により異なるため、この時点で不明の場合は、Pages 展開後に URL を確認してから再修正する)
10
  url: 'https://<GitLab Pages URL>',
11
  // ベース URL を指定 (GitLab の場合はプロジェクト名になる)
12
  baseUrl: '/test-docs/',
13

14
  // ドキュメント内のリンク先がない場合の挙動の指定 (docusaurus build 時のみ検出)
15
  onBrokenLinks: 'throw',
16
  onBrokenMarkdownLinks: 'warn',
17

18
  // ローカライズの設定 (日本語のみを指定)
19
  i18n: {
20
    defaultLocale: 'ja',
21
    locales: ['ja'],
22
  },
23

24
  presets: [
25
    [
26
      'classic',
27
      /** @type {import('@docusaurus/preset-classic').Options} */
28
      ({
29
        docs: {
30
          // サイドバー設定のパス (変更不要)
31
          sidebarPath: './sidebars.js',
32
          // ブログ機能を使わないため、docs 配下をルートパスとする
33
          routeBasePath: '/',
34
        },
35
        // ドキュメントのみでブログ機能は使わないため、false で無効化しておく
36
        blog: false,
37
        // カスタム css ファイルの有効化 (メインカラーの設定や見た目に変更が必要であれば)
38
        theme: {
39
          customCss: './src/css/custom.css',
40
        },
41
      }),
42
    ],
43
  ],
44
  // 以下、他のパーツの設定のため、次節より説明
45
};
46

47
export default config;

1
/** @type {import('@docusaurus/types').Config} */
2
const config = {
3
  // テーマ設定
4
  themeConfig:
5
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
6
    ({
7
      // 上部ナビゲーションバーの設定
8
      navbar: {
9
        // 左上のタイトル
10
        title: 'テストドキュメント',
11
        // ロゴ (試験的にファビコンと同じものを利用 (任意))
12
        logo: {
13
          src: 'img/favicon.ico',
14
        },
15
        // items は今回設定しないため、コメントアウトまたは削除しておきます
16
        // items: [
17
          // (省略)
18
        // ],
19
      },
20

21
      // 下部フッターの設定
22
      footer: {
23
        // (省略)
24
      },
25
      // 右部目次の設定
26
      tableOfContents: {
27
        // (省略)
28
      },
29
      // コードブロックの設定
30
      prism: {
31
        // (省略)
32
      },
33
    }),
34
};
35

36
export default config;

1
/** @type {import('@docusaurus/types').Config} */
2
const config = {
3
  // テーマ設定
4
  themeConfig:
5
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
6
    ({
7
      // 上部ナビゲーションバーの設定
8
      navbar: {
9
        // (省略)
10
      },
11

12
      // 下部フッターの設定
13
      footer: {
14
        // フッターに表示するコピーライトの内容
15
        copyright: `© 2024 ALPHA SYSTEMS INC.`,
16
        // フッターのテーマカラー
17
        style: 'light',
18
        // links は今回設定しないため、コメントアウトまたは削除しておきます
19
        // links: [
20
          // (省略)
21
        // ]
22
      },
23

24
      // 右部目次の設定
25
      tableOfContents: {
26
        // (省略)
27
      },
28
      // コードブロックの設定
29
      prism: {
30
        // (省略)
31
      },
32
    }),
33
};

1
/** @type {import('@docusaurus/types').Config} */
2
const config = {
3
  // テーマ設定
4
  themeConfig:
5
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
6
    ({
7
      // 上部ナビゲーションバーの設定
8
      navbar: {
9
        // (省略)
10
      },
11
      // 下部フッターの設定
12
      footer: {
13
        // (省略)
14
      },
15

16
      // 右部目次の設定 (デフォルトで記載はないため、追記します)
17
      tableOfContents: {
18
        // 目次に表示される最小見出しレベル (タイトル (見出し 1) を除く 2 がデフォルト)
19
        minHeadingLevel: 2,
20
        // 目次に表示される最大見出しレベル (デフォルトは見出し 3、見出し 4 まで表示したいため変更)
21
        maxHeadingLevel: 4,
22
      },
23

24
      // コードブロックの設定
25
      prism: {
26
        // (省略)
27
      },
28
    }),
29
};

1
import {themes as prismThemes} from 'prism-react-renderer';
2

3
/** @type {import('@docusaurus/types').Config} */
4
const config = {
5
  // テーマ設定
6
  themeConfig:
7
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
8
    ({
9
      // 上部ナビゲーションバーの設定
10
      navbar: {
11
        // (省略)
12
      },
13
      // 下部フッターの設定
14
      footer: {
15
        // (省略)
16
      },
17
      // 右部目次の設定 (デフォルトで記載はないため、追記します)
18
      tableOfContents: {
19
        // (省略)
20
      },
21

22
      // コードブロックの設定
23
      prism: {
24
        // ライトテーマ時のコードブロックのテーマ
25
        theme: prismThemes.github,
26
        // ダークテーマ時のコードブロックのテーマ
27
        darkTheme: prismThemes.dracula,
28
        // コードハイライトに追加する言語 (必要に応じて追加する)
29
        // https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L25
30
        // 追加できる言語一覧
31
        // https://prismjs.com/#supported-languages
32
        additionalLanguages: ['bash', 'yaml'],
33
      }
34
    }),
35
};

1
# トップページ
2

3
ここはトップページです。
4

5
## 見出し 1
6

7
```bash
8
## ディレクトリーを確認
9
$ ls ./
10
sample-site  test-docs
11

12
## 作業ディレクトリーを移動
13
$ cd ./test-docs/
14

15
## Docusaurus を展開
16
$ npm run start -- --host 0.0.0.0
17
```
18

19
::::tip
20
こんな感じで admonitions も書けます。
21

22
:::warning
23
ネストもできます
24
:::
25

26
::::
27

28
### 見出し 1-1
29

30
### 見出し 1-2
31

32
## 見出し 2
33

34
### 見出し 2-1
35

36
### 見出し 2-2

docs 配下の構成

/test-docs/
  └ docs/            : Markdown ファイルの配置先 (中のページ名やディレクトリー名は index.md を除き、任意)
  　  ├ index.md     : トップページに表示するページ
  　  ├ test1.md
  　  ├ test2.md
  　  └ subdir/      : サブカテゴリー
  　  　  ├ sub1.md  : サブカテゴリーのページ
  　  　  └ sub2.md

1
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
2
const sidebars = {
3
  // 左部サイドバーの設定
4
  tutorialSidebar: [  // (変数名のため、tutorial という名前が気になる場合は変更も可能)
5
    {
6
      // type: doc はドキュメントへのリンク
7
      type: 'doc',
8
      // id: は docs/ からの相対パスから .md を取り除いたもの (例: docs/index.md は index)
9
      id: 'index',
10
      // label: は表示されるタイトル (省略するとページ内の見出し 1 の名前が表示されるため、今回は省略)
11
    },
12
    'test1',  // type: doc の場合は id のみの簡易表記も可能
13
    'test2',
14
    {
15
      // type: category はグループの作成
16
      type: 'category',
17
      // label はサイドバーに表示する名前
18
      label: 'サブカテゴリー',
19
      // items はカテゴリーに含めるアイテム
20
      items: [
21
        'subdir/sub1',
22
        'subdir/sub2',
23
      ],
24
    },
25
  ],
26
};
27

28
export default sidebars;

1
{
2
  "name": "test-docs",  // 他のプロジェクトからファイルを移動したため、名前を修正
3
  "version": "0.1.0",   // このプロジェクトのバージョン (任意)
4
  "scripts": {
5
    // Docker でしか起動しない場合は start を直接書き換えてもよい
6
    "start": "docusaurus start",                    // ローカルのみで確認する場合は今までと同じく npm run start で起動
7
    "start:vm": "docusaurus start --host 0.0.0.0",  // 別環境からアクセスする場合は npm run start:vm で実行し、外部アクセスを可能にする
8
    // (以下省略)
9
  }
10
}

1
# node 20.11.1 の bookworm-slim (Debian) 版を利用
2
image: node:20.11.1-bookworm-slim
3
pages:
4
  script:
5
    - npm ci  # 必要な node modules をインストール
6
    - npm run build -- --out-dir ./public/  # 出力先を ./public/ に変更して静的サイトファイルを出力
7
  artifacts:
8
    paths:
9
      - ./public/  # 保管するアーティファクトのディレクトリーを指定
10
  rules:
11
    - if: $CI_COMMIT_BRANCH == "main"  # main ブランチのみ CI を実行