GitHub Pagesとは？静的サイトを無料公開する方法も解説

GitHub Pagesとは

そもそもGitHubとは、ソフトウェア開発者がコードを管理・共有するためのプラットフォームです。GitHubはバージョン管理システムであるGitをベースにしており、複数の開発者が同時に作業してもコードの変更を管理し、追跡できる仕組みを提供します。

開発者はプロジェクトのリポジトリ（コードとその関連データを保存する場所）を作成し、コードの変更履歴を保存、共有しながら共同作業を行うことができます。

GitHub Pagesは、GitHub上のリポジトリを使って静的なWebサイトを無料でホスティングできるサービスです。GitHub Pagesを使うと、特別なサーバ設定をせずに簡単にWebサイトを公開できます。

静的サイトとは、サーバ側の動的処理を伴わず、HTMLやCSS、JavaScriptなどで構成されるシンプルなサイトを指します。特にプログラミング初心者やWeb開発の経験が少ない人でも、簡単にWebサイトを公開できます。

この記事では、プログラミング初心者の方、Webサイトを自作してみたい方を中心に、GitHub Pagesの概念や使い方などを図解していきます。

【参考】：GitHub Japan | GitHub

GitHubとは？メリットや使い方、Gitとの違いも解説

GitHub リポジトリとは？GitHub Desktopによる作成方法などを解説！

GitHub Pagesのメリット

GitHub Pagesを解説する前に、GitHub Pagesのメリットについて確認しておきましょう。GitHub Pagesには次のようなメリットがあり、開発者やクリエイターに活用されています。

GitHub Pagesは完全無料で利用でき、サーバ設定や複雑なインフラ管理が不要です。リポジトリのブランチにコードを配置するだけで、すぐにWebサイトを公開できるため、手軽で時間がかかりません。サイト公開はブランチにファイルを追加・更新するだけで済みます。

GitHubでブランチ作成を行う方法とは？コマンド入力方法を解説

GitHub Pagesは、GitHubのバージョン管理システム（Git）と完全に統合されています。これにより、コードの変更履歴を追跡しながら、簡単にWebサイトの更新やリリースが行えます。また、過去の状態に戻すことが可能なので、サイトの安定性が保てます。

Gitとは？GitHubとの違いやメリットをわかりやすく解説！

GitHub Pagesは主に静的なWebサイトをターゲットにしており、サーバ側で処理を行う必要がないサイト（ポートフォリオやブログなど）に向いています。技術的なスキルが少ない人でも、基本的なHTMLやCSS、JavaScriptの知識があれば簡単にWebサイトを作成して公開できます。

また、Jekyllなどの静的サイトジェネレーターとの統合により、ブログ形式のサイトも簡単に構築できます。さらに自分でホスティングサーバを立てる必要がないため、インフラの管理が不要というのもメリットの1つです。

GitHub Pagesは、開発者のポートフォリオやプロジェクトのドキュメントを公開するのに非常に便利です。GitHubで管理しているプロジェクトのドキュメントや説明を簡単に公開し、他の開発者やクライアントに見せることができます。

GitHub Pagesは、GitHubの通常のGitHubのワークフローに簡単に統合できるため、継続的なデプロイや更新が容易です。自動化されたCI/CD（継続的インテグレーション/継続的デリバリー）と統合することで、コードがプッシュされるたびに自動的にサイトが更新されるようにすることもできます。

GitHub PagesはGitHubが提供するサービスなので、そのインフラは非常に安定しており、高速なパフォーマンスが保証されています。GitHubは世界中のサーバを利用しているため、サイトの読み込みが非常に高速です。

GitHub Pagesでホスティングされたウェブサイトは、デフォルトでHTTPSに対応しています。HTTPSとは、Hyper Text Transfer Protocol Secureの略で、インターネット通信を暗号化することで、データの盗聴や改ざんを防ぐプロトコルです。

【参考】：GitHub Pages について ｜GitHub Docs

GitHub Pagesのデメリット

以上GitHub Pagesのメリットを挙げましたが、下記に挙げるような制約や機能制限など、デメリットもあります。デメリットがあることを理解した上でGitHub Pagesを利用し、必要に応じて対応策や、代替ツールの利用などの検討をおすすめします。

GitHub Pagesはあくまでも静的なコンテンツを対象にしており、PHP、Pythonなどのサーバサイド言語を使った動的なサイトの生成や、データベースにアクセスして動的にコンテンツを表示するようなことには向いていません。

ただし、JavaScriptを使用してクライアントサイドで動的な要素を実装することは可能です。

GitHub Pagesはオンラインビジネスやeコマース向けの大規模な商用サイトには向いていません。また、パスワードやクレジットカード番号などの機密情報を扱うサイトも同様です。そのため、商用利用は控えた方が良いでしょう。

GitHub Pagesでは独自ドメインの設定は可能ですが、無料プランではサードパーティ製のSSL証明書はアップロードできません。また、月間のトラフィック量などの容量制限があり、DNS設定を自分で行う必要があるといった、一部機能制限や制約がある点は理解しておく必要があります。

その他、利用できるテンプレートが限られており、高度なカスタマイズは一定のスキルが必要です。自作のWebアプリをGitHub Pagesで公開することは可能ですが、制約があるためおすすめはしません。

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

ここではGitHubアカウントの作成とリポジトリの準備の方法について紹介します。このステップが完了すると、次はWebサイトを構築してデプロイすれば、Webサイトの公開が可能になります。

GitHubの使い方は？知っておきたい用語も併せて初心者向けに解説

