はじめに

ホームページを作っていて、デザインが反映されないことってありませんか？
私は 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は別の設定を読んでいた。

.eleventy.js にこれだけ書く（他の設定は消す）：

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy({ "public": "/" });
};

→ これで、public/styles.css が公開時に /styles.css として出ます。

base.njk にこう書く：

<link rel="stylesheet" href="/styles.css?v=3">

?v=3 はおまじない。数字を変えるとキャッシュを更新できます。

それはもう古いキャッシュ。
今の設定では作られていないので、時間がたてば消えます。
Cloudflareの仕組みで自動的に消えるから、放っておいて大丈夫。

状況	結果
`/styles.css`	✅ 正常に新しいデザインが出る
`/public/styles.css`	⚠️ 古いキャッシュ表示が出る（放置でOK）
キャッシュ更新	`?v=数字` を変えるか、Cloudflareで「Purge Cache」

これで、デザインがちゃんと反映されるようになりました！
同じように「CSSが反映されない…」と悩んでいる人の助けになればうれしいです。

(以上)