GitHub PagesでCSSや画像が表示されない時の確認
CSSや画像だけが表示されない時は、ファイル自体ではなくパスの問題であることがあります。公開URLでCSSや画像のURLを直接開き、404かどうかを確認します。
このページでわかること
- CSSと画像のURLを直接確認する
- 相対パスと絶対パスを切り分ける
- assetsフォルダとファイル名を見る
まず確認すること
- 大文字小文字、空白、日本語ファイル名を確認する
- root相対パスとproject siteの違いを見る
- 既存リンクを壊さない小修正にする
やってはいけないこと
- 全ファイル名変更を安易にすすめる
- 既存リンクを壊す変更をすすめる
- 一律のパス修正で解決すると断定する
安全寄りに進める手順
- 対象のrepo、branch、PR、Actions runを確認する。
- Secrets、APIキー、token、.env、個人情報が差分やログに出ていないか見る。
- 必要な場合は値を停止または再発行し、影響範囲を整理する。
- 変更は小さなbranchとPRに分け、CIとreviewで確認する。
CodexやAI作業時の注意
AIに作業を渡す時は、対象ファイル、触らないファイル、確認項目を明記します。認証情報や実際のキー値は本文、Issue、PR説明、ログ、レポートに残さないようにします。
公式情報で確認する領域
Actions、Secrets、PR、repository visibility、workflow permissionsは仕様が変わることがあります。実作業前にはGitHub Docsで最新の説明を確認してください。