メインコンテンツまでスキップ

「Docusaurus」タグの記事が6件件あります

Articles on Docusaurus - setup, customization, features, and troubleshooting.

全てのタグを見る

Docusaurus サイトを多言語対応 (i18n) するための実装手順

· 約6分
hiroaki
Individual Developer

この記事では、Docusaurus で構築したサイトに多言語対応(i18n)機能を実装し、日本語(デフォルト)と英語のコンテンツを切り替えられるように設定した際の手順を整理します。

公式ドキュメントを参考にしつつ、Docker 環境でのコマンドや、デプロイ前の確実な動作確認方法など、実践で役立つポイントも交えて解説します。

前提環境:

  • サイトジェネレーター: Docusaurus (プロジェクトセットアップ済み)
  • 開発環境: Docker (ローカル環境のコマンドも併記)
  • 目標: 日本語(ja)と英語(en)の2言語に対応させる

Docusaurusのi18n導入で発生したルーティングとデプロイの問題解決録

· 約6分
hiroaki
Individual Developer

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

前提環境:

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

Docusaurus サイト内ブラウザメモ機能の実装記録

· 約5分
hiroaki
Individual Developer

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

1. 基本機能と目的

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

Docusaurus ナビゲーションアイコン編集:3つのアプローチ

· 約6分
hiroaki
Individual Developer

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

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

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

Cloud Run と Value Domain で Docusaurus サイトにカスタムドメインを設定する手順

· 約6分
hiroaki
Individual Developer

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

前提環境:

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