GitHub PagesでCSSが反映されない

GitHub Pagesを使ってサイトを作成した際に、デプロイには成功したがCSSが読み込まれず、デザインが崩れてしまうという問題が発生しました。そのときの対処法をネットで調べると、GitHubに上がっているCSSファイルの絶対パスを指定するというものばかりで、こんなん絶対面倒だろ！と思ったので代わりの方法を書いておきます。

慣れている人にとってはなんてことない内容ですが、初心者の方が使用することも多い機能だと思ったのでこの記事を作成しました。

前提

以下のような簡単なファイル構成だとします。ファイル構成が違えばURLも異なってくるのでご注意ください。

└── portfolio
    ├── style.css
    └── index.html

面倒な例：絶対パスを使用

<link rel="stylesheet" href="https://yudatchshouga.github.io/portfolio-repo/style.css"/>

https://[githubユーザーネーム].github.io/[リポジトリ名]/style.cssのように指定すると読み込めるようです。

この例の面倒な点は、ローカル環境で設定するURLとGitHub上にアップロードする際のURLが異なるため、ローカルで開発するときに書き換えて、GitHubにあげるときにまた書き換えて・・・という手間が発生する点です。
全然スマートではないですし、このような手間が更新のたびに発生すると自分のようなズボラ人間は更新が億劫になってしまいます。

また、例えば半年ぶりの更新をしたらこの一手間が必要なことを忘れてしまっていて、なぜかCSSが反映されないぞ！？と狼狽えてしまうという状況も想定されます。

良い例：相対パスを使用

絶対パスのhttps://[githubユーザーネーム].github.io/[リポジトリ名]を.に変更します。

<link rel="stylesheet" href="./style.css"/>

こちらの記法を使えば、ローカルでもGitHub上でもURLを変更する必要はありません。
もしかしたらこの記法が使えない状況が発生しうるのかもしれませんが、自分はこれで動きましたので、基本はこちらを使用するのがいいと思います。

そもそも絶対パスと相対パスとは？

絶対パスと相対パスの違いを解説するページではないのでここでは省略しますが、こちらのページがわかりやすいかと思います。
https://and-engineer.com/articles/Y1fGpxAAAAt07ZlQ