GitHub Pagesで始める静的サイト公開：ポートフォリオを簡単作成

エンジニアやデザイナーとして自分のスキルを効果的にアピールするには、ポートフォリオサイトが欠かせません。しかし、「どのプラットフォームを選べばいいのか」「初期費用や月額料金が気になる」という悩みを抱える方も多いでしょう。

そこで本記事では、完全無料で利用できるGitHub Pagesを活用した静的サイト構築法を解説します。私の作成した実際に動作するTODOリストのサンプルを例に、初心者でも簡単に実装できる方法をご紹介します。

GitHub Pagesを選ぶべき5つの理由
始める前に準備すべきもの
実践！TODOリストサンプルコード
GitHub Pagesでポートフォリオサイトを公開する4ステップ
2024年最新！ポートフォリオを魅力的にするための5つのポイント
よくあるトラブルと解決策
次のステップ：ポートフォリオをさらに発展させるには
まとめ

GitHub Pagesを選ぶべき5つの理由

GitHub Pagesは、GitHubのリポジトリを活用して静的サイトを無料でホスティングできるサービスです。2024年現在も多くの開発者に支持される理由には、以下のメリットがあります。

完全無料で利用可能 - ドメイン取得やサーバー契約が不要
高いカスタマイズ性 - HTML/CSS/JavaScriptを自由に編集可能
独自ドメイン設定対応 - 取得済みドメインの連携も簡単
バージョン管理機能内蔵 - Gitの特性を活かした変更履歴管理
Jekyll対応による動的コンテンツ生成 - ブログ機能なども実装可能

特に、普段からGitHubを使用しているエンジニアにとっては、既存の開発フローとの親和性が高く、学習コストを抑えて始められる点が魅力です。

始める前に準備すべきもの

GitHub Pagesでポートフォリオサイトを構築するには、以下の準備が必要です。

GitHubアカウント（未登録の場合はGitHub公式サイトから無料で作成可能）
Gitがインストールされた環境（ローカル作業の場合）
HTML/CSSの基本的な知識

実践！TODOリストサンプルコード

以下に、シンプルなTODOリストアプリのサンプルコードを用意しました。これをGitHub Pagesで公開する形で実践していきます。

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TODO List</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My TODO List</h1>
  </header>
  <main>
    <input type="text" id="todo-input" placeholder="Enter a new task">
    <button onclick="addTodo()">Add Task</button>
    <ul id="todo-list">
      <!-- Tasks will be added here dynamically -->
    </ul>
  </main>
  <script src="scripts.js"></script>
</body>
</html>

CSS (styles.css)

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

header {
  background-color: #333;
  color: white;
  padding: 1rem 0;
}

main {
  margin: 2rem;
}

input {
  padding: 0.5rem;
  width: 60%;
  margin-right: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: left;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
}

li .task-text {
  flex: 1;
  margin-left: 1rem;
}

li.completed .task-text {
  text-decoration: line-through;
  color: gray;
}

li input[type="checkbox"] {
  width: 10px;
  height: 10px;
}

li .remove {
  background: red;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}

li .remove:hover {
  background: darkred;
}

JavaScript (scripts.js)

function addTodo() {
  const todoInput = document.getElementById('todo-input');
  const todoList = document.getElementById('todo-list');

  if (todoInput.value.trim() === '') {
    alert('Please enter a task!');
    return;
  }

  const listItem = document.createElement('li');

  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
      listItem.classList.add('completed');
    } else {
      listItem.classList.remove('completed');
    }
  });

  const textSpan = document.createElement('span');
  textSpan.textContent = todoInput.value;
  textSpan.className = 'task-text';

  const removeButton = document.createElement('button');
  removeButton.textContent = 'Remove';
  removeButton.className = 'remove';
  removeButton.onclick = function () {
    todoList.removeChild(listItem);
  };

  listItem.appendChild(checkbox);
  listItem.appendChild(textSpan);
  listItem.appendChild(removeButton);
  todoList.appendChild(listItem);
  todoInput.value = '';
}

GitHub Pagesでポートフォリオサイトを公開する4ステップ

新しいリポジトリを作成する

GitHubにログインし、右上の「+」アイコンから「New repository」をクリック
リポジトリ名を入力（例: portfolio または username.github.io）
- 注意: username.github.io の形式で作成すると、URLが短くなります（詳細はGitHub公式ドキュメント参照）
「Public」を選択し、「Add a README file」にチェックを入れる
「Create repository」ボタンをクリック

リポジトリにファイルをアップロード

作成したリポジトリページで「Add file」→「Upload files」を選択
先ほど作成したHTML/CSS/JavaScriptファイルをドラッグ＆ドロップ
「Commit changes」をクリックして確定

GitHub Pagesを有効化する

最新の推奨方法: GitHub Actionsを使用したデプロイ

GitHub Actionsを利用した新しいデプロイ方法が現在推奨されています。

