hiroaki

この記事では、Docusaurus v3 で構築したサイトに国際化（i18n）機能を追加した際、直面した2つの厄介な問題、「クライアントサイドのルーティング崩壊」と「Cloud Runでのコンテナ起動失敗」について、その原因特定から解決までの道のりを記録したものです。

i18n の基本的な導入手順は Docusaurus サイトを多言語対応するための実装手順 にまとめています。

また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

前提環境:

• サイトジェネレーター: Docusaurus v3
• ホスティング: Google Cloud Run
• 開発・デプロイ: Docker, GitHub Actions
• パッケージマネージャー: pnpm

この記事では、DocusaurusサイトにReactとTypeScriptを利用して、クライアントサイドで動作するシンプルなブラウザメモ機能を実装した際の主要な仕様と技術的ポイントを整理。

なお、本機能はその後 URL共有機能とUX改善 で大幅に拡張しています。

また、本記事は実装当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 にまとめています。

1. 基本機能と目的​

ユーザーがブラウザ上で手軽にテキストメモを作成・保存し、次回訪問時にも内容を保持できる機能の提供。 サーバーサイドの処理を介さず、すべてクライアントサイド（ブラウザのlocalStorage）で完結させることによる手軽さと応答性を重視。

この記事では、Docusaurusサイトのナビゲーションバーにアイコンや特定の記号を表示させるための主要な編集パターンを3つ整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

1. テキスト・記号による表示​

ナビゲーションアイテムにアイコンや記号を表示する最も直接的かつ簡単な方法。Docusaurusの設定ファイル内でlabelプロパティに直接記述することで実現。

この記事では、Github Actions 新規の記事を検知し、TwitterカードとしてXへPOSTする実装した際の手順とトラブルシューティングの記録を整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

機能： Github Actions で新規投稿を検知し、TwitterカードとしてXへPOSTする

この記事では、Docusaurusのローカル環境開発時のために、Docker Composeを導入した際の手順を整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

背景：

ローカル開発環境の統一とセットアップの簡略化を目的とし、Docusaurus (v3.8.0) プロジェクトにDocker Composeを導入した。導入前は、Node.js (v22.16.0) およびpnpm (v10.11) を開発者のローカルマシンに直接インストールして運用していた。

この記事では、Algolia DocSearch を使用して、サイト内検索機能を設定した際の手順と課題解決の経緯を整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

DocusaurusにAlgolia DocSearchを実装した際の記録​

参考：

• https://docusaurus.io/docs/search
• https://docsearch.algolia.com/docs/api/#indexname

採用サービス：

• Algolia DocSearch

この記事では、Google Cloud Run でホスティングしている 当サイト（Docusaurus）に、Value Domain で取得したカスタムドメイン hkdocs.com を設定した際の手順を整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

前提環境:

• ドメイン: hkdocs.com (Value Domain で取得済み)
• ホスティング: Google Cloud Run
• サイトジェネレーター: Docusaurus