Hexo图片CDN问题新思路

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 741 阅读时长 ≈ 2 分钟

　　使用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/.*/.*(?<!\.html)$ {
    return 301 https://你的CDN域名$request_uri;
}

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