DocusaurusにGoogle Analytics (GA4)を導入する
Docusaurusで構築した当サイトにGoogle Analytics 4 (GA4) を導入し、アクセス解析を行うための設定手順を備忘録として整理します。
本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。
機能:
- DocusaurusサイトにGoogle Analytics 4 (GA4) を導入。
- サイト全体のアクセス解析を可能に。
Docusaurusで構築した当サイトにGoogle Analytics 4 (GA4) を導入し、アクセス解析を行うための設定手順を備忘録として整理します。
本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。
機能:
Docusaurusサイトの主要UI、ナビゲーションバーとフッターを国際化(i18n)編集した際の備忘録として整理します。
基本的な i18n の導入手順は Docusaurus サイトを多言語対応するための実装手順 を参照してください。
また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。
Docusaurusのi18n機能は、サイトのテキストを多言語に対応させるための仕組み。今回は、ナビゲーションバーとフッター に新しい項目を追加し、それを日本語(デフォルト)から英語へ翻訳するまでの流れを解説します。
この記事では、Docusaurus で構築したサイトに多言語対応(i18n)機能を実装し、日本語(デフォルト)と英語のコンテンツを切り替えられるように設定した際の手順を整理します。
公式ドキュメントを参考にしつつ、Docker 環境でのコマンドや、デプロイ前の確実な動作確認方法など、実践で役立つポイントも交えて解説します。
なお、導入後に発生した ルーティング崩壊とデプロイ失敗の解決録 や、ナビゲーションバー・フッターの国際化手順 も併せて参照してください。
また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。
前提環境:
ja)と英語(en)の2言語に対応させるこの記事では、Docusaurus v3 で構築したサイトに国際化(i18n)機能を追加した際、直面した2つの厄介な問題、「クライアントサイドのルーティング崩壊」と「Cloud Runでのコンテナ起動失敗」について、その原因特定から解決までの道のりを記録したものです。
i18n の基本的な導入手順は Docusaurus サイトを多言語対応するための実装手順 にまとめています。
また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。
前提環境:
この記事では、DocusaurusサイトにReactとTypeScriptを利用して、クライアントサイドで動作するシンプルなブラウザメモ機能を実装した際の主要な仕様と技術的ポイントを整理。
なお、本機能はその後 URL共有機能とUX改善 で大幅に拡張しています。
また、本記事は実装当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 にまとめています。
ユーザーがブラウザ上で手軽にテキストメモを作成・保存し、次回訪問時にも内容を保持できる機能の提供。 サーバーサイドの処理を介さず、すべてクライアントサイド(ブラウザのlocalStorage)で完結させることによる手軽さと応答性を重視。
この記事では、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) を開発者のローカルマシンに直接インストールして運用していた。
この記事では、Google Cloud Run でホスティングしている 当サイト(Docusaurus)に、Value Domain で取得したカスタムドメイン hkdocs.com を設定した際の手順を整理します。
本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。
前提環境:
hkdocs.com (Value Domain で取得済み)