DocusaurusでWebページを作成してGithub Pagesで公開してみる！

# はじめに
サーバーやcssなどの言語がよくわからないけど、Webページを作ってみたい！
そう思ったこと、一度はありますよね？
本記事では、学習コストを最小限にしてWebページを公開する方法を紹介しようと思います

# ゴール
本記事では、**Docusaurus**というフレームワークを利用してWebページを作成し、**Github Pages**を使って作成したWebページを公開しようと思います

さらに、Docusaurusでは**多言語対応**したWebページの作成もできるので、その方法も紹介しようと思います

# 注意点
本記事では、Github Pagesを利用してWebページを公開します
privateなリポジトリのGithub Pagesを公開するためには、リポジトリの所有者のアカウントが**有料**（Team以上）である必要があります
無料のアカウントでGithub Pagesを公開するには、リポジトリをpublicにする必要があるので、ご注意ください

# 動作環境
Windows 11
Node.js v22.12.0

# 本編
実際にWebページを公開してみましょう！
行うことは大きく分けて以下の3ステップです
- Docusaurusでwebページを作成する
- Github Pagesで公開する
- Webページを多言語対応する

では、早速やってみましょう！

## 0. 前準備
Docusaurusを利用するには、まずNode.jsをインストールする必要があります
以下のリンクからNode.jsをインストールしましょう！

https://nodejs.org/en

また、今回はGithubを利用するので、Gitのインストールも行う必要があります
以下のリンクからGitをインストールしましょう！

https://git-scm.com/downloads/win

## 1. Docusaurusでwebページを作成する
Docusaurusでwebページを作成してローカルでテストしてみましょう！
めっちゃ簡単です

まずは、Docusaurusのプロジェクトを作成します
作成したいフォルダでコマンドプロンプトを開き、以下のコードを入力してください

```
npx create-docusaurus@latest {プロジェクト名} classic
```

例：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365808/80d2c66f-1206-56af-d55c-995b6da76d59.png)

途中でJavaScriptかTypeScriptのどちらを使用するか聞かれますが、好みで決定してください
（今回、私はJavaScriptを選択したので、本記事ではJavaScriptのコードを編集することになります）

実行が終わると、プロジェクト名のフォルダが作成されます
これでWebページを作成することができました

次に、以下のコマンドで作成されたWebページをローカルで表示してみましょう

```
cd {プロジェクト名}
npx docusaurus start
```

作成したWebページが表示できました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365808/ddc07f46-bc7c-6438-d8a2-b8f467b08dc5.png)

ちなみに、実行を中断したいときは`Ctrl+C`でできます

## 2. Github Pagesで公開する

次に、先ほど作成したWebページをGithub Pagesで公開してみましょう！

先ほど作成したプロジェクトをGithubにリポジトリとしてプッシュしましょう

次はGithub Pagesで公開するための設定を行うために、`docusaurus.config.js`というJavaScriptのファイルを以下のように編集します

```JavaScript:docusaurus.config.js
url: 'https://{リポジトリの所有者のアカウント名}.github.io',
baseUrl: '/{リポジトリ名}/',
organizationName: '{リポジトリの所有者のアカウント名}',
projectName: '{リポジトリ名}',
```

例：
```JavaScript:docusaurus.config.js
url: 'https://pvicugna11.github.io',
baseUrl: '/DocusaurusTestbed/',
organizationName: 'pvicugna11',
projectName: 'DocusaurusTestbed',
```

編集できたらプッシュしましょう
その後に、以下のコマンドを入力します

```
npm run deploy
```

ここで、`[ERROR] Error: Please set the GIT_USER environment variable, or explicitly specify USE_SSH instead!`というエラーが出た場合は、以下のコマンドを入力してもう一度試してください

```
set GIT_USER={リポジトリの所有者のアカウント名}
npm run deploy
```

ブラウザでリポジトリを開いて、タブの`Settings`から`Pages`をクリックして、`Visit site`を押すとWebページが表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365808/4988a606-4862-50c0-ab7f-5e1cfbfd253d.png)

`Visit site`が表示されない場合は、少し時間をおいてから再度試してみてください
デプロイの反映に時間がかかっている可能性があります


## 3. Webページを多言語対応する

最後に多言語対応してみましょう！
今回はWebページのTutorialの箇所を日本語に対応してみます

Before:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365808/ee6adea6-ce5e-b419-4c8a-1e50f7f1f8de.png)

After:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365808/b2988fe5-f593-a2ae-ce60-f00ab68bd3b0.png)

それでは早速やっていきましょう！
まずは、先ほどと同様に設定ファイルの`docusaurus.config.js`を編集しましょう

