tags: GitHub

GitHub Pagesの準備

前提

• 「事前準備」資料を終えている
• GitHubアカウントを作成済み
• PCにGit Bashを導入済み
• cmdとPowerShellでgitコマンドを使えるようにパスを通す(Winのみ)

注意

この資料作成日時は2022/09/07です．
GitHub Pagesのアップデートなどにより，本資料と実際のGitHub PagesなどのUIが資料の閲覧時期によって異なってしまう場合があります．
その点はうまく読み替えていただければ幸いです．

もくじ

1. リポジトリを作成しよう
2. GitHub Pagesを設定しよう
3. ブラウザで確認しよう
4. リポジトリをクローンしよう
5. index.htmlファイルを作成しよう
6. リポジトリの変更をプッシュ
7. 再度ブラウザで確認しよう
8. まとめ

リポジトリを作成しよう

自分の GitHubアカウント にログインします．
ヘッダーの右上に+アイコンがあり，そこから New repository を選択します．

リポジトリ名はGitHubアカウント名.github.io にします．
これは特別なリポジトリ名で，GitHub Pagesで使用するために用います．
筆者の場合なら，yosse95ai.github.io になります．

Descriptionは書いても書かなくてもいいです．

Public にチェックを入れ，公開設定にします．
これを Private にしてしまうと，外部からホームページが見えなくなってしまいます．逆に見せたくなくなった時は，あとで Private に設定することもできます．

Add a READM fileにチェックを入れます．
リポジトリ内にindex.htmlもしくはindex.mdが存在しない場合，WebページとしてこのREADME.mdが表示されます．

設定を終えたら，Create repositoryをクリックします．

これで，リポジトリの作成は完了です．
こんな感じのページにジャンプすると思います．

GitHub Pagesを設定しよう

作成したリポジトリ の Settings タブを開き，左のリストから Pages 選択します．
Source を Deploy from a branch にし，Branch を main もしくはmaster のroot の状態で save をクリックします．
おそらく上記の設定がデフォルトの設定になっていると思います．

ブラウザで確認しよう

以下の画像のようにメッセージボックスに Visit site が表示されれば，Webブラウザで表示できる準備が完了しています！

なかなか表示されない人は，何度かブラウザをリロードしてみてください．
表示されたら，記されているURLにアクセスしてみましょう！

今はまだ，index.html も index.md も作成していないので，デフォルトで生成されるREADME.mdの内容が表示されるかと思います．
将来的に，リポジトリのルートパスに index.html を追加して，自分のホームページを完成させていきます．

ここまでで，世界へ自分のホームページを公開する準備が整いました！
というかもう誰でも見れます！
内容は後々作りこんできましょう！

リポジトリをクローンしよう

クローンについて

ファイルの編集は，GitHub上でも一応できるのですが，開発効率が悪いので，GitHub上に生成したリポジトリを手元のPCにコピーしましょう！
この操作のことをGitの用語でクローンといいます．

クローンしてみる

作成したリポジトリ の Code タブを選択し，緑色の Code ボタンをクリックします．
HTTPSを選択すると，URLが表示されるので，コピーボタンをクリックしてURLをコピーします．
(リポジトリの様子が違いますが，きっと気のせいです :smile:)

次にVSCodeを起動し，ターミナルを展開します．

まずは好きなディレクトリに適当に移動してください．
私は，C:\User\user\workspaceというディレクトリでよく作業をするので，そこに，HTML・CSS講座というディレクトリを新たに作成して，cd コマンドで移動しました．

そして，以下のコマンドのURLを先ほどコピーしたものに置き換え，実行します．

git clone 自分のURL

# 私の場合
git clone https://github.com/yosse95ai/yosse95ai.github.io.git

すると，現在のディレクトリに，リポジトリ名と同じ名前のフォルダが追加されます．
VSCodeの左側で確認してみましょう．

gitコマンドが使えない人は以下のまとめから，パスを正しく通してください！(Windowsのみ)
https://hackmd.io/@kit-web-team/gitbash

GitBashを入れている前提なので，GitBashをそもそも入れていない人は，お渡しした「事前準備」資料を参考にインストールしてください．

index.htmlファイルを作成しよう

ディレクトリを移動

クローンしたフォルダに移動し，VSCodeを開きなおします．以下のコマンドを使えばいいです．

cd リポジトリの名前
code .

# もしくはディレクトリを指定
# Windowsの場合(バックスラッシュを使用)
code .\リポジトリの名前

# Mac, Linux の場合(スラッシュを使用)
code ./リポジトリの名前

※ codeコマンドは指定したファイル・ディレクトリを，VSCodeで開くコマンドです．
※ 初めて使う場合にインストールを求められる場合がありますが，yesを選択してインストールしてください．便利ですよ！

そしたら，クローンしたリポジトリで，新たにVSCodeのウィンドウが開くと思います．

index.htmlファイルを作成

VSCodeでファイルを新規作成する方法はいくつかありますが，今回は右クリックを用いる方法を使います．

画像の黄色枠内で 右クリック し，「新たなファイル」をクリックします．

名前は先ほども何度も出てきている index.html にしてください．

これは特別な名前のHTMLファイルで，GitHub PagesのURLに対してアクセスが来ると，ブラウザ側でこのファイルを探して表示するような仕組みになっています．
つまりホーム画面みたいな役割をこのページがこなします．

本当はもうちょっとややこしい話ですが，とりあえず
「このファイルが一番最初に表示される，ホームページの顔なんだ」
とざっくりとらえてもらえればいいと思います．

