見出し画像

【初心者向け】GitHub Pageにhtmlをアップして公開する手順だけを解説!

AIを使える形に整える@オトーワン

こんにちは！オトーワンですっ！
最近、ブラウザで動くWebツールを作る機会が増えているんですが、毎回悩んでたのが「どこにアップロードするか」問題。作ったはいいものの、人に見せたり、サーバにアップしないと動かないものがあったりと、どこかのサーバーに置かないといけないわけで...。

レンタルサーバーを借りるほどでもないし、無料のホスティングサービスは広告が出たり制限が多かったりしてウザし。「何かいい方法ないかな」と思っていた時に、改めて「GitHub Pagesってどうなんだろ？」って調べたんです。

実は以前からGitHub自体の存在は知っていたんですが、なんとなく「GitHub=エンジニアがコードを管理して作業する場所」みたいな認識で、オトーワンには縁遠いものだと思い込んでいたんです。
でも、よくよく考えてみると、エンジニアが日常的に使っているということは、セキュリティもしっかりしているはずだし、サービスが突然終了する心配も少ないんじゃないかと…

調べてみると、GitHub Pagesは無料でHTMLファイルをホスティングできるということが分かって、これは使わない手はないな、と思って実際に試してみることにしました。

GitHub Pagesって何？

GitHub Pagesは、GitHubが提供する静的Webサイトのホスティングサービスのことで、GitHubのリポジトリ（フォルダみたいなもの）からHTML、CSS、JavaScriptなどのファイルを取り込み、それらをWebサイトとして公開することができるサービスです。

GitHub Pagesの特徴

実際に使ってみて感じたGitHub Pagesの特徴と魅力は以下の通りです。

  • 無料で使えちゃう（.github.ioドメイン）

  • HTMLファイルをアップロードするだけの簡単操作

  • エンジニアが使っているだけあって、安定性が高い（と思うのだが…）

  • 自動でHTTPS対応（これが地味にありがたい）

この記事では、GitHubアカウントの作成からサイト公開まで、オトーワンが実際にやった手順を画像付きで解説していきます。
それでは解説、いってみましょ～

事前準備

必要なもの

  • インターネット環境＆公開したいHTMLファイル

  • メールアドレス（GitHubアカウント作成用）

注意事項

  • Publicリポジトリは誰でも閲覧可能です

  • 個人情報や機密データは含めないよう注意してください

  • 無料版は月間100GBの帯域制限があります（普通の使い方なら全然余裕です）

STEP1：GitHubアカウントを作成

1-1. GitHubにアクセス

GitHub.com にアクセスし、「Sign up」をクリックします。

画面右上の「sign UP」をクリック

1-2. アカウント情報を入力

以下の情報を順番に入力していきます：

  • ユーザー名：英数字とハイフン（-）のみ使用可能

  • メールアドレス：確認メールが送信されます

  • パスワード：8文字以上推奨

Your Country/Regionは"Japan"ですね

ユーザー名は後でURL（ユーザー名.github.io）の一部になるため、覚えやすい名前を選ぶとよいでしょう。最初、これを知らずに適当に決めてしまって、後から「もう少し考えればよかった」と思いました（笑）。

1-3. 認証手続き

「質問に回答して あなたがロボットではな いことを証明してください。」の画像認証やメール登録したメール宛に送られる「Confirm your email address」の番号を入力してメール認証を完了させてアカウント作成を完了します。

メール認証が終わると、あらためてこの画面にユーザーネームorメルアドとパスワードを入力

STEP2：リポジトリを作成

リポジトリって何？

GitHubでは、ファイルを保存する場所を「リポジトリ」と呼びます。今回はHTMLファイルを保存するためのリポジトリを作成します。

「リポジトリ」って聞くと難しそうですが、今回のケースでは「フォルダ」だと思ってもらえれば大丈夫です。

2-1. 新規リポジトリ作成

ログイン後、右上の「+」ボタンから「New repository」を選択します。

ログイン後の画面、右上に「+」があります
「New repository」を選択

2-2. リポジトリの設定

  • Repository name：任意の名前（例：my-website）

  • Description：サイトの説明（任意）

  • Public を選択（無料でGitHub Pagesを使用するため）

  • Add a README file を"On"にする

そして右下の「Create repository」をクリックして作成完了です。

STEP3：HTMLファイルをアップロード

3-1. ファイルアップロード

リポジトリページで「Add file」→「Upload files」を選択します。

画面右上（緑ボタンの左）の「Add file」の選択肢から「Upload files」を選択します

3-2. ファイルの準備

公開したいHTMLファイルを準備します。トップページとして表示したいファイルは「index.html」名前で保存することをオススメします。

