はじめに
前回の記事ではお問い合わせフォームのHTML・CSS・JavaScriptバリデーションの実装方法を解説しました。今回はGitHub Pagesを使ってポートフォリオサイトを無料で公開する方法を解説します。GitHub Pagesとは、GitHubが提供する静的サイトのホスティングサービスです。リポジトリにファイルをプッシュするだけでサイトを公開でき、独自ドメインの設定にも対応しています。無料・高速・安定と三拍子そろった環境をフルに活用しましょう。
1. GitHub Pagesとは
1.1 GitHub Pagesの概要
GitHub PagesはGitHubのリポジトリに置いたHTMLファイルをそのままWebサイトとして公開できる無料のホスティングサービスです。
| 項目 | 内容 |
|---|---|
| 費用 | 無料（GitHubアカウントがあれば使える） |
| 対応ファイル | HTML・CSS・JavaScript（静的ファイルのみ） |
| URL形式 | https://ユーザー名.github.io/リポジトリ名/ |
| SSL | 自動で有効（HTTPSで公開される） |
| 独自ドメイン | 対応あり |
| 容量制限 | リポジトリ1GB・月間転送量100GB |
⚠️ GitHub Pagesで公開できないもの： PHPやNode.jsなどのサーバーサイドの処理は動きません。WordPressサイトの公開には使えません。HTMLとCSSとJavaScriptで作った静的サイト専用のサービスです。
1.2 公開までの全体の流れ
1. GitHubにリポジトリを作成する
2. ローカルのファイルをリポジトリにプッシュする
3. GitHub Pagesの設定を有効化する
4. 公開URLにアクセスして確認する
（5. 独自ドメインを設定する）
2. リポジトリを作成する
2.1 ポートフォリオ用リポジトリの作成
- github.com にサインインします。
- 右上の「＋」→「New repository」をクリックします。
- 以下の内容で設定します。
| 項目 | 設定内容 |
|---|---|
| Repository name | portfolio（任意の名前） |
| Visibility | Public（GitHub Pagesは無料プランの場合Publicのみ対応） |
| Initialize with README | チェックを入れる |
- 「Create repository」をクリックします。
💡 ユーザー名と同じリポジトリ名にすると特別なURLになります： ユーザー名/ユーザー名.github.io というリポジトリを作成すると https://ユーザー名.github.io というURLでアクセスできます。自分のメインポートフォリオサイト用にこの名前で作るのがおすすめです。
3. ローカルのファイルをGitHubにプッシュする
3.1 既存のローカルリポジトリをGitHubと連携する
モデリングやポートフォリオ作成の記事で作業していたフォルダがすでにGit管理されている場合は、そのリポジトリをGitHubと連携します。
# 作業フォルダに移動
cd ~/Desktop/portfolio
# GitHubのリポジトリと連携（URLは自分のリポジトリのURLに変更）
git remote add origin https://github.com/yourusername/portfolio.git
# ブランチ名をmainに変更（古いGitではmasterになっている場合がある）
git branch -M main
# GitHubにプッシュ
git push -u origin main
3.2 ゼロから始める場合
# 作業フォルダに移動
cd ~/Desktop/portfolio
# Gitリポジトリを初期化
git init
# 全ファイルをステージング
git add .
# 最初のコミット
git commit -m "initial commit"
# GitHubと連携
git remote add origin https://github.com/yourusername/portfolio.git
# ブランチ名をmainに変更してプッシュ
git branch -M main
git push -u origin main
3.3 VSCodeからプッシュする
VSCodeのソース管理パネルからGUIで操作する場合は以下の手順です。
- 左サイドバーの「ソース管理」アイコンをクリックします。
- 変更ファイルの横の「＋」で全ファイルをステージングします。
- コミットメッセージを入力して「コミット」をクリックします。
- 「…」→「プッシュ」をクリックします。
4. GitHub Pagesを有効化する
4.1 GitHub Pagesの設定手順
- GitHubのリポジトリページを開きます。
- 上部タブの「Settings」をクリックします。
- 左サイドバーの「Pages」をクリックします。
- 「Source」のドロップダウンで 「Deploy from a branch」 を選択します。
- ブランチを 「main」・フォルダを 「/ (root)」 に設定します。
- 「Save」をクリックします。
4.2 公開URLを確認する
設定を保存してから数分後にPagesページをリロードすると公開URLが表示されます。
https://yourusername.github.io/portfolio/
このURLにアクセスしてサイトが正しく表示されているか確認しましょう。
⚠️ 表示されるまで数分かかる場合があります： 設定直後は反映待ちのため404が表示されることがあります。3〜5分待ってからアクセスしてみてください。
5. ファイル構成の注意点
5.1 トップページはindex.htmlにする
GitHub Pagesはルートフォルダの index.html を自動的にトップページとして表示します。トップページのファイル名が index.html になっているか確認しましょう。
portfolio/
├── index.html ← トップページ（必須）
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
└── profile.jpg
5.2 パスの書き方に注意する
GitHub Pagesではリポジトリ名がURLのサブディレクトリになります（例：/portfolio/）。そのため、ファイルのパスは相対パスで書くのが安全です。
<!-- 絶対パス（環境によって動かないことがある） -->
<link rel="stylesheet" href="/css/style.css">
<!-- 相対パス（どの環境でも動く・推奨） -->
<link rel="stylesheet" href="css/style.css">
<img src="images/profile.jpg" alt="プロフィール">
💡 ユーザー名.github.io リポジトリの場合はルートがトップになります： yourusername.github.io というリポジトリ名にすると https://yourusername.github.io/ がトップページになり、サブディレクトリの問題がなくなります。
6. 更新のたびに自動で公開される
6.1 プッシュするだけで自動デプロイされる
GitHub Pagesの便利なところは、ファイルを変更してGitHubにプッシュするだけで自動的にサイトが更新されることです。
# ファイルを編集した後
git add .
git commit -m "プロフィール画像を更新"
git push
プッシュ後1〜3分で変更がサイトに反映されます。
6.2 デプロイの状況を確認する
リポジトリの「Actions」タブでデプロイの状況を確認できます。
| ステータス | 意味 |
|---|---|
| 🟡 実行中（黄色の丸） | デプロイ処理中 |
| ✅ 完了（緑のチェック） | デプロイ完了・サイトに反映済み |
| ❌ 失敗（赤の×） | エラーが発生・ログを確認する |
7. 独自ドメインを設定する
7.1 独自ドメインを使うメリット
| 項目 | GitHub Pagesのデフォルト | 独自ドメイン |
|---|---|---|
| URL | yourusername.github.io/portfolio | yourname.com |
| 覚えやすさ | △ | ✅ |
| プロフェッショナル感 | △ | ✅ |
| 費用 | 無料 | 年間1,000〜2,000円程度 |
7.2 ドメインを取得する
日本でよく使われるドメイン取得サービスは以下の通りです。
| サービス | 特徴 |
|---|---|
| お名前.com | 国内最大手・種類が豊富 |
| ムームードメイン | GMOが運営・シンプルな管理画面 |
| Cloudflare Registrar | 原価でドメインを取得できる（英語） |
ポートフォリオ用としては .com・.jp・.dev などがよく使われます。
7.3 DNSレコードを設定する
ドメインを取得したら、ドメインのDNS設定でGitHub Pagesのサーバーに向ける設定をします。
Aレコードの設定（ルートドメインの場合）：
ドメイン取得サービスのDNS管理画面で以下の4つのAレコードを追加します。
| タイプ | ホスト名 | 値（IPアドレス） |
|---|---|---|
| A | @ | 185.199.108.153 |
| A | @ | 185.199.109.153 |
| A | @ | 185.199.110.153 |
| A | @ | 185.199.111.153 |
CNAMEレコードの設定（wwwサブドメインの場合）：
| タイプ | ホスト名 | 値 |
|---|---|---|
| CNAME | www | yourusername.github.io |
7.4 GitHubのPages設定で独自ドメインを登録する
- リポジトリの「Settings」→「Pages」を開きます。
- 「Custom domain」の入力欄に取得したドメイン（例：
yourname.com）を入力します。 - 「Save」をクリックします。
- 「Enforce HTTPS」にチェックが入っているか確認します。
7.5 CNAMEファイルをリポジトリに追加する
リポジトリのルートに CNAME という名前のファイル（拡張子なし）を作成して、独自ドメインを1行だけ記述します。
yourname.com
これをGitHubにプッシュしておくと、GitHub PagesのSettings画面で設定した内容が上書きされず保持されます。
# CNAMEファイルを作成
echo "yourname.com" > CNAME
git add CNAME
git commit -m "独自ドメインのCNAMEファイルを追加"
git push
💡 DNSの反映には最大48時間かかります： DNS設定を変更してからサイトにアクセスできるようになるまでは最大48時間かかります。通常は数時間以内に反映されます。
8. よくあるトラブルと対処法
8.1 サイトが表示されない（404エラー）
| 原因 | 対処法 |
|---|---|
| GitHub Pagesの設定がまだ反映されていない | 3〜5分待って再アクセスする |
| index.htmlがルートにない | ファイル構成を確認する |
| ブランチの設定が間違っている | Settingsで正しいブランチを選択する |
8.2 CSSや画像が読み込まれない
| 原因 | 対処法 |
|---|---|
| パスが絶対パスになっている | 相対パスに変更する |
| ファイル名の大文字・小文字が違う | Style.css と style.css は別ファイルとして扱われる |
| フォルダの階層が正しくない | ローカルで確認してからプッシュする |
💡 ブラウザのキャッシュをクリアしましょう： デプロイ後に古い表示が残っている場合はブラウザのキャッシュをクリアすると解消されることがあります。Ctrl + Shift + R（Mac：Command + Shift + R）で強制リロードできます。
8.3 独自ドメインでHTTPSにならない
- GitHub PagesのSettings→Pagesで「Enforce HTTPS」にチェックが入っているか確認します。
- チェックが入れられない場合はDNSの設定がまだ反映されていない状態です。しばらく待ってから再確認します。
9. 公開チェックリスト
✓ リポジトリがPublicになっているか
✓ ルートフォルダに index.html があるか
✓ ファイルのパスが相対パスで書かれているか
✓ GitHub PagesのSourceがmainブランチに設定されているか
✓ 公開URLにアクセスしてサイトが正しく表示されているか
✓ スマートフォンでも表示確認をしたか
✓ CSSと画像が正しく読み込まれているか
✓ 独自ドメインを設定する場合はCNAMEファイルをリポジトリに追加したか
✓ 「Enforce HTTPS」が有効になっているか
まとめ
今回はGitHub Pagesを使ってポートフォリオサイトを無料で公開する方法を解説しました。ポイントをまとめると：
- GitHub PagesはHTMLとCSSとJavaScriptで作った静的サイトを無料で公開できるサービス
- リポジトリをPublicにしてSettings→Pagesからmainブランチを設定するだけで有効化できる
- ファイルのパスは相対パスで書くと環境を問わず動作する
index.htmlがルートにないとトップページが表示されないため必ず確認する- プッシュするだけで自動デプロイされるため更新作業がシンプル
- 独自ドメインはAレコードとCNAMEレコードを設定してGitHubにCNAMEファイルを追加する
- DNSの反映には最大48時間かかるため焦らずに待つ
次の記事では、ポートフォリオサイトをより魅力的に見せるためのデザインの基本原則を解説します。余白・フォント・配色・レイアウトのルールを押さえて、コーディングだけでなくデザインの観点からもサイトを磨く方法をお届けします。お楽しみに！
コメント