Hexo部署成功后首页却没显示新文章，这是为什么呢？

记录一次 hexo 博客部署引发的姿势学习.
本文涉及到了缓存。早点发现这个原因，就不会用那么多时间来调试 hexo 部署了，事实证明，是缓存引起的。

其实之前这个问题我也一直遇到过，那时候还不是很了解浏览器缓存的机制，出现问题没有往这方面想，在Ubuntu下，我就直接了当的使用sudo权限模式进行操作…一般来说都是可行的.最近Blog也转到Windows了，所以也就没使用这种方法了.

$ sudo hexo clean
$ sudo hexo g
$ sudo hexo s
$ sudo hexo d

部署不成功？

生成静态资源文件，本地执行预览命令，进入预览页面发现一切正常，然后执行部署，也没有报错，只是出现一堆警告而已，最后修改是已经提交到 git remote 仓库的。

INFO Deploy done: git 也说明了部署操作成功了。
那么为什么会出现这个问题呢？

排查问题

上 github 查看 chenpt.github.io 这个 repo，里面已经有最新的文章了。
我把本地预览时的端口号后面的路径复制，前面加上博客绑定的域名（chenpt.cc/2018/03/13/title/#more），发现可以访问这篇文章，，可是直接进入 chenpt.cc 首页没有显示文章，我想会不会是缓存的问题，我将地址发到微信上，用电脑微信打开，发现一切正常，文章也出现了，转过头打开控制台把 chenpt.cc 的缓存全清了，再部署一遍

1
2
3

hexo clean

hexo g -d

原因

你也可以修改hexo主题文件夹里的 head 文件的 meta 标签，来添加一个Cache-Control首部，强制不从缓存中加载资源，不过不建议这样做，这样会让浏览器每次都会发送请求去确认缓存是否在服务器有更新，这样会多了很多不必要的 HTTP 请求和一些资源的下载，这些都会造成页面加载时间过久，影响体验，所以，还是每次部署后直接强制刷新页面来得更加简单有效率.

打开控制台一看 NetWork，发现进入网站所请求的资源都是来自浏览器缓存，
状态码都为 200，(from disk cache) or (from memory cache)，这说明了，所有东西都是在客户端缓存请求的，实际上并没有发出 http 请求给服务器.（这里是 github page）这就是强缓存

简单来说，浏览器缓存分为两种，
一种就是上面所说的强缓存，另外一种是协商缓存。

1.强缓存：浏览器在加载资源时，首先会先根据首部信息（Expires和Cache-Control）来判断是否命中强缓存，如果命中，直接从浏览器缓存中将资源取出来，不会发送请求到服务器。

2.协商缓存：在没有命中强缓存的前提下，浏览器会发送一个请求（带有一些跟协商缓存有关的首部）给服务器，服务器根据这些首部信息和所请求资源目前的一些 header 信息来比较验证这个资源是否命中协商缓存，如果命中了，服务器会将这个请求返回，但是并不会返回这个资源的数据，而是告诉浏览器，资源没有变化，可以直接从浏览器缓存中加载这个资源。

命中协商缓存返回的状态信息为
304 Not Modified

3.共同点： 强缓存和协商缓存的共同点是都是从客户端缓存（浏览器缓存）中加载资源，服务器并没有返回所请求的资源的数据.

4.区别：强缓存没有发送请求到服务器，协商缓存会发送请求到服务器。

5.强缓存的控制首部为：Expires和Cache-Control

6.协商缓存的控制首部为：配对的[Last-Modified,If-Modified-Since] 和[Etag,If-None-Match]

所以，页面没有更新为最新的原因就是浏览器直接从强缓存中加载资源，

Cache-Control: max-age=600说明资源从第一次请求后，下次可以再次直接从缓存中加载的有限时间为 600s，也就是 10 分钟，当你在这个时间内再次请求资源，浏览器首先判断这个资源是否命中了强缓存，若是命中了则直接从缓存中加载，所以整个页面还是之前缓存的资源，所以并没有请求新的资源，页面也就没有更新为最新状态了。

解决办法

Ctrl-F5 强制刷新

第一个解决办法就是 Ctrl-F5 强制刷新，这时请求头的 Cache-Control：no-cache

如果没有生效，那就把 localStorage 清空再刷新页面.（一般都是有效的，而不用打开控制台去清空当前页面缓存）

Clear Storage

Chrome 打开控制台Application,点击clear site data清除站点数据，然后刷新，应该就会出现最新页面了，如果没有出现，那可能就不是缓存的问题。自行 google。

no-cache & no-store

no-cache 并不是表示不缓存,而是表示强制确认缓存，意味着使用缓存前必须检查这个资源在服务端是否有更新.

那就顺便说下Cache-Control:no-store吧.
它就比较简单理解了。就是字面意思不储存，表示禁止浏览器以及中间缓存储存任何版本的返回响应信息.每次用户请求资源时，都会完整的发一个请求，从服务器获得响应，之后浏览器和代理商都不得储存该响应信息.

Pragma 是 HTTP/1.0 定义的首部字段，请求中包含 Pragma 的效果跟在头部信息定义Cache-Control: no-cache效果一样，主要是为了兼容使用 HTTP/1.0 的客户端.不可以取代Cache-Cortrol.还有就是 Pragma 只在请求首部中使用，不会在响应首部使用。

Google: Http 缓存

发现自己还需要再去深入理解缓存这一块的东西。得空再去看看，
下一篇笔记再做总结.