0%

Hexo图片CDN问题新思路

  使用Hexo作为新的博客系统后,还有最后一个未解决的问题——文章内图片等资源的CDN地址替换。目前使用Nginx作为一个临时的解决方案。

问题需求

  1. 图片能够分门别类的存放,能够快速的定位到某篇文章内图片的位置
  2. 本地能够存放原始的高清图片,线上版本提供压缩后的图片,节省流量
  3. 在本地能够正确的预览

解决方案

  针对需求一和需求三,Hexo已经有自带的解决方案。在/source/_posts建立与文章同名的资源文件夹,并在文章中按以下语法引入图片即可解决。该方案唯一的缺点便是,几乎所有markdown编辑器,均无法正确显示图片。

1
{% asset_img 图片文件名 图片标题 %}

  部署文章后,可以观察到图片指向的是Web服务器上图片的相对路径,即使配置了NexT主题的Assets选项,也无法正确定向到CDN地址。解决这个问题实际上就是在生成文章的时候,自动将CDN前缀填充至图片路径首部,经过一番搜索后,暂时没有这样的方案,目前也没有时间自己实现。因此在这里换一个思路,我们考虑在浏览器访问Web服务器图片的时候,返回一个301重定向至CDN服务器,让浏览器从CDN上下载图片,虽然这个方案每张图片需要多发起一次HTTP请求,但是对于目前的小水管服务器来说,能缓解很大的压力。

1
2
3
location ~* /posts/.*/.*(? {
return 301 https://你的CDN域名$request_uri;
}

  在你博客的Nginx配置文件内添加如上配置,注意替换你的CDN域名,例如blog-img.i5zhen.com。如此操作,可以将资源文件夹内除了.html文件的请求都重定向至CDN服务器,算是半解决了自己的奇葩需求,曲线救国。