GitHubでウェブサイトを公開する方法（初心者ガイド）

なぜGitHubでウェブサイトを公開したいのか？

簡単で無料だからです。始める前に、いくつかのメリットとデメリットを見て、自分のニーズに合っているか確認しましょう。

メリット

ドメイン名の管理を任せられ、ストレージや大量アクセスで課金される心配もありません。必要なのは無料のGitHubアカウントだけです。

デメリット

GitHub Pagesでは動的なサイトをホストできず、静的サイトのみとなります。つまり、express.jsやflaskのように受信トラフィックを処理するサーバーをホストすることはできず、ホストできるのは静的なサイトだけです。ただし、動的な静的サイトにすることは可能です。スクリプトを実行することはできますが、そのスクリプトはあらかじめ読み込まれている必要があります。

もう一つのデメリットは、無料アカウントでGitHub Pagesを運用する場合、GitHubリポジトリ（ウェブサイトのファイルやディレクトリ）が公開されることです。つまり、誰でもあなたのファイルを見てアクセスできます。そのため、ウェブサイトのフォルダには機密情報を含めないほうがよいでしょう。

とはいえ、コードを公開しても構わないシンプルなウェブサイトをホストするには、やはり便利です。たとえば個人の履歴書、シンプルな企業サイト、簡単なブログなどです。あるいは、自作の動的な静的ウェブアプリをテストしたいだけの場合にも向いています。

前提条件

インターネットに接続されたコンピューター。
基本的なコンピューターリテラシー。
無料のGitHubアカウント。

無料のGitHub Pagesを作成する手順

GitHubアカウントを作成します。
ログインしたら、新しいリポジトリを作成します。必ず「Public」を選択してください。
空のリポジトリを作成したら、「create new file」をタップします。
下記のサンプルコードをコピーして貼り付け、index.htmlという名前を付けてこのファイルを作成します。
このようになっているはずです。「Commit changes」をクリックします。
Settingsタブ > サイドのPages > Branchesへ進み、mainを選択して保存をクリックします。
リポジトリに戻り、数分待ちます。
ページを更新すると、GitHubページが正常に公開されたことがわかります。
お見事です！これでこのリンクからGitHub Pagesにアクセスできるようになりました！

サンプルコード：

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
    <title>My Website</title>
8
    <link rel="stylesheet" href="./style.css">
9
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
10
  </head>
11
  <body>
12
    <main>
13
        <h1>Welcome to My Website</h1>
14
    </main>
15
    <script src="index.js"></script>
2 collapsed lines
16
  </body>
17
</html>

次はどうする？

初心者の方には、freeCodeCamp.orgの無料コースを受講することを強くおすすめします。ウェブ開発を始めるために必要なことのほとんどをカバーしてくれます。

GitHub Pagesは簡単にセットアップできますが、いくつかの制限があり、ウェブ開発を進めていくうちにできることが制限されるかもしれません。本格的に取り組むなら、React、Next、Flask、Express.jsなど、さまざまな開発技術を知ることが重要です。その点では、GitHub Pagesでは不十分です。Netlify、Digital Ocean、そして最終的にはDockerインスタンスを備えたセルフホストのVPSなど、ウェブサイトのあらゆる部分を自分でホストできる別の方法を見つける必要があります。

Cloudflare vs GitHub Pages

GitHub Pagesはセットアップが簡単で初心者にも向いていますが、最近はCloudflare Pagesを使うことが多いです。無料でトラフィックも無制限なうえ、Cloudflare経由でドメインを購入していればカスタムドメインの設定も行ってくれます。さらに、リポジトリを非公開にすることもできます。つまり、GitHub Pagesのほぼ上位版と言えます。こちらもチェックしてみるとよいでしょう。

このガイドがわかりにくい場合は、GitHubの公式ガイド（こちら）に従ってください。