はじめに
ホームページを作っていて、デザインが反映されないことってありませんか？
私は Eleventy（イレブンティ）というツールでサイトを作って、
Cloudflare Pages に公開していたときに、こんなことが起きました。
/styles.css が 404（見つからない）
でも /public/styles.css は表示される
しかも中身が古いまま変わらない！
「えっ？どっちが本物のCSS？」と、すごく混乱しました。
問題
ローカル（自分のパソコン）ではデザインがちゃんと出るのに、
公開すると CSSが見つからない（404) 。
/public/styles.css を開くと古いデザインのまま出てくる。
ファイルを直しても、ずっと前のバージョンが残ったまま。
原因
理由は3つありました。
1_ 設定が重なっていた
Eleventyの設定で「publicフォルダをコピーする」命令が2つ書いてあり、
styles.css が2か所に出てしまっていた。
2_ Cloudflareが古いファイルをキャッシュしていた
Cloudflareは速く見せるために、一度見たファイルを保存しています。
そのせいで、前のバージョンのCSSがずっと表示されていた。
3_ 本番とローカルで設定がズレていた
ローカルは正しい場所に出てるのに、Cloudflareは別の設定を読んでいた。
解決
✅ 1. Eleventyの設定をシンプルに
.eleventy.js にこれだけ書く（他の設定は消す）：
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy({ "public": "/" });
};
→ これで、public/styles.css が公開時に /styles.css として出ます。
✅ 2. HTMLのリンクを直す
base.njk にこう書く：
<link rel="stylesheet" href="/styles.css?v=3">
?v=3 はおまじない。数字を変えるとキャッシュを更新できます。
✅ 3. 古い /public/styles.css は気にしない
それはもう古いキャッシュ。
今の設定では作られていないので、時間がたてば消えます。
Cloudflareの仕組みで自動的に消えるから、放っておいて大丈夫。
まとめ
| 状況 | 結果 |
|---|---|
/styles.css |
✅ 正常に新しいデザインが出る |
/public/styles.css |
⚠️ 古いキャッシュ表示が出る（放置でOK） |
| キャッシュ更新 |
?v=数字 を変えるか、Cloudflareで「Purge Cache」 |
ポイント
-
Eleventyの設定は1つだけにする
→ 「publicを/にコピー」だけでOK -
CSSが更新されないときは、キャッシュを疑う
-
難しく考えず、「まずはvの数字を変える」でたいてい直る！
これで、デザインがちゃんと反映されるようになりました！
同じように「CSSが反映されない…」と悩んでいる人の助けになればうれしいです。
(以上)