はじめに

サーバーや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をインストールしましょう！

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

1. Docusaurusでwebページを作成する

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

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

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

例：

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

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

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

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

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

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

2. Github Pagesで公開する

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

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

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

docusaurus.config.js

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

例：

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ページが表示されます

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

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

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

Before:

After:

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

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

docusaurus.config.js

i18n: {
  defaultLocale: 'ja',
  locales: ['en', 'ja'],
  localeConfigs: {
    en: {
      label: 'English',
    },
    ja: {
      label: '日本語',
    },
  },
},

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

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を編集します

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を編集しようと思います

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

navbar.json

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

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

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

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

あともう少しです！
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ページを開いてみると、日本語訳できていることが確認できました！

最後に

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

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

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

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

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

参考記事