GitHub Pagesを使って簡単にウェブサイトを公開しよう

2025年2月13日 最終更新日時 : 2025年2月13日 山崎講師山崎講師

GitHub Pagesとは？

GitHub Pagesは、GitHubが提供する無料のウェブホスティングサービスです。通常、ウェブサイトを公開するためにはFTPソフトを使用してサーバーにファイルをアップロードする必要があります。しかし、GitHub Pagesを使えば、GitHubにファイルをプッシュするだけで簡単にウェブサイトを公開できます。

GitHub Pagesの制約

GitHub Pagesは、Javaなどの動的言語を実行することはできません。

GitHub Pagesの使い方

1. GitHubにログイン

まずはGitHubにログインし、自分のユーザー名を確認します。ユーザー名は、右上のアイコンをクリックするとアイコンの横に表示されている部分で確認できます。

2. 新しいリポジトリを作成

1．GitHubのダッシュボード右上から「New repository」ボタンをクリックし、新しいリポジトリを作成します。リポジトリ名は以下の形式にする必要があります。

{ユーザー名}.github.io

例：tomosta.github.io

2．リポジトリの公開設定は、「パブリック」にする必要があります（プロプランではプライベートリポジトリも利用可能）。

3．Create repositoryボタンをクリックします。

リポジトリーとは？

Gitのリポジトリーとは、ファイルやディレクトリの変更履歴を管理するデータベースのことです。リポジトリーには「ローカルリポジトリー」と「リモートリポジトリー」があり、ローカルリポジトリーは開発者のPC上に、リモートリポジトリーはGitHubなどのサーバー上に保存されます。英語の【repository】には保管場所という意味があります。

リポジトリーは、ソースコードのバージョンを管理し、過去の状態に戻したり、複数人での共同開発を円滑に進めたりするために使われます。リポジトリー内では、「コミット」によって変更履歴が記録され、「ブランチ」を作成することで並行して開発が可能になります。また、「プル」や「プッシュ」を通じてローカルとリモートのリポジトリーを同期できます。リポジトリーで効率的なコード管理とチーム開発が実現できます。

3. リポジトリをクローン

リポジトリを作成したら、ローカル環境にクローンします。GitHubのリポジトリページで「Code」ボタンをクリックし、「Use HTTPS」のURLをコピーします。その後、Gitクライアント（Git Bashなど）で以下のコマンドを実行します。

git clone {コピーしたURL}

4. index.html を作成

次に、リポジトリ内に index.html を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My GitHub Page</title>
</head>
<body>
    <h1>Welcome to My GitHub Page</h1>
</body>
</html>

このファイルを保存し、以下のコマンドでコミットとプッシュを行います。

git add .
git commit -m "トップページを作成"
git push origin main

5. GitHub Pagesを有効化

リポジトリの「Settings」タブを開き、「Pages」セクションへ移動します。「Branch」セクションで main を選択し、「Save」をクリックすると、GitHub Pagesが有効になります。

6. サイトの確認

しばらくすると、以下のURLでサイトが公開されます。

https://ユーザー名.github.io/

もし404エラーが表示された場合は、少し時間を置いてから再度アクセスしてください。

テンプレートやデザインの適用

Bootstrapなどのテンプレートを使用すると、より見栄えの良いサイトを作成できます。例えば、Start Bootstrap からテンプレートをダウンロードし、展開したファイルをリポジトリにアップロードしてプッシュすれば、簡単にデザインを適用できます。

GitHub Pagesのメリット

  • 無料で利用可能（プロプランもあり）
  • Gitと連携して簡単に更新できる
  • 複数人での共同管理が容易
  • 履歴管理やリバート（変更の取り消し）が簡単

間違えた変更の取り消し

間違えてファイルを削除してしまった場合、Gitのリバート機能を使えば元に戻すことができます。

git revert HEAD

その後、

git push origin main

と実行すれば、誤った変更を取り消すことができます。

まとめ

GitHub Pagesを使えば、静的なウェブサイトを無料で簡単に公開できます。エンジニアだけでなく、ポートフォリオサイトや技術ブログを作りたい方にもおすすめです。まずはシンプルな index.html を作成し、GitHubにプッシュしてみましょう。

今後もGitHubの機能について紹介していきますので、ご興味のある方はぜひチェックしてみてください！

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
新入社員
前の記事
HTMLプロジェクトのCI/CD – 自動ビルド＆デプロイの実践ガイド
2025年2月13日
次の記事
日本の主要な賃金調査の違いと特徴を解説！
2025年2月13日