こんにちは！
深夜のスマホいじりをやめたら、一気に時事ネタに疎くなったみんみんです！
本日はGitHub PagesでWebサイトを公開する方法を書いていきます！
GitHub Pagesって？
GitHub Pagesとは、GitHub（Gitを使って、オンライン上でソースコードや変更履歴を共有できるプラットフォーム）上のソースコードを使って簡単にWebサイトを公開できるサービスです。
動的ページはできませんが、静的ページであれば少々の設定でできてしまいます。
主な手順としては以下の通りです。
作業する場所がコロコロ変わるので注意してくださいね！
- 【自分のPC】公開するソースコードを用意
- 【GitHub】新規リポジトリを作成
- 【ターミナル】Gitの追跡対象に設定
- 【ターミナル】ソースコードをGitにプッシュ
- 【GitHub】GitHub PagesにてWebサイトを公開
では、下から順番に見ていきましょう！
〜本日の無駄話〜
全然関係ないんですけど、GitHubのロゴにいる猫みたいなキャラクターは「Octocat（オクトキャット）」という名前だそうです。
【自分のPC】公開するソースコードを用意
まずは自分のPCで公開するソースコードを準備します。
お好きなテキストエディタでコードを作って保存しておきましょう。
【GitHub】新規リポジトリを作成
リポジトリとは、コードや履歴を保管しておく倉庫みたいな場所です。
GitHubのヘッダーにある「+」をクリックし、「New repository」を選びます。
次に、「Repository name」へディレクトリ名を入力します。
GitHub Pagesを利用するときは、必ず「Public」を選びましょう。
他の設定はしなくて良いので、右下の「Create repository」をクリックします。
このあと以下のようなコマンドが書かれたページが出てくるので、一旦そのままにして次の工程に進みましょう。
【ターミナル】Gitを使えるようにする
続いて、フォルダをGitHubにアップするためにGitを使えるようにしましょう。
自分のPCにてターミナルを開きます。
公開するソースコードを保存しているフォルダへ移動しましょう。
cd フォルダ名
フォルダに移動できたかどうか確認したら、以下のコードを1つずつ実行します。
git init
git add .
git commit -m '（コミットした理由などを書きます）'
【ターミナル】ソースコードをGitにプッシュ
先ほどGitHubで作ったリポジトリをGitにプッシュしましょう。
GitHubの画面に戻り、以下のコマンドを1つずつ実行します。
git remote add origin https://github.com/自分のGitHubアカウント名/リポジトリ名.git
git branch -M main
git push -u origin main
すると、GitHubの画面が変わり、ソースコードのフォルダやファイルの一覧が出てくるのを確認しましょう。
【GitHub】GitHub PagesにてWebサイトを公開
いよいよGitHub PagesにてWebサイトを公開します。
ヘッダーにある「Setting」をクリックしましょう。
次に、左サイドのメニューにある「Pages」を選びます。
Branchは最初「None」となっているので、プルダウンで「main」を選んで「save」をクリックしましょう。
あとは数秒ほど待って（数分かかることもたまにあります）、ページを更新してみましょう。
先ほどいじった「Branch」より上にある「GitHub Pages」に、WebサイトのURLが記載されていれば成功です。
URLは「https://github.com/自分のGitHubアカウント名/リポジトリ名」という形式になります。
さっそくURLをクリックして、サイトが公開されているか確認してみてください。
うまく表示されていれば公開完了です！
※表示されない場合は…
「え？公開されないんだけど…」という場合は、以下を参考にしてみてください。
よく起こりがちなケースは以下2つです（私は両方体験しています）。
404ページが出る
こちらは主に以下のような原因が考えられます。
- URLのフォルダ名が間違っている
- index.htmlがリポジトリ内のフォルダに入っている
もしindex.htmlがリポジトリ直下ではなく、何かしらのフォルダ内に入っている場合は、URLを「https://github.com/自分のGitHubアカウント名/リポジトリ名/フォルダ名」に直して表示してみましょう。
README.mdの内容が出る
謎にフォルダ名の太字だけがでかでかと出た場合は、README.mdの中身を確認してみてください。
実はREADME.md単体がGitHubの一覧に出ていると、index.htmlを無視して表示されてしまいます。これはGitHubの仕様みたいです。
そんなときは、隠しフォルダを作って隠してしまいましょう。
隠しフォルダを作るには、ターミナルで以下のコマンドを実行します。
（※ソースコードを保管しているフォルダにいない場合は、まず「cd フォルダ名」で移動してから実行してください）
mkdir .github（「.」を必ず入れましょう！）
git mv README.md .github
最後に以下のコマンドを実行して、.githubフォルダ内にREADME.mdが移動していることを確認しましょう。
cd .github
ls
そして、もう一度サイトURLを更新して内容を確認します。
反映されるまで数分かかる場合もあるので、気長に待ちましょう！
