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

この記事では、GitHubにアップロードしてページをGitHub Pagesに公開したページにCSSが反映されていないという時の対処法を紹介します。

先日、僕自身のポートフォリオを作り、保有しているレンタルサーバーにアップロードしたところ、作ったものをそのままアップロードしてうまく表示されました。

しかしGitHubにアップロードして公開したものは、CSSが反映されず、うまく表示されなかったので、対処法を備忘録として残します。

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

結論、HTMLで読み込んでいたCSSのパスを変えることでうまく表示されました。

もともと、下記の一般的な方法でCSSを読み込んでいました。

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

この状態でもレンタルサーバーアップロード時は問題なく表示されます。

GitHubにアップロードし公開するためには、下記のようにパスを変更する必要があります。

<link rel="stylesheet" href="https://daiki-oshima.github.io/2021-dopf/css/style.css" />

今回は、僕のGitHubアカウントのユーザー名「daiki-oshima」に作成したリポジトリ「2021-dopf」以下にCSSフォルダを配置しているので上記にようになります。

つまり、linkのhref属性のパスをhttps://GitHubアカウントのユーザー名.github.io/リポジトリ名/CSSファイルとすれば正常に読み込まれるようになります。

フォントの読み込みもパスを変更

CSSファイルの読み込みと同様に、ローカルで読み込んでいたフォントもGitHubにアップロードし公開してもうまく反映されませんでした。

ローカルでの構築時の内容が下記です。

@font-face {
font-family: 'JosefinSans';
src: url("fonts/josefin-sans-v17-latin-300.woff");
}

SCSSで＠font-faceを用いて読み込みに記述していたパスを前述と同様の変更を加えると正常に読み込まれます。

@font-face {
font-family: 'JosefinSans';
src: url("https://daiki-oshima.github.io/2021-dopf/fonts/josefin-sans-v17-latin-300.woff");
}

サーバーへアップロードして公開した場合は問題なく読み込まれ反映され、GitHubへアップロードし公開した場合は、パスの変更が必要というのは面白い発見でした。

今後も自分で作成したサイトやらサービスを公開していく予定なので、GitHub使用時の注意点や、効率的で効果的な活用方法など学んでいこうと思います。

以上、『【GitHub】GitHub PagesでCSSが反映されないときはパスを変えるべし』でした。