リポジトリページの「Settings」タブをクリック
左側メニューから「Pages」を選択
「Source」セクションで「GitHub Actions」を選択
表示されるワークフローテンプレートから「Static HTML」を選択
提案されたワークフローファイルをコミット

このワークフローは actions/upload-pages-artifact と actions/deploy-pages を使用して、リポジトリを汚染せずに静的サイトをデプロイします。詳細な手順はZoZoTech公式ブログで解説されています。

従来の方法: ブランチからのデプロイ

リポジトリページの「Settings」タブをクリック
左側メニューから「Pages」を選択
「Source」セクションで「Deploy from a branch」を選択
「Branch」ドロップダウンから「main」（または「master」）を選択し、保存
設定が完了すると、「Your site is live at https://username.github.io/repository-name/」というメッセージが表示されます

サイトの動作確認

表示されたURLにアクセスして、サイトが正しく表示されているか確認
GitHub Pagesでは、変更をプッシュしてから公開されるまでに最大10分かかることがあります（GitHub公式ドキュメント参照）
表示されない場合は、デプロイのステータスをActionsタブで確認してから、F5キーでリロードしてみてください

2024年最新！ポートフォリオを魅力的にするための5つのポイント

モバイルファーストのレスポンシブデザインとJavaScript活用

最新の2024年Stack Overflow調査によると、JavaScriptが62.3%の開発者に使用され、最も人気のあるプログラミング言語となっています。採用担当者の83%以上がモバイル対応サイトを重視する傾向が続く中、JavaScriptを活用したインタラクティブな要素とレスポンシブデザインの両方を取り入れることが効果的です。

/* スマートフォン向けスタイル */
@media (max-width: 767px) {
  input, li {
    width: 90%;
  }
}

SEO対策を施す

以下のメタタグを<head>内に追加することで、検索エンジンでの表示順位向上が期待できます。

<meta name="description" content="あなたのポートフォリオサイトの簡潔な説明">
<meta name="keywords" content="ポートフォリオ, Web開発, エンジニア, スキル">
<meta name="author" content="あなたの名前">

プロジェクトにGitHubリポジトリをリンク

作品の詳細だけでなく、実際のコードも見てもらうことで技術力をアピールできます。

<a href="https://github.com/yourusername/project-name" target="_blank">GitHubでコードを見る</a>

Jekyll テーマで高度なデザインを実現

GitHub PagesはJekyllと連携することで、動的なコンテンツ生成が可能です。Jekyll Themesから無料テーマを選んで導入すれば、プロフェッショナルなデザインを簡単に実現できます。

Google Analyticsで訪問者データを分析

Google Analyticsを導入することで、ポートフォリオサイトの訪問者数や滞在時間などのデータを収集・分析できます。採用担当者の訪問状況を把握して効果的なアピールにつなげましょう。

よくあるトラブルと解決策

問題	解決策
サイトが表示されない	GitHub Pagesの設定が正しいか確認。GitHub Actionsを使用している場合はActionsタブでデプロイ状況を確認。公開までは最大10分かかる場合があります。
CSSやJavaScriptが適用されない	ファイルパスが正しいか確認。相対パスを使用しているか確認してください。
更新内容が反映されない	ブラウザのキャッシュをクリア、またはシークレットモードでアクセスしてみてください。
カスタムドメインの設定が反映されない	DNSの設定が正しいか確認し、GitHub公式ガイドを参照してください。
404エラーが表示される	リポジトリのルートディレクトリに `index.html` ファイルが存在するか確認してください。

次のステップ：ポートフォリオをさらに発展させるには

GitHub Pagesでの基本的なポートフォリオ公開は、キャリア構築の第一歩に過ぎません。以下の発展的な取り組みで、さらにスキルアップを図りましょう。

React/Vue.jsなどのフレームワーク導入 - Create React AppやVue CLIを使ってモダンなSPA（シングルページアプリケーション）を構築
CI/CDパイプラインの構築 - GitHub Actionsを活用した自動デプロイフローの確立
PWA（Progressive Web App）対応 - オフライン機能やプッシュ通知などを実装して、アプリのような体験を提供
オンラインブログ機能の追加 - Jekyllを活用して技術ブログを併設し、専門知識をアピール
ポートフォリオの多言語対応 - 国際的な求人にアプローチするための言語切り替え機能の実装

まとめ

GitHub Pagesを活用すれば、サーバー費用ゼロで、プロフェッショナルなポートフォリオサイトを簡単に作成・公開できます。初心者でも取り組みやすい環境が整っているため、この記事を参考に、今日からあなただけのポートフォリオサイト作りを始めてみましょう。

転職活動や副業獲得の場面で、GitHub Pagesで作成したポートフォリオサイトがあなたのスキルを効果的にアピールし、キャリアの可能性を広げてくれるでしょう。

本記事は2024年3月時点の情報に基づいて作成され、最新の情報を反映して更新されています。GitHub Pagesの仕様は頻繁に更新されるため、最新の詳細情報はGitHub公式ドキュメントをご確認ください。