このページで分かること
Codexで静的HTMLサイトを作る時の構成、index.htmlと下層ディレクトリ、共通CSS、運営者情報やポリシー、sitemap、robotsの考え方が分かります。
なぜ必要なのか
静的HTMLサイトは、DBや管理画面を使わないため、小規模な情報サイトやサービス紹介サイトを軽く始めやすい方法です。変更範囲が見えやすく、バックアップやロールバックもしやすい利点があります。
Codexに任せられる作業
- index.htmlの作成
- 下層ディレクトリとindex.htmlの作成
- 共通CSSの作成
- ヘッダーとフッターの統一
- SEOタグの設定
- sitemap.xmlとrobots.txtの作成
- 公開前チェック
人間が確認すべき作業
WordPressを使わない判断、問い合わせフォームの扱い、更新頻度、公開してよい情報、運営者情報やポリシーの内容は人間が確認します。静的HTMLはシンプルですが、更新作業の運用ルールは必要です。
よくある失敗
- 共通ナビがページごとにズレる
- CSSパスが下層ページで崩れる
- canonicalがコピー元のまま残る
- sitemapに未完成URLが入る
- 運営者情報や問い合わせ導線が不足する
- バックアップなしで本番上書きする
Codexへの指示文例
目的:
WordPressなし、DBなしの静的HTMLサイトを作る
構成:
/
/about/
/policy/
/disclaimer/
/contact/
/assets/css/style.css
/sitemap.xml
/robots.txt
確認:
全ページにtitle、description、canonical
robots index,follow
CSS読み込み
スマホ表示
sitemap掲載
内部リンク
禁止:
WordPress導入
DB作成
.htaccess変更
秘密情報の掲載静的HTMLサイト公開前チェックリスト
- トップページと下層ページがある
- 共通CSSが読み込まれる
- 運営者情報、ポリシー、免責、問い合わせがある
- canonicalが自己URL
- sitemap.xmlがある
- robots.txtがある
- 404や500がない
- バックアップと戻し方がある
index.htmlと下層ディレクトリの考え方
静的サイトでは、トップにindex.htmlを置き、下層ページはディレクトリごとにindex.htmlを置く構成が分かりやすいです。URLが整理され、canonicalやsitemapも管理しやすくなります。
Codexには、ページ一覧、URL、title、description、H1を表で渡すと、下層ディレクトリと内部リンクをまとめて作りやすくなります。
WordPressなしで始める時の判断
静的HTMLは、更新頻度が高すぎないサイト、管理画面が不要なサイト、小さく公開して後から育てたいサイトに向いています。DBがないため構成が見えやすく、公開前チェックもファイル単位で行えます。
一方で、記事投稿を頻繁に行うサイトや管理画面が必要なサイトでは、別の仕組みが向く場合もあります。Codexには、静的HTMLで十分か、WordPressや別CMSが必要そうかを整理させる使い方もできます。
報告書に残すこと
静的HTMLサイトを作った後は、ファイル構成、共通CSS、全ページのURL、SEOタグ、sitemap、robots、内部リンク、公開確認結果を残します。特に下層ページのCSSパスとcanonicalはコピー時に間違いやすいため、報告書に確認済みとして残します。
Codex実践ログ型ガイド
実際にCodexを使った作業記録は「Codex実践ログ型ガイド」にまとめています。sitemap更新、トップページ補強、AdSense申請前チェック、robots確認、静的HTMLサイト制作など、実際の作業を一般化して整理しています。
実践ログ型ガイドもあわせて読む
実際にCodexへどう指示し、作業後に何を確認したかは、実践ログ型ガイドにまとめています。作業メモではなく、次から使える手順・指示文・チェックリストとして整理しています。