🦕 【Pteranodon 】Docusaurus GitHub Pages Starter 使い方ガイド

ウェブ開発

はじめに

Docusaurus GitHub Pages Starter（通称：Pteranodon） は、あなたのプロジェクトの docs フォルダを簡単にWiki化できる魔法のテンプレートです！

プテラノドンが翼を広げて飛び立つように、あなたのドキュメントサイトも簡単にデプロイできます。GitHub Actions による CI/CD パイプラインで、ファイルを更新するだけで自動的にサイトが更新される仕組みになっています。

✨ 主な特徴

  • 📝 Docusaurus v3 - TypeScript完全対応の最新版
  • 🦕 Pteranodonテーマ - 古代の翼竜をモチーフにしたオリジナルデザイン
  • 🔄 自動デプロイ - GitHub Actions による CI/CD パイプライン
  • ⚡ TypeScript対応 - 型安全な開発環境
  • 📱 レスポンシブ対応 - モバイルファーストデザイン
  • 🎨 カスタマイズ可能 - 簡単にブランディング変更可能

🛠️ セットアップ手順

1. テンプレートを使って新しいリポジトリを作成

  1. docusaurus-gh-pages-starter にアクセス
  2. 画面上部の 「Use this template」 ボタンをクリック
  3. 「Create a new repository」 を選択
  4. リポジトリ名と公開設定を選択
  5. 「Create repository from template」 をクリック

2. ローカルにクローンして初期設定

# リポジトリをクローン
git clone https://github.com/あなたのユーザー名/あなたのリポジトリ名.git
cd あなたのリポジトリ名

# 依存関係をインストール
npm install
# または
yarn install

3. 設定ファイルをカスタマイズ

docusaurus.config.ts を編集して、以下の値を更新してください：

const config: Config = {
  title: 'あなたのサイト名',
  tagline: 'あなたの素晴らしいキャッチフレーズ',
  url: 'https://あなたのユーザー名.github.io',
  baseUrl: '/あなたのリポジトリ名/',
  organizationName: 'あなたのユーザー名',
  projectName: 'あなたのリポジトリ名',
  // ... その他の設定
};

4. GitHub Pages を有効化

  1. リポジトリの Settings に移動
  2. 左サイドバーの Pages をクリック
  3. Source で GitHub Actions を選択

5. 変更をプッシュしてデプロイ

git add .
git commit -m "初期カスタマイズ"
git push origin main

🎉 数分後に https://あなたのユーザー名.github.io/あなたのリポジトリ名/ でサイトが公開されます！

📁 フォルダ構成と使い方

重要なフォルダとファイル

docusaurus-gh-pages-starter/
├── .github/workflows/gh_actions_deploy.yml  # GitHub Actions設定
├── docs/          # 📖 ここにドキュメントを追加！
├── blog/          # 📝 ブログ記事用フォルダ
├── static/img/    # 🖼️  画像ファイル
├── src/           # ⚛️  Reactコンポーネント
└── docusaurus.config.ts  # 🔧 メイン設定ファイル

📖 ドキュメント（Wiki）の作成方法

docs/ フォルダに新しいMarkdownファイルを作成するだけです：

---
sidebar_position: 1
---

# 私のドキュメント

新しいドキュメントの内容です。

## セクション1

詳細な説明...

## セクション2

さらに詳しい内容...

📝 ブログ記事の追加

blog/ フォルダに新しいファイルを作成：

---
slug: my-first-post
title: 私の最初の記事
authors: [あなたの名前]
tags: [docusaurus, blog]
---

初めてのブログ記事です！

<!-- truncate -->

記事の本文が続きます...

🎨 カスタマイズ方法

サイトの見た目を変更

  • サイトタイトル・キャッチフレーズ: docusaurus.config.ts で更新
  • ロゴ: static/img/Pteranodon.png を置き換え
  • ファビコン: static/img/favicon-Pteranodon.ico を置き換え
  • カラーテーマ: src/css/custom.css のCSS変数を変更

ナビゲーションの設定

docusaurus.config.ts の themeConfig.navbar を編集：

navbar: {
  title: 'My Site',
  logo: {
    alt: 'My Site Logo',
    src: 'img/logo.svg',
  },
  items: [
    {
      type: 'docSidebar',
      sidebarId: 'tutorialSidebar',
      position: 'left',
      label: 'ドキュメント',
    },
    {to: '/blog', label: 'ブログ', position: 'left'},
    // カスタムリンクを追加
  ],
},

🔄 自動デプロイの仕組み

CI/CDパイプライン

このテンプレートには強力な自動デプロイ機能があります：

  • mainブランチへのプッシュ → 自動的にサイトをデプロイ
  • プルリクエスト → ビルドテストを実行
  • サイトの更新 → 2-3分以内に反映

手動でのローカル開発

# 開発サーバー起動
npm start

# ビルド（本番用）
npm run build

# ビルド済みサイトの確認
npm run serve

# TypeScript型チェック
npm run typecheck

📚 実際の使用例

1. プロジェクトドキュメント

docs/
├── intro.md                 # プロジェクト概要
├── getting-started/         # 開始方法
│   ├── installation.md
│   └── configuration.md
├── api/                     # API仕様
│   ├── authentication.md
│   └── endpoints.md
└── troubleshooting.md       # トラブルシューティング

2. 社内Wiki

docs/
├── onboarding/              # 新人向け
├── processes/               # 業務プロセス
├── tools/                   # ツール使用方法
└── policies/                # 各種ポリシー

3. 学習ノート

docs/
├── programming/
│   ├── javascript/
│   ├── python/
│   └── react/
├── design/
└── project-management/

🎯 まとめ

Docusaurus GitHub Pages Starter を使えば：

  • ✅ 簡単セットアップ - テンプレートから数分で開始
  • ✅ 自動デプロイ - ファイル更新で即座にサイト反映
  • ✅ プロ仕様 - TypeScript対応、レスポンシブデザイン
  • ✅ 無料運用 - GitHub Pages で完全無料
  • ✅ 拡張性 - カスタマイズ・プラグインで機能拡張

🦕 プテラノドンと一緒に、あなたのドキュメントサイトを大空に羽ばたかせましょう！

実際の動作確認: デモサイト

問題や質問があれば: GitHub Issues でお気軽にご相談ください！

コメント

タイトルとURLをコピーしました