GitHub Pagesでのポートフォリオ（静的サイト）公開

<h1>はじめに

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

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

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

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

▶[**GitHub**](https://github.com/)

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

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/6585cecc-8ee3-c6d1-26fb-d8657dded2c2.png)



<h1>2. リポジトリを作成

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

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


![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/afce9845-6844-2a22-84a0-7792e99b303d.png)


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

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


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

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

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

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/70d4f467-9e9f-c39e-4e2a-863fd4d87e7d.png)

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

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

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/eb84ba34-e623-48e4-ae2e-ed63c89790d9.png)

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

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

<p>.htmlがアップロードできたら、次に.cssをアップロードします。
<p>.htmlファイル作成後に遷移した画面の【Add file】より、【Create new file】をクリックします。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/dae305c8-0fea-4505-e2a6-def34d550834.png)

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

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

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


<h1>5. 画像のアップロード

<p>.htmlと.cssがアップロードできたら、画像をアップロードします。
<p>.htmlや.cssファイル作成後に遷移した画面の【Add file】より、今度は【Upload files】をクリックします。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/a360cfdf-1df9-ffdf-be45-fc35b281ca7d.png)

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

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

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/5dd5dabd-64bc-3dde-6cde-d8abd7ed0aef.png)

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

<h1>6. .html（と.css）の微修正

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

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

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

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

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

<p>まずは、.htmlを開きます。

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

1. ログアウト
2. [**こちら**](https://github.com/dashboard)より、再ログインする（Dashboardが開きます）
3. 左側に表示されている（目的の.htmlのはいった）レポジトリをクリック
4. 遷移したページにて、該当の（今回はindex.html）をクリック

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/9b8f3598-4caf-68bc-da5a-b024def1431b.png)

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

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

<p>以下、修正例です。

- 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" />`

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

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/3c63d7ab-d7be-5cf0-fe3b-98c20ca2763b.png)

<h1>7. ページの公開

<p>公開の準備が整ったら、ページの公開設定を行います。
<p>レポジトリ内容の表示されている画面（先の3. の画面）にて、【Settings】をクリックします。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/58719a9b-2d9f-db08-3787-0ebf9533e754.png)

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

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/dc9445c0-a27a-ee83-afc3-98b19548f091.png)

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

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/ac6c0e59-d446-2a20-7978-6f6d39fcad6e.png)

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

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3512773/425c6b53-406f-ca01-4ad7-e9f39ccc9914.png)

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

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

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

<p>株式会社Progateさん
<br>「自分で作ったWebページをインターネット上に公開しよう！」
<p>全体の流れを大変参考にさせて頂きました。

https://prog-8.com/docs/github-pages


<p>daiblogさん
<br>【GitHub】GitHub PagesでCSSが反映されないときはパスを変えるべし
<p>タイトル通り、cssが反映されず途方に暮れていたときの救世主でした。

https://daiblog923.com/github-pages-css-reflect/

<h1>おわりに

<p>これで、皆さんのポートフォリオ（など）が公開可能です。
<p>私を含めて、初心者の方だと、まずはサーバーを契約するよりもGitHub Pagesを使わせて頂くのが良いのかと思っております（勿論、サーバーへの展開なども学んでいく必要はあると思います）。

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