GitHubを見る前に
コード管理と秘密情報を分けて考える
GitHubはコード履歴や差分確認に向いています。APIキー、パスワード、DB情報などを置かないこともセットで確認しましょう。
まなぶちゃん
GitHubには何でも保存していいの？
GPTガイドくん
コード管理には便利ですが、秘密情報は入れません。差分を見るページと、入れてはいけないもののページを一緒に確認しましょう。
コードを見る差分を確認する秘密情報を避ける
Personal site workflow
個人サイト制作でGitHubを使う流れ
静的HTMLサイトや小規模情報サイトで、GitHubをコード保管から公開前チェックまで使う流れをまとめます。
このページは非公式の実践ガイドです。GitHubの画面や機能、仕様は変わる可能性があります。最新情報が必要な場合は、提供元が公開している情報も確認してください。コードやファイルの変更後は人間が確認してください。
このページで分かること
個人サイトの流れ
ローカル作成からGitHub保存、PR確認、本番反映まで整理します。
Codexとの組み合わせ
差分確認や公開前チェックをCodexに頼む流れが分かります。
公開前後の確認
本番反映後にURLやSEOタグを確認する考え方が分かります。
個人サイトでGitHubを使う流れ
- ローカルで作るHTMLやCSSを手元で作る
- GitHubに保存するリポジトリにコードをまとめる
- ブランチで修正する1ページずつ安全に直す
- PRで確認する差分を見てから取り込む
- Codexで差分を確認するSEOタグや不要ファイルを確認する
- 本番へ反映する反映範囲を絞って公開する
- 公開URLを確認するHTTP 200やスマホ表示を見る
まずコードをリポジトリにまとめる
個人サイトでも、HTML、CSS、README、sitemapなどをリポジトリにまとめると管理しやすくなります。READMEにはサイトの目的、フォルダ構成、公開前チェックの流れを書いておくと便利です。
1ページずつ修正する
一度に大量ページを直すより、1ページずつ修正してコミットする方が確認しやすくなります。Codexに依頼する時も、1タスク1目的に分けると報告書が読みやすくなります。
公開前チェックに使う
- titleがあるか
- canonicalが自己URLか
- robotsがindex,followか
- 検索除外設定が混じっていないか
- 内部リンクが404になっていないか
- CSSが読み込めるか
- スマホで大きく崩れていないか
悪い例 / 良い例
| 悪い例 | 良い例 |
|---|---|
| 本番だけで直接編集する | GitHubで差分を残す |
| 複数ページを一気に直す | 1ページずつ確認する |
| 公開後に確認しない | 公開URLでHTTP 200を確認する |
| 外へ出せないパスを書く | 公開してよい一般情報だけ残す |
個人サイト向けチェックリスト
- READMEを書いた
- 作業ブランチを作った
- 1ページずつ修正した
- コミット名が分かりやすい
- PRで差分を見た
- Codexに確認させた
- 公開前チェックをした
- 本番反映後に再確認した
やってはいけないこと
- mainへ大きな変更を直接入れる
- 外へ出せない情報を通常ファイルへ置く
- AIレビューだけで完了扱いにする
- 複数サイトやリポジトリを同じ前提で混ぜる
- 差分や報告書を読まずに次へ進む