はじめに

今回、作成したWebサイトをGitHub Pagesで公開したので
そのやり方をまとめてみました。
３ステップで簡単にでき、また、後半に自分が躓いた体験をもとに引っかかるポイントも解説したので、ぜひこの記事を参考にしてみてください！

GitHub Pagesとは

GitHubから提供されている静的サイト¹のホスティングサービス²のこと
WordPressのような動的サイト（ユーザーの操作でページ内容が変化する）の公開はできません
GitHub無料版ではprivateリポジトリで公開できない(⇨今回は無料でできるpublicリポジトリで解説します)

プログラミング学習を始めたてで、模写コーディングなどHTML・CSSを使ってWebサイトを作ってみた方が、まず最初に公開する先として有用です！

公開に向けて準備するもの

GitHub Pagesを作成するにあたって、以下の準備が必要です。

GitHubアカウント
HTMLファイル
CSSファイル
画像ファイル(必要であれば)

また、今回はGitやLinuxコマンドに関しては一定の知識がある前提で進めます。

公開手順3ステップ

1. Webサイトを作成する

HTML・CSS(・JavaScript)を使って静的サイトを作成
※こちらは今回はスコープ外となるため、割愛します。

2. 作成したWebサイトをGitHubへアップする

1. GitHubへログイン後、新規リポジトリを作成

2.　レポジトリ設定ページ

①　Repojitory nameを指定(ローマ字でお好みの名前で！)
②　必ずpublicにチェックが入れる
③　Create repositoryを押下

3. 必要ファイルをGitHubへアップする

以下のコマンドから手元のディレクトリとファイルをアップする

git init
git add <ファイル名>
git commit -m <コミットメッセージ>
git remote add origin <path>
git push origin main

3. GitHub上でGitHub Pagesの設定をし公開する

GitHubへのアップロードができたら、
① Settingsを押下
② Pagesを押下
③ mainブランチ(説明画像はreplaceブランチで公開後、mainブランチにマージする予定なので、replaceブランチを指定している)
④　Saveを押下
⑤　URLあるいはVisit siteより作成したGitHub Pagesへ飛べる

URL発行に10分程度時間がかかる場合があります。

期待するページが出ない場合は？

僕にも画像のように期待するページが出ず、ずっと悩んでいた時期がありました。

そんな方々に向けた解決策としては、
表示させたいファイルが入った親ディレクトリのパスまでURLに入力することです！！
具体的に僕の例ですと、表示させたいファイルが下記のように、

/Users/tomopu/Desktop/hc/resume/resume/

にあるので、直前の親ディレクトリまでを指定すると、

まとめ

GitHubから提供されている静的サイトのホスティングサービスのこと
動的サイトの公開はできない
公開手順は3ステップ
- Webサイトを作成する
- 作成したWebサイトをGitHubへアップする
- GitHub上でGitHub Pagesの設定をし公開する

静的サイト：　動的なコンテンツ生成やデータベースとのインタラクションがない、プレーンなHTML、CSS、JavaScriptファイルのみで構成されるウェブサイトのこと（JavaScriptを使ったアニメーション含むサイトも公開可能） ↩
ホスティングサービス：　インターネット上でウェブサイトやアプリケーションのデータやファイルを保存・公開するためのサーバーを提供するサービスのこと ↩