GitHub Pagesでウェブサイトを公開する手順

公開日: 2025年6月28日 | カテゴリ: ツール, ウェブ開発

GitHub Pagesの画像

自分のウェブサイトをインターネットに公開したいけど、サーバーを借りるのはハードルが高いと感じていませんか? そんなときに便利なのが「GitHub Pages」です。GitHubアカウントさえあれば、 無料で簡単に静的ウェブサイトを公開できます。今回はその基本的な手順を解説します。

1. GitHubアカウントの作成とリポジトリの準備

まだGitHubアカウントを持っていない場合は、GitHubのウェブサイトから作成します。 次に、公開したいウェブサイトのファイルを格納するリポジトリを作成します。 リポジトリ名は、ユーザー名.github.io(例: `gamesken29suki.github.io`)とすることで、 そのままウェブサイトのURLになります。 または、既存のリポジトリ内の`docs`フォルダや`gh-pages`ブランチを使うことも可能です。

2. ファイルのアップロード

作成したリポジトリに、公開したいHTML、CSS、JavaScript、画像などのファイルをアップロードします。 ウェブサイトのトップページは必ず`index.html`という名前にしてください。 Gitコマンドを使ってローカルからプッシュするのが一般的ですが、 GitHubのウェブインターフェースからもファイルを直接アップロードできます。


# ローカルでリポジトリを初期化
git init

# リモートリポジトリを追加
git remote add origin https://github.com/ユーザー名/リポジトリ名.git

# ファイルを追加
git add .

# コミット
git commit -m "Initial commit for GitHub Pages"

# プッシュ
git push -u origin main # または master
            

3. GitHub Pagesの設定

リポジトリのページにアクセスし、「Settings」タブをクリックします。 左側のメニューから「Pages」を選択します。 「Build and deployment」セクションの「Source」で、 ウェブサイトのファイルが置かれているブランチ(通常は`main`または`master`)と、 フォルダ(`/(root)`または`/docs`)を選択し、「Save」をクリックします。

4. ウェブサイトの確認

設定が完了すると、通常数分程度でウェブサイトが公開されます。 「Pages」の設定画面に表示されるURL(例: `https://gamesken29suki.github.io/`)にアクセスして、 ウェブサイトが表示されるか確認しましょう。 もしすぐに表示されない場合は、少し時間を置いてから再度試してみてください。

GitHub Pagesは、ポートフォリオサイトやブログ、小規模なプロジェクトのデモなど、 様々な静的コンテンツの公開に非常に便利です。ぜひ活用してみてください。