🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

GitHub PagesでWebサイトを無料公開する方法（静的サイト入門）

これまでのGit/GitHub入門シリーズでは、アカウントの作成から始まり、基本的なコマンド操作、ブランチを使ったチーム開発の基本フローまで、一通りの流れを学んできました。

シリーズの締めくくりとなる今回は、あなたがGitHub上で管理しているプロジェクトを、実際にWebサイトとして世界中に無料公開するための「GitHub Pages」という素晴らしい機能を紹介します。ポートフォリオサイトや、制作したWebアプリのデモページなどを公開するのに最適な方法です。この最後のステップをマスターして、あなたの作品を世界に発信しましょう！

GitHub Pagesとは？何がすごいのか

GitHub Pagesとは、GitHubが提供している**静的サイトのホスティングサービス**です。静的サイトとは、HTML、CSS、JavaScriptといった、サーバー側での処理を必要としないファイルだけで構成されたWebサイトのことを指します。PHPやデータベースとの連携はできませんが、ポートフォリオ、ブログ、プロジェクトのドキュメントサイトなど、多くの用途には十分すぎるほど強力です。

GitHub Pagesの主なメリットは以下の通りです。

公開方法は2種類！ユーザーサイトとプロジェクトサイト

GitHub Pagesには、用途に応じて2種類の公開方法があります。

  1. ユーザーサイト（または組織サイト）
    • URL: `あなたのユーザー名.github.io`
    • 特徴: 1アカウントにつき1つだけ作成できます。リポジトリ名を必ず「`ユーザー名.github.io`」という名前にする必要があります。個人のポートフォリオやブログのトップページとして使うのに最適です。
  2. プロジェクトサイト
    • URL: `あなたのユーザー名.github.io/リポジトリ名/`
    • 特徴: 通常のリポジトリごとに作成できます。作成できる数に制限はありません。個別のプロジェクトのデモページや、ドキュメントサイトとして使うのに適しています。

今回は、どんなリポジトリでも気軽に試せる「プロジェクトサイト」の公開方法を解説します。

実践！プロジェクトサイトを公開する手順

これまでの記事で作成した`my-first-repo`リポジトリをWebサイトとして公開してみましょう。

ステップ1: 公開したいリポジトリの「Settings」に移動する

まず、GitHub上で公開したいリポジトリのページを開き、タブの中から「Settings」をクリックします。

[画像：GitHubリポジトリのタブ一覧で「Settings」が強調されている様子]

ステップ2: 「Pages」セクションで公開ソースを選択する

Settingsページの左側のメニューから「Pages」をクリックします。「Build and deployment」という項目にある「Source」の設定に注目してください。

[画像：GitHub Pagesのソース選択で「Deploy from a branch」が選択されている様子]

「Deploy from a branch」が選択されていることを確認します。これは「特定のブランチを元にサイトを公開する」という最も基本的な方法です。

ステップ3: 公開するブランチを選択して保存する

「Branch」という項目で、どのブランチを公開するかを設定します。`main`ブランチのコードを公開したいので、以下のように設定します。

設定したら、「Save」ボタンをクリックします。

[画像：ブランチとして`main`、フォルダとして`/(root)`が選択され、「Save」ボタンが押される様子]

ステップ4: 公開されたURLを確認する

Saveボタンを押すと、ページが再読み込みされ、上部に「Your site is live at ...」という緑色のバナーが表示されます。サイトがインターネット上に公開されるまでには、1〜2分ほど時間がかかる場合があります。

[画像：GitHub Pages設定の上部に表示される「Your site is live at...」という緑色のバナー]

表示されたURLをクリックしてみましょう。以前作成した「Hello, World!」のページが、インターネット上の誰でもアクセスできるウェブサイトとして表示されれば成功です！

サイトの更新方法

GitHub Pagesの素晴らしい点は、更新が非常に簡単なことです。ローカルでファイルを修正し、その変更を**公開設定しているブランチ（今回は`main`）にプッシュするだけ**で、数分後には自動的に公開サイトに内容が反映されます。

試してみましょう。ローカルの`index.html`の内容を書き換えます。

echo "<h1>My Website is Updated!</h1>" > index.html

変更を`add`して`commit`します。

git add index.html
git commit -m "Update index.html for GitHub Pages"

最後に、変更を`push`します。

git push origin main

プッシュが完了したら、1〜2分待ってから、先ほど公開したサイトのURLを再読み込みしてみてください。ページの内容が更新されているはずです。

まとめ：GitHubで世界にあなたの作品を発信しよう！

このGitHub入門シリーズで、あなたはアカウント作成から始まり、Gitの基本操作、共同開発のフロー、そして遂には自分の手でWebサイトを公開するところまで、一通りの流れを体験しました。これはWeb制作者として非常に大きな一歩です。

ここで得た知識は、あなたの今後の開発活動における強力な土台となります。ぜひ、ご自身のポートフォリオや、新しく作ったプロジェクトをGitHub Pagesで公開し、世界中の人に見てもらいましょう。あなたの開発ライフが、より快適で創造的になることを願っています！

関連テンプレート