index.html を編集

適当に以下のようなテキストを打ち込んでみましょう！
{あなたの名前}は好きなように置き換えてください．

<p>{あなたの名前}のホームページへようこそ！</p>

ファイルの編集が済んだら変更を保存します．
「Ctrl」+「S」を同時押しすればショートカットで保存できます．

index.htmlをブラウザで表示

index.htmlの上で右クリックを押し，「エクスプローラーで幼児する」をクリックします．
(Mac，Linuxの方は別の表記かもしれません．)

するとエクスプローラが開くので，index.htmlを右クリックし，「プログラムから開く」にカーソルを合わせ，任意のブラウザを選択します．
今回私はChromeを選択しました．

すると，ブラウザが開き，index.htmlの内容がブラウザで表示されます．
真っ白な中に，入力した文字だけがあれば成功です．

さらに少しだけ編集しましょう．
先ほどの文章のうち，「ホームページへようこそ！」の部分を「ホームページです。」に書き換えます．

ブラウザに戻り，リロードしてください．
すると，変更が反映されていると思います．

変更の保存を検知して，自動でブラウザをリロードする拡張機能などもありますが，最低限この方法で開発を行っていくことができます！
興味のある方は，後でこの記事を読むといいかもです！
https://qiita.com/ninomiya0530/items/8391d89c208d94fe8842

本講座では，編集＞保存＞ブラウザをリロードして確認 を繰り返して開発していきます．

リポジトリの変更をプッシュ

ここまで，ローカルの環境で編集を行ってきました．なので，先ほどGitHubで作成したリモート(GitHub上)のリポジトリには変更が適用されていません．
ためしに，先ほどのブラウザで確認しようの節で確認した，世界に向けて公開されているホームページを見てみてください．
何も更新されていないと思います．

なので，ローカルでの作業をリモート(GitHub上)に反映させます．
この操作のことをGitの用語で，変更をプッシュするといいます．

以下のコマンドを上から実行します．
(#は説明のコメントアウトなので気にしないで)

# 変更をステージング
git add .
# ステージング済みの変更をコミット
git commit -m "index.htmlを追加"
# コミットをリモートへプッシュ
git push origin main

注意とお願い

「事前準備」資料でも述べた通り，gitコマンドの意味などは詳しく説明すると時間がかかりすぎてしまうので，この講座では省略させてもらいますが，1点だけお願いがあります．

git commit -m "index.htmlを追加"コマンドの""の中にコミットコメントを自由に書けます．

コミットコメントは，
「今回の変更(コミット)がどういうものなのかを示す」
ためのコメントです．

このコミットコメントだけは適切に書いていただきたいです．
いろいろな流儀があるのですが，今回の講座では，以下を意識していただきたいです．

• 端的で「今回の変更内容が分かる」文章を書く

これだけでいいです．

例えば，

• git commit -m "imgフォルダに画像を追加"
• git commit -m "index.htmlにヘッダーを追加"
• git commit -m "about.cssファイルを新規作成"

この程度でよいです！
いろんな流儀に則るのは，もう少しGit・GitHubに親しんでからでも全然遅くないです．(最初から流儀に則れ派もいるけど…)

コマンド自体を今完璧に覚える必要はなく，忘れたらこの記事を見に来てください！
もしくはWeb上には様々な参考記事が転がっているので，忘れたらその都度調べましょう！

再度ブラウザで確認しよう

ローカルのPCからプッシュ操作が行われると，変更がリモート(GitHub上)のリポジトリに適用されます．

GitHub Pagesの場合，リモートリポジトリの変更が行われると即座に，GitHub Pagesの更新が行われます．

Codeタブの右側のEnvironments が github-pages Active になっていればWebページの更新が完了しているはずです.

Inactive になっている，もしくは Settings タブで以下のようにメッセージボックスに Visit site がない場合，まだGitHub Pages のページの更新が進行中です．
何度かリロードして，メッセージボックスに Visit site が出現するのを待ちます．

更新環境が確認出来たら，メッセージボックスから自分のWebページにアクセスしてみましょう！

どうですか？
先ほどはREADME.mdの内容だったこのページが，index.htmlの内容に置き換わっているかと思います！

スマホでも確認できるので，スマホで同じURLを入力してみてください！
見れたでしょうか？

もし更新されない人がいたら

Codeタブを確認してみてください．
index.htmlがリポジトリに追加されていますか？
追加されてい無ければ，ローカル環境のディレクトリ構成をこの記事のディレクトリ構成と見比べてみてください．

追加されているのにWebページが更新されていない人．
おそらくブラウザのキャッシュが残っているせいです．
ブラウザのキャッシュを削除するか，別のブラウザ(例えばEdgeやスマホ)からアクセスしてみてください．

まとめ

ここまでで確認したことは以下の通りです．

• GitHubのリポジトリの作成方法
• GitHub Pagesの設定方法
• GitHub Pagesでホスティングされたページの閲覧
  • 世界に向けてホームページが公開されました！
• リポジトリのクローンコマンド
• ローカルでのHTMLファイルの編集・保存・確認方法
• ローカルの作業をリモートにプッシュするコマンド
  • 公開していたホームページの内容を更新しました！

次は HTML と CSS のお勉強です！

この二つが終われば，今回作成したリポジトリをさらに改良して，素敵なホームページの作成に取り掛かっていきます！
その時また，プッシュ操作を行うので，頭の片隅に置いておいてください！

お疲れさまでした！