日本語の設定を増やします

```javascript:docusaurus.config.js
i18n: {
  defaultLocale: 'ja',
  locales: ['en', 'ja'],
  localeConfigs: {
    en: {
      label: 'English',
    },
    ja: {
      label: '日本語',
    },
  },
},
```

さらに、`navbar`を編集して言語切替のためのドロップダウンを追加します

```javascript:docusaurus.config.js
navbar: {
  title: 'My Site',
  logo: {
    alt: 'My Site Logo',
    src: 'img/logo.svg',
  },
  items: [
    {
      type: 'docSidebar',
      sidebarId: 'tutorialSidebar',
      position: 'left',
      label: 'Tutorial',
    },
    {to: '/blog', label: 'Blog', position: 'left'},
    {
      href: 'https://github.com/facebook/docusaurus',
      label: 'GitHub',
      position: 'right',
    },
    // ↓これを追加
    {
      type: 'localeDropdown',
      position: 'right',
    },
  ],
},
```

次に、サイドバーを編集するために、`siderbars.js`を編集します

```javascript:sidebars.js

const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure
  // ↓をコメントアウト
  // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

  // But you can create a sidebar manually
  // ↓を追加
  tutorialSidebar: [
    'intro',
    {
      type: 'category',
      label: 'Tutorial - Basics',
      items: [
        { type: 'autogenerated', dirName: 'tutorial-basics' },
      ],
    },
    {
      type: 'category',
      label: 'Tutorial - Extras',
      items: [
        { type: 'autogenerated', dirName: 'tutorial-extras' },
      ],
    },
  ],
};
```

ここで、言語設定を自動で追加してくれるコマンドを入力します

```
npm run write-translations
```

すると、`i18n/ja`フォルダに大量にファイルが追加されます
その中で`navbar.json`と`docusaurus-plugin-content-docs/current.json`を編集しようと思います

今回はチュートリアルだけ日本語対応することにします

```json:navbar.json
"item.label.Tutorial": {
  "message": "チュートリアル",
  "description": "Navbar item with label Tutorial"
},
```

```json:docusaurus-plugin-content-docs/current.json
"sidebar.tutorialSidebar.category.Tutorial - Basics": {
  "message": "チュートリアル（基本編）",
  "description": "The label for category Tutorial - Basics in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Tutorial - Extras": {
  "message": "チュートリアル（応用編）",
  "description": "The label for category Tutorial - Extras in sidebar tutorialSidebar"
}
```

ここらで、一旦ローカルテストしておきましょう

```
npm start
```

すると、以下のようなページが開けます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365808/4ace436d-80eb-b506-d2f0-6ef9522d08c9.png)

赤枠のところに注目すると、日本語訳されていたり、言語設定のドロップダウンが追加されていることが確認できたと思います
ローカルテストの場合は、ドロップダウンを変更しても**言語が切り替わらない**点に注意してください

あともう少しです！
mdファイルの編集をしましょう

docsフォルダ内のすべてのファイルをi18n/ja/docusaurus-plugin-content-docsフォルダにcurrentというフォルダを作成して、その中に複製してください

以下のようなディレクトリの構造になっていればおけです

```
{リポジトリ名}
├── docs/
│   ├── tutorial-basics/
│   │   └── ...
│   ├── tutorial-extras/
│   │   └── ...
│   └── intro.md
└── i18n/
    └── ja/
        └── docusaurus-plugin-content-docs/
            ├── current/
            │   ├── turial-basics/
            │   │   └── ...
            │   ├── turial-extras/
            │   │   └── ...
            │   └── intro.md
            └── current.json
```

複製したjaフォルダ内のmdファイルを日本語訳すれば、日本語対応のページを作成できます
今回はタイトルだけ日本語訳しました

以下のコマンドでGithub Pagesにデプロイしましょう！

```
npm run deploy
```

Github PagesのWebページを開いてみると、日本語訳できていることが確認できました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2365808/064bbdbe-e5f4-56ab-f3f6-0cbd1e202f30.png)

# 最後に
Webページの作成に必要な知識がなくても、少しの変更だけで多言語対応したWebページを作成することができました！

最後まで読んでくださり、ありがとうございました

今回テストしてみたリポジトリとGithub Pagesは公開しているので、興味があればチェックしてみてください

Github :
https://github.com/pvicugna11/DocusaurusTestbed

Github Pages :
https://pvicugna11.github.io/DocusaurusTestbed/

# 参考記事
https://docusaurus.io/

https://zenn.dev/koushikagawa/scraps/6f38fbc8a2b3ee