如何確保靜態網站頁面是新鮮的？

我有一個託管在Amazon S3上的靜態網站。我經常更新它。但是我發現很多訪問它的用戶正在查看陳舊的副本。如何確保靜態網站頁面是新鮮的？

順便說一句，該網站是：http://cosi165a-f2016.s3-website-us-west-2.amazonaws.com），它生成了一個名爲nanoc的ruby靜態網站生成器（順便說一句，非常好）。它爲網站編譯源文件：https://github.com/Coursegen/cosi165a-f2016進入html，css，js等文件。

我認爲這與頁面新鮮度以及瀏覽器緩存頁面有關。

如何確保我的用戶看到新的頁面？

來源

2016-09-20 pitosalas

通過更新，你是指頁面內容或靜態文件（CSS，JS）？ – JoseAPL

是的，我更改內容，然後上傳更改後的html，但也可能是其他文件。 – pitosalas

你的html文件是否被緩存？關於javascript和css文件，你可以閱讀這篇關於緩存清除的文章，以防止你的文件被緩存http://curtistimson.co.uk/front-end-dev/what- is-cache-busting/ – JoseAPL

一種常見的技術是在您將靜態資產更新爲S3時跟蹤上次的時間戳，然後將該時間戳用作html中的查詢字符串參數。

像這樣：

<script src="//assets.com/app.min.js?1474399850"></script>

瀏覽器將仍然緩存這一結果，但如果時間戳改變，瀏覽器將獲得一個新的副本。

該技術被稱爲「cachebusting」。

如果你使用grunt，有一個grunt模塊：https://www.npmjs.com/package/grunt-cachebuster。它會計算資產內容的散列並將其用作文件名。

來源

2016-09-20 19:32:20

聽起來很有希望，但我不明白。該網站（順便說一句：http://cosi165a-f2016.s3-website-us-west-2.amazonaws.com）生成了一個名爲nanoc的ruby靜態網站生成器（順便說一句，非常好）。它將網站的源代碼材料編譯成html，css，js和其他文件。https://github.com/Coursegen/cosi165a-f2016 腳本標籤到底在哪裏，它可以在我上面描述的場景中工作嗎？ – pitosalas

這是：http://avdgaag.github.io/nanoc-cachebuster/ –

喬，這是一個很好的鏈接。我會嘗試。順便說一下，我注意到這個例子似乎集中在一個css文件上。我的興趣實際上也在所有的html文件中。您不需要知道nanoc來解釋此代碼： route'/ styles /'do item.identifier.chop + fingerprint（item [：filename]）+'。' + item [：extension] end 您是否認爲我需要類似的所有文件類型的行而不僅僅是/ styles /？ – pitosalas

如何確保靜態網站頁面是新鮮的？

回答

相關問題