はじめに
GitHub Pagesを利用してHTMLCSSで作成したWebページを公開したので、備忘録も兼ねてやり方をまとめてみたいと思います。
例（https://nagmo01.github.io/resume/）
GitHub Pagesとは
GitHub PagesとはGitHubが提供しているサービスとなっており、内容としては静的なウェブページを無料で公開することができます。
web制作の学習を始めるとまず最初にHTMLCSSを学習すると思いますが、いざ作ったHTMLファイルを一般に公開するのは既存のブログサービスなどを利用するのに比べると サーバーを建てたりしないといけないためハードルが高いと思います。
そのようなときに今回紹介するGitHub Pagesを利用すれば作成したWebページを比較的簡単にインターネット上に公開することができます。
手順
GitHubの登録は完了している前提で進めます。
GitHubで新規リポジトリを作成する
まず最初にGitHubにログインして、画像の部分から新規でリポジトリを作成します。
続いて、下記の画像のような画面に映りますので囲われている部分にリポジトリ名（ローマ字が良い）を設定してください。 他はいじらずにそのままCreate repositoryで大丈夫です。（もし何か変更する場合も公開設定はpublicにしておいてください。）
そうすると下記のようなページに移行するかと思います。赤枠で囲ってある部分をあとで使いますが、そのままで一旦GitHubから離れます。
公開するHTMLファイルなどが入ったディレクトリを用意する
下記のような形でindex.htmlやそれを装飾するCSS,img画像が入ったフォルダを作ります。(resumeの部分は各々好きな名前で良い)
macの場合はFinder内のサイドバーにユーザー名のディレクトリが表示されていない場合、Finderの設定から表示するようにできます。
上記の手順でユーザー名のディレクトリの中に公開したいウェブサイトを配置できたら、 ターミナル（widowsだとコマンドプロンプト）を起動します。
上のこんな画面になっているかと思います。macbookproみたいな部分は自身のPCの名前でその隣の ~ という部分がターミナル上で今操作しているディレクトリ（フォルダ）を表しています。めちゃくちゃわかりにくいのですが、この〜が先ほど設定で見れるようにして、HTMLファイルなどを配置したUsersディレクトリの下のユーザー名のディレクトリ（ホームディレクトリ）のことを表しています。
resumeフォルダはホームディレクトリ内に配置したので操作対象をホームディレクトリからresumeディレクトリに移動します。
手順は下記の画像の通りです。
Linuxコマンドがわからない場合は下記などを見るといいかと思います。 【初心者向け】 基本のLinuxコマンド一覧！操作別に…｜Udemy メディア
①lsコマンドで現在操作しているディレクトリの中身を一覧表示できます。
②操作中のディレクトリの中にresumeがあとことを確認できました。
③cdコマンドで指定したディレクトリに移動できます。ここではresumeに移動したいのでcd resumeと打ちます。
先ほどまで ~ で表示されていた部分がresumeに変わりました。これでresumeディレクトリが操作対象になっています。
次はGitが使えるようにします。
Gitを使えるようにする
先ほどのターミナルに続けて、下記の画像のように順番に入力していってください。(resumeからtestに変わっているのはこっちの問題なので気にしないでください！)
GitHubにアップロードする
ここから少し前にGitHub上にリポジトリを作成した時にそのままにしていたページを表示してください。
赤枠で囲われている部分の３行を１行ずつ先ほどのターミナルに入力してください。
全部入力し終えたらGitHubのページを更新してみてください。
そうすると先ほどの画面と違う画面になります。 そこにアップロードしたファイルが表示されているかと思います。
次はGitHub Pagesを利用してアップロードしたファイルを公開していきます。
GitHub Pagesを設定する
さきほどのGitHubのページのまま、下記の画像の順序で
- 「Settings」押して
- 「Pages」押して
- 「Branch」を「main」
- 「Save」をします
このような表示が出ましたら完了です。（場合によって少し時間がかかるようです）
visit siteを押すと実際のウェブサイトにアクセスできます。