GitHub Pagesを使うためには、まずGitHubアカウントが必要です。アカウント登録していない方は、以下の手順でアカウントを作成しましょう。

1. GitHub公式サイトへアクセス GitHub の公式サイトにアクセスします。

【参考】：GitHub

2. 「Sign Up」をクリック GitHubアカウントがない場合は、画面右上の「Sign up」ボタンをクリックします。既に登録済の方は、Eメールアドレスを入力して［Sign up for GitHub］ボタンをクリックします。

3. アカウント情報の入力 Sign upをクリックすると、Eメールアドレスを入力する画面に遷移します。ここで、既に登録済みのアドレスを入れると、その旨が通知されます。初めて登録するアドレスの場合は、次に［Continue］をクリックします。

続いて、パスワード・ユーザ名・メール設定を行い、［Continue］をクリックします。

・メールアドレス：有効なメールアドレスを入力 ・パスワード：8文字以上の安全なパスワードを設定 ・ユーザ名：GitHubで使う一意のユーザ名を入力（リポジトリのURLにも使われる） ・メール設定：GitHubからのメール通知を受け取りたい場合はチェックを入れる

4. セキュリティチェック この後、ロボットではないことを証明するためのゲームがあり、それをクリアすると登録したEメールアドレスに届いた8桁のコードを入力します。コードが正しいことが証明されると、GitHubに自動的にログインされます。

5. プランの選択 続いてGitHubのプラン選択画面が表示されますが、無料プランで十分機能しますので、Freeプランを選択します。Teamプランを選択すると月額4$の使用料が発生します。

6. アカウント作成完了 以上の手続きが済むとGitHubのダッシュボード画面が表示され、GitHubを利用できるようになります。

次に、GitHub PagesでWebサイトを公開するためのリポジトリを作成します。リポジトリは、プロジェクトのコードやファイルを管理する場所です。

1. GitHubにログイン アカウント登録が完了したら、リポジトリを作成するためにGitHubにログインします。

2. 新しいリポジトリの作成 ログイン後、画面左の［Create repository］をクリックします。

3. リポジトリ名の設定 ［Create repository］をクリックすると、次の「Create a new repository」画面が表示されますので、必要な情報を入力していきます。

リポジトリ名は仮に「my-web」とします。これにより、GitHub Pagesで「https://Owner名.github.io/my-web」というURLで公開されます。Descriptionは任意ですが、必要があればリポジトリの説明文を入力します。

4. リポジトリの公開設定 リポジトリをPublic（公開）に設定します。Publicにすると誰でもWebサイトにアクセスができます。公開したくない場合はPrivate（非公開）をチェックします。

5. READMEの追加（オプション） 「Initialize this repository with」の「Add a README file」のチェックボックスをオンにしておきましょう。「Add .gitignore」は無視するルールを記載したファイルを作成する場合に選択します。

「Choose a license」は自分のプロジェクトにソフトウェアライセンスを追加する際に利用します。どちらも今回は必要としませんのでそのままにしておきます。

6. リポジトリの作成完了 右下の「Create repository」ボタンをクリックして、リポジトリの作成が完了です。次に作成されたリポジトリの画面が表示されますが、赤枠内が公開されたリポジトリのURLです。このURLをコピーして、共有したい人に伝えます。

リポジトリが作成できましたので、続いて、公開したいサイトのHTMLファイルをリポジトリに追加する手順を紹介します。

新しいリポジトリのページに移動したら、「Add file」→「Upload files」を選択します。

HTMLファイルやCSS、JavaScriptファイルをドラッグ＆ドロップ、もしくはファイルを選択してアップロードします。

index.htmlファイルを必ず含めましょう。これはWebサイトのホームページとなります。ここでは次のHTMLファイルを利用しました。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> Hello、 World! </body> </html>

アップロードが完了したら、下部の「Commit changes」ボタンをクリックします。

GitHubのファイルダウンロード方法は？用語と手順を解説

GitHub PagesはGitHubのリポジトリを使って静的Webサイトを簡単に公開できる機能なので、ここでは、作成したリポジトリを使ってGitHub Pagesを設定し、サイトを公開する手順を解説します。

1. リポジトリの「Settings」にアクセス リポジトリの画面で、ページの上部メニューから「Settings（設定）」タブをクリックします。

2. GitHub Pagesの設定を有効化 設定画面の左メニューから「Pages」を選択し、Source欄で公開するブランチを選択します。「Deploy from a branch」を選択し、Branchで「main」を選び、設定が済んだら「Save」ボタンをクリックします。

3. サイトのURL確認 設定が完了すると、数分でGitHub Pagesから提供されるURLが表示されます。このURLにアクセスすることで、作成したWebサイトが公開されていることを確認できます。

GitHub Pagesを活用してWebサイトを公開しよう

ここまで、GitHub Pagesの概要、メリットや使い方について解説してきました。GitHub PagesはGitHub上のリポジトリを使って、静的なWebサイトを無料でホスティングできるサービスです。

個人的なWebサイトの公開以外にも、ポートフォリオやプロジェクトにおけるドキュメントの公開など、様々な用途があります。GitHub Pagesに興味を持った方は、ぜひ利用してそのメリットを実感しましょう。

その他のGitHub関連記事

その他、GitHubに関連する内容は、下記の記事でもご紹介しています。ぜひ参考にご覧ください。

GitHub Desktopの使い方とは？初心者にも分かりやすく手順を解説！

GitHubの料金プランが変更され高騰？有料と無料の機能の違いも解説

GitHubとGitLabの違いや特徴をわかりやすく解説！プラン、料金はいくら？

GitHubでリポジトリのPushができない原因と対処法を解説