※テストで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 Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #ccc;
            padding-bottom: 10px;
        }
        .section {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    
    <div class="section">
        <h2>About</h2>
        <p>こちらにサイトの説明を記載してください。</p>
    </div>

    <div class="section">
        <h2>Contact</h2>
        <p>連絡先情報があれば記載してください。</p>
    </div>
</body>
</html>

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

「choose your files」をクリックしてファイルを選択するか、画面にドラッグ&ドロップします。
ドラッグ&ドロップで簡単にアップロードできるので、想像していたより楽でした。

3-4. 変更をコミット

ドラッグ&ドロップ箇所の下に、アップしたhtmlファイル名が表示（今回は"index.html"）されたあと、コミットメッセージを入力。

Commit changesボタン上の2つのラジオボタンは、個人で開発するなら、このままでOK

  • コミットメッセージを入力（例：「Add index.html」）
    上の欄には「何をしたか」を一言で書き、下の欄には、必要に応じてもう少し詳しい説明を加えます（こちらは省略しても構いません）。たとえば、htmlファイルをアップロードした場合は「htmlファイル」などと書いておくと、後から見返したときにも分かりやすくなります。

  • 左下の「Commit changes」をクリック

STEP4：GitHub Pages設定

4-1. Settings画面を開く

リポジトリページの「Settings」タブをクリックします。

メニューの一番右に「Settings」があります

4-2. Pages設定

左側メニューの「Pages」を選択します。

左メニューの「Pages」を選択

4-3. 公開設定

  • Source：「Deploy from a branch」を選択

  • Branch：「main」を選択

  • 「Save」をクリック

「Build and deployment」のところで設定します

設定が完了すると、左上の水色の背景ラインに「GitHub Pages source saved.」というメッセージが表示されます。

STEP5：サイトの確認

5-1. 公開待機

設定完了後、実際にサイトが公開されるまで数分かかる場合があります。

僕が初めて試した時は、すぐに表示されなくて「あれ？設定間違えたかな？」と思いましたが、5分ほど待ったら無事に表示されました。少し待つのがコツですね。オトーワンの場合、1～2分で大丈夫でした。

5-2. アクセス確認

表示されたURLにアクセスして、サイトが正常に表示されることを確認します。

今回、GitHubにアップしたのは、引っ越しに役立つシミュレーターのブラウザツールでした

公開したサイトを非表示にしたい場合

公開した、webサイトを一時的にでも非表示にした場合は、左側メニューの「Pages」を選択します。
右側の「Branch」のプルダウンを”main”から"Note"に変更してSaveをクリックすると、非表示になります。

公開した後にhtmlなどの更新をしたい場合

公開した後にhtmlなどファイルを更新をしたい場合は、以下の記事にやり方を解説していますので、ご覧ください。

実際にハマったポイント

最初の思い込み

正直に言うと、GitHub Pagesを使うまでに時間がかかった一番の理由は「難しそう」という思い込みでした。GitHubって聞くと、なんとなくプログラマーの専用ツールというイメージがあって、「自分には関係ない」と思っていたんです。

でも実際にやってみると、HTMLファイルをアップロードするだけ。拍子抜けするほど簡単でした。

「もっと早く調べればよかった」問題

これまで、Webツールを作っても「どこにアップロードしよう」と悩んで、結局そのまま放置してしまうことが何度もありました。もっと早くGitHub Pagesについて真剣に調べていれば、もっとたくさんのツールを公開できていたのに...と少し後悔しています。

やっぱり、「難しそう」で片付けずに、一度調べて試してみることって大事ですね。

トラブルシューティング

サイトが表示されない場合

  • 設定から5分程度待ってから再度アクセス

  • URLが正しいか確認（https://ユーザー名.github.io/リポジトリ名/）

  • ファイル名の確認

404エラーが出る場合

  • ファイル名のスペルミスがないか確認

  • 大文字・小文字の違いがないか確認

  • リポジトリの設定でmainブランチが選択されているか確認

更新が反映されない場合

  • キャッシュをクリア（Ctrl+F5またはShift+F5）

  • 少し時間を置いてから再度確認

  • リポジトリの「Actions」タブでエラーがないか確認

※また、詳しくは以下の、公式にも色々載ってるのでご参照ください。

ファイルの更新と制限事項

ファイルの更新

サイトを更新したい場合は、同じ手順でファイルをアップロードし直すことで内容を更新できます。

制限事項の確認

  • リポジトリサイズ：1GB以下推奨

  • 月間帯域：100GB

  • 1時間あたりのビルド回数：10回

まとめ

GitHub Pagesを使うことで、無料でHTMLサイトを公開できます。オトーワンみたいに「エンジニアツール」という固定観念で敬遠していた方も、一度試してみると意外にシンプルで使いやすいことが分かると思います。
ただし、データベースを使用する動的なサイトには他のホスティングサービスを検討する必要がありますね。

でも、静的なHTMLサイトやWebツールを公開するには十分すぎるほどの機能が揃っているので、特に、AIにプログラムを書いてもらって、それをサクッと公開したい時なんかには本当に重宝すると思います。

ちなみに、GitHub Pagesで公開する方法に慣れてきたら、次のステップとしてVercelを使う方法もあります。GitHubとVercelを連携しておくと、HTMLやWebツールを更新しながら公開・管理しやすくなります。

▼Vercelのアカウント作成とGitHub連携の手順は、以下の記事で解説しています。

なお、今回のようにAIで作ったHTMLやWebツールを公開するときは、手順だけでなく「公開してよい内容か」「APIキーや個人情報が入っていないか」も確認しておくと安心です。

作ったWebツールやHTMLファイルをパソコンの中で眠らせている方がいたら、ぜひ一度試してみてください。
では、今日はこんなところで！またお会いしましょ～

いいなと思ったら応援しよう！