こんにちは。今日は君のエンジニアとしてのキャリアを大きく加速させる「最初の魔法」を教えるよ。
「自分の書いたコードが、世界中の誰からでも見えるURLとして公開される」。この感動は、何度味わってもいいものだ。今日は、GitHub Pagesを使って、君の静的サイトを無料で、しかもプロフェッショナルな独自ドメインで公開する方法を徹底的に解説する。
これは単なる「公開手順」じゃない。CI/CDの第一歩であり、現代のモダンな開発フローの入り口だ。準備はいいかい？
—
1. GitHub Pagesとは何か？ —— その本質を見極める
GitHub Pagesは、GitHubのリポジトリに保存されたHTML/CSS/JSファイルを、そのままWebサイトとして配信するサービスだ。
- なぜこれを使うのか？
- コストゼロ: サーバー代は一切かからない。
- CI/CDとの親和性: `git push` するだけでサイトが更新される。
- 高い信頼性: 世界最高峰のCDN（コンテンツデリバリネットワーク）上で動いている。
—
2. 世界最速の公開：HelloWorldをデプロイする
まずはシンプルに、HTMLファイルをブラウザに表示させることから始めよう。
1. リポジトリ作成: GitHubで新しいリポジトリを作る（例: `my-awesome-site`）。
2. ファイル追加: リポジトリ内に `index.html` を作成する。
Hello, World! GitHub Pagesでデビューだ。
3. 公開設定: リポジトリの `Settings` → `Pages` タブへ移動。
4. Source設定: `Branch` を `main` にして `Save` を押す。
これだけで、`https://<ユーザー名>.github.io/<リポジトリ名>/` に君のサイトが誕生する。これこそが、モダン開発の「Hello World」だ。
—
3. モダンな開発へ：JekyllとReactのデプロイ戦略
初心者の君が次にぶつかる壁が「フレームワークを使ったサイトの公開」だ。
Jekyll（静的サイトジェネレーター）
GitHub PagesはJekyllを標準サポートしている。リポジトリのルートに `_config.yml` を置くだけで自動ビルドが走る。ブログやドキュメントサイトならこれが一番楽だ。
React / Vue / Next.js
これらは「静的ビルド」が必要だ。GitHub Actionsを使おう。
リポジトリの `.github/workflows/deploy.yml` に以下のような設定を書けば、`push` するたびに自動でビルド＆デプロイされる。
name: Deploy to GitHub Pages
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install and Build
run: |
npm install
npm run build # ここで静的ファイルを生成
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist # ビルド結果が出力されるディレクトリを指定
—
4. プロの顔を持つ：独自ドメインの設定
`github.io` のサブドメインも悪くないが、独自ドメイン（`example.com` など）を当てると信頼性が段違いになる。
手順の極意：
1. ドメイン取得: お名前.comやGoogle Domains等で購入。
2. DNS設定: ドメイン管理画面で「DNS設定」を開き、以下の4つのIPを「Aレコード」として登録する。
- `185.199.108.153`
- `185.199.109.153`
- `185.199.110.153`
- `185.199.111.153`
3. GitHub側の設定: `Settings` → `Pages` の `Custom domain` 欄に、取得したドメインを入力。
4. CNAMEファイルの作成: リポジトリのルートに `CNAME` というファイルを作り、中身にドメイン名（例: `yourdomain.com`）を書いてプッシュする。
これだけで、世界中のどこからでも君のブランドでサイトにアクセスできるようになる。
—
最後に：エンジニアとして成長するために
今回学んだ「リポジトリへのプッシュがサイトの更新に直結する」というフロー。これがCI/CDの真髄だ。
最初は「動く」だけで感動するはずだ。でも、慣れてきたら「どうすればもっと速くデプロイできるか？」「どうすればテストを自動化できるか？」と自問自答してみてほしい。
GitHub Pagesは、君がプロのエンジニアとして歩むための「最初の実験場」だ。失敗してもいい。何度でもプッシュし、何度も壊して、そのたびに直せばいい。それが、一番の近道だからね。
何か詰まったら、いつでも戻っておいで。君の挑戦を応援しているよ！