はじめに

GitHub（GitHub Pages）にて、静的ページ（今回は、.html, .cssを自作したポートフォリオ）を公開する手順になります。
本稿では、GitHubアカウントを取得している前提で、自作の.html, .cssを公開してゆきます。

私自身＆想定読者として、初心者で、シングルページ（.htmlが一枚だけ）のサイトを公開する流れとしております。

1. リポジトリ作成画面にアクセス

まずは、GitHubのアカウントにログインし、Dashboardを表示します。

▶GitHub

次に、右上の＋のアイコンから、【New repository】をクリックします。

2. リポジトリを作成

リポジトリの名前を入力します。
こちらで決めたリポジトリの名前が、URLに反映されます。

リポジトリの名前を入力したら、【Create repository】をクリックします。
（特に他の箇所は変更しなくて問題ありません）

ユーザー名同様、リポジトリの名前は、GitHub Pagesでのサイト公開時にURLの一部となります。
リポジトリの名前は後から変更が可能ですが、ポートフォリオサイトとして公開するURLに含まれることを念頭において、リポジトリの名前を決めてください。

私自身は試してはおりませんが、「https://アカウント名.github.io」というURL（リポジトリ）も生成可能なようです。
詳しくは、こちら（参考サイト）を御覧ください。

3. .htmlをアップロード（転記）

ご自身で作成した.html, .cssファイルをアップロードしていきます。
（といっても、アップロードというよりも転記（コピペ）です）。

前項で問題なくリポジトリが作成されたら、以下の画面が表示されます。
表示された画面の【creating a new file】をクリックします。

リポジトリの名前以下の入力欄には、index.htmlと入力します。
別名にて.htmlファイルを作成している場合も、必ずindex.htmlとしてください。

【Enter files contents here】と書かれた欄には、作成した.htmlファイルをコピー・アンド・ペーストします。
最後に、【Commit changes...】をクリックします。

本稿は、シングルページ（.htmlが一枚だけ）のサイトを公開する手順です。
複数の.htmlを使用したサイトの公開については、手順が異なる場合がございます。

4. .cssをアップロード（転記）

.htmlがアップロードできたら、次に.cssをアップロードします。

.htmlファイル作成後に遷移した画面の【Add file】より、【Create new file】をクリックします。

リポジトリの名前以下の入力欄には、.cssファイルの名前を入力します。
.cssファイルの名前は自由です。ご自身が作成された名前で問題ありません。

【Enter files contents here】と書かれた欄には、作成した.cssファイルをコピー・アンド・ペーストします。
最後に、【Commit changes...】をクリックします。

スタイル用やリセット用など、複数の.cssファイルがある場合、この手順を複数回行います。

5. 画像のアップロード

.htmlと.cssがアップロードできたら、画像をアップロードします。

.htmlや.cssファイル作成後に遷移した画面の【Add file】より、今度は【Upload files】をクリックします。

以下の画面が表示されたら、画像をドラッグ・アンド・ドロップします。
【choose your files】よりエクスプローラーから選択も可能です。

アップロードしたら、最後にCommit changesをクリックします。

他、必要なファイルがある場合は、画像と同じ手順でアップロードします。

6. .html（と.css）の微修正

ここまでで、公開に必要なファイルが全てアップロードできたかと思います。
公開の前に、.html（と.css）のリンクの箇所に微修正を加えていきます。

ローカルなどでの開発環境と、GitHubのリポジトリ上のパスが異なるため、リンク切れにより、「cssのスタイルが適用されない」、「画像が表示されない」、「ナビゲーションバーが上手く動作しない」などが起こりえます。

上記、挙げてしまいましたが、修正を加えるリンクは、主に以下の点です。

CSSへのリンク
- 例：<link href="css/reset.css" rel="stylesheet" />
画像へのリンク
- 例：<img alt="work1" src="./img/sample.png" />

相対パスを上手く使われている方などでは、修正が不要かも知れません。
他、ナビゲーションバーやフォントなどでもリンクの変更が必要な場合もあります。
修正を加える前に、7.の手順にて公開をし、修正が必要な箇所を特定することも良いかと思います。

まずは、.htmlを開きます。

アクセスの仕方は様々ありますが、迷ってしまった場合は、以下の方法が確実かと思います。

ログアウト
こちらより、再ログインする（Dashboardが開きます）
左側に表示されている（目的の.htmlのはいった）レポジトリをクリック
遷移したページにて、該当の（今回はindex.html）をクリック

.htmlを開いたら、修正（編集）します。

開いたページの鉛筆のマークをクリックし編集モードにします。
適宜、修正を行います。

以下、修正例です。

CSSへのリンク
- 旧：<link href="css/reset.css" rel="stylesheet" />
- 新：<link href="https://yskmkn.github.io/portfolio/reset.css" rel="stylesheet" />
画像へのリンク
- 旧：<img alt="work1" src="./img/sample.png" />
- 新：<img alt="work1" src="https://yskmkn.github.io/portfolio/sample.png" />

最後に、【Commit changes...】をクリックします。

7. ページの公開

公開の準備が整ったら、ページの公開設定を行います。

レポジトリ内容の表示されている画面（先の3. の画面）にて、【Settings】をクリックします。

Settings画面より、【Pages】をクリックします。

Pagesの画面の【Branch】にて、【None】から【main】に変更し、【Save】をクリックします。

数分後、ページを再読込みし、Your site is live at (ページURL)と表示されていたら、公開が完了です。
そのURLにて、ご自身のポートフォリオサイトにアクセスできます。

公開には少々時間がかかります。
ページを再読込みしても、上記表示が出ない場合は、10分程度待ってから、再読み込みをお試し下さい。

お疲れ様でした。
これで公開が完了です。
公開後も、手順6.にて修正が可能です。

参考文献（2023-07-17閲覧）

株式会社Progateさん
「自分で作ったWebページをインターネット上に公開しよう！」

全体の流れを大変参考にさせて頂きました。

daiblogさん
【GitHub】GitHub PagesでCSSが反映されないときはパスを変えるべし

タイトル通り、cssが反映されず途方に暮れていたときの救世主でした。

おわりに

これで、皆さんのポートフォリオ（など）が公開可能です。

私を含めて、初心者の方だと、まずはサーバーを契約するよりもGitHub Pagesを使わせて頂くのが良いのかと思っております（勿論、サーバーへの展開なども学んでいく必要はあると思います）。

次稿では、公開したサイトにお問い合わせフォームを実装する方法をご紹介したいと思っております。