GHgithubguide.jp

GitHub Pagesで静的HTMLサイトを公開する方法

静的HTMLサイトでは、index.html、CSS、画像、リンクの場所が公開表示に直結します。ローカルで見えることと公開URLで見えることを分けて確認します。

このページでわかること

  • index.htmlが入口になる
  • CSSや画像のパスを確認する
  • 公開URLで表示を確認する

まず確認すること

  • CSSと画像の場所を見る
  • 相対パスと絶対パスを整理する
  • 大文字小文字やフォルダ名を確認する

やってはいけないこと

  • PHPやDBが動く前提で説明する
  • 公開URL未確認で完了扱いにする
  • Secretsや個人情報をHTMLに入れる

安全寄りに進める手順

  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で最新の説明を確認してください。

公開までの実際の流れ（最短ルート）

静的HTMLサイト（HTML・CSS・画像だけのサイト）なら、GitHub Pagesでの公開は次の流れで完了します。サーバー契約もFTP設定も不要です。

  • ①リポジトリを作り、サイトのファイル一式をpushする（トップページは必ずindex.htmlという名前でルートに置く）
  • ②リポジトリのSettings→Pagesを開く
  • ③公開元（Source）のbranchを選んで保存する
  • ④数分待つと https://ユーザー名.github.io/リポジトリ名/ で公開される
  • ⑤公開URLを開き、表示・リンク・画像を確認する

最初につまずく2大ポイント：パスと反映待ち

公開後に「CSSが効かない」「画像が出ない」となる原因は、ほとんどがパスの書き方です。/style.cssのようにスラッシュ始まり（絶対パス）で書くと、公開URLにリポジトリ名が含まれる構成では位置がずれます。style.cssや./images/logo.pngのような相対パスで書くのが安全です。もう1つの定番は「更新したのに変わらない」で、これはPagesのビルドに数分かかることと、ブラウザキャッシュが原因です。少し待ってからハード再読み込み（Ctrl+Shift+R）で確認してください。それでも変わらない場合は、リポジトリのActionsタブでビルドが失敗していないかを見ます。CodexやClaude Codeで作ったサイトをPagesで公開する場合も、この「相対パス＋反映待ち」の2点を押さえておけば、初回公開はまず成功します。

関連ページ