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

「Docusaurus＋GitHub Pages＋CI構成」を振り返る

· 約3分
Futahei
Futahei
フロントエンドエンジニア

※ 以下の記事は AI アシスタントを活用して作成されました。

この投稿では、私が “Docusaurus + GitHub Actions + GitHub Pages” を使って技術ブログ＆ポートフォリオサイトを構築した一連の流れをまとめます。

背景​

  • 技術ブログ兼ポートフォリオとしてシンプルな構成を目指しました。
  • 使用フレームワークとして Docusaurus（静的サイトジェネレータ）を採用。
  • 本番環境を GitHub Pages に、CI／プレビュー機能を GitHub Actions で構築しました。
  • 記事・ブログ・ドキュメント・タグ・テーマ切替など機能を整理し、「言語切替」「バージョン切替」は使わないと決めました。

実装の主な手順​

1. プロジェクト初期化​

  • Docusaurus の公式テンプレートから開始。
  • TypeScript 対応で設定を整備、docusaurus.config.ts を用意。
  • ブログ機能・ドキュメント機能・タグ機能・テーマ切替機能をオン、不要機能をオフに設定。

2. CI／デプロイ構成​

  • GitHub Actions にて、以下を実現：
    • main ブランチへの push で本番を GitHub Pages にデプロイ。
    • プルリクエスト（PR）からプレビューを出すための構成案を検討（ただし最終的には別ホストを利用する方針に）。
  • Lighthouse CI を導入。静的サイトのビルド出力を対象にして、毎週定期実行。404 や URL の設定ミスなどを修正。

3. 配色・テーマデザイン​

  • Infima の変数を上書きして配色を「ミッドナイト（落ち着いたブルー／パープル系）」に選定。
  • custom.css にカラー変数を設定し、テーマ切替（ライト／ダーク）も有効化。

4. 構成の見直し・クリーン化​

  • 不要な機能（言語切替、バージョン切替）を設定から除外。

  • ディレクトリ構成を整理：

    docs/
    blog/
    src/
      css/
      pages/
      components/
    sidebars.js
    docusaurus.config.ts

  • sidebars.js を用意し、ドキュメント用サイドバーを自動生成方式に設定。

現在の構成概要​

  • ドキュメント機能：/docs パスで提供。サイドバーも正常に表示。
  • ブログ機能：/blog パスで記事投稿可能。タグ付き記事も対応。
  • テーマ切替：ライト／ダークモードのスイッチを有効化。
  • 検索機能：ナビゲーションバーに検索バーを配置予定。
  • 配色テーマ：ミッドナイト配色を custom.css に反映。
  • CI：GitHub Actions + Lighthouse CI + GitHub Pages で構築済み。

今後の改善予定​

  • ブログのトップページに「最新記事一覧」を表示させる UI を追加検討中（今回は一旦見送り）。
  • SNS リンクやプロフィール情報をトップページに強化。
  • 検索機能（たとえば Algolia）を本番運用に向けて設定。
  • 記事作成フローをテンプレート化して効率化。

おわりに​

静的サイトジェネレータを使ったブログ／ポートフォリオ構築は、「設定の整理」「不要な機能の削除」「配色・UI の統一」「CI／デプロイの自動化」が鍵になると感じました。 今回の構成が、同様に Docusaurus を使っている方やこれから始める方の参考になれば幸いです。

これからも記事を少しずつ投稿しつつ、さらにブラッシュアップしていきます。どうぞよろしくお願いいたします。