GitHub PagesでCSSや画像が表示されない時の確認

CSSや画像だけが表示されない時は、ファイル自体ではなくパスの問題であることがあります。公開URLでCSSや画像のURLを直接開き、404かどうかを確認します。

このページでわかること

  • CSSと画像のURLを直接確認する
  • 相対パスと絶対パスを切り分ける
  • assetsフォルダとファイル名を見る

まず確認すること

  • 大文字小文字、空白、日本語ファイル名を確認する
  • root相対パスとproject siteの違いを見る
  • 既存リンクを壊さない小修正にする

やってはいけないこと

  • 全ファイル名変更を安易にすすめる
  • 既存リンクを壊す変更をすすめる
  • 一律のパス修正で解決すると断定する

安全寄りに進める手順

  1. 対象のrepo、branch、PR、Actions runを確認する。
  2. Secrets、APIキー、token、.env、個人情報が差分やログに出ていないか見る。
  3. 必要な場合は値を停止または再発行し、影響範囲を整理する。
  4. 変更は小さなbranchとPRに分け、CIとreviewで確認する。

CodexやAI作業時の注意

AIに作業を渡す時は、対象ファイル、触らないファイル、確認項目を明記します。認証情報や実際のキー値は本文、Issue、PR説明、ログ、レポートに残さないようにします。

公式情報で確認する領域

Actions、Secrets、PR、repository visibility、workflow permissionsは仕様が変わることがあります。実作業前にはGitHub Docsで最新の説明を確認してください。

関連ページ