静态博客图片处理最佳实践

静态博客图片处理最佳实践

背景

用github/gitee + Hexo搭建个人博客的时候发现，有一些从其他地方拷贝的内容，本地图片显示正常，但是一部署到github就发现图片没了。

这里点名表扬csdn，直接禁止外链访问图片，哈哈真有你的。所以在csdn看到好的内容想转载，单纯的cv已经没用了，也许本地是可以看到的，但是一旦部署，就会出现下面的情况：

解决方案

关于博客的图片如何优雅的处理的问题，其实网络上早就有很多讨论。大致的解决方案有以下几种：

1. 自己搭建图床
2. 将所有图片作为静态资源一起保存并部署到博客。

对于第一种又大致有两种不同的方案：

1. 购买云服务中的oss云存储服务搭建图床，优点是稳定、快速。缺点一个字，要钱。虽然现在云存储的价格已经很低了，几十块钱就能买一年10多G的空间，但是免费才是最香的。
2. 用GitHub（Gitee）搭建图床，github作为全球最大的同性交友中心代码托管网站不是没有道理的，相比gitee就是大度，gitee在发现用户建立仓库存储图片并且使用它的公网带宽免费搭建图床以后，直接修复了这个bug，所以现在只有GitHub（或者类似的代码托管网站）可以用来搭建图床。优点是免费。缺点是限制带宽1M，慢。

由于国内GitHub的状况，搭建图床访问速度并不理想。加上我们必然是使用免费的方案，这里我选择将所有图片作为静态资源一起保存并部署到博客。

接下来介绍我在实践中找到的比较方便、优雅的解决方案。

具体操作

首先需要安装Typora，最简洁的markdown编辑器。

其次在博客（我这里是D盘的hexoblog目录）的source目录下建立images目录用于存储图片。

然后打开typora，打开文件目录下的偏好设置。

将插入图片时的路径改为你上面建立的 sources/images 文件夹，这样一旦你在Typora中粘贴了图片，Typora就会自动帮你保存到 sources/images 文件夹中。勾选对于本地图片和网络图片生效。勾选优先使用相对路径，这很重要，因为你的博客部署到github上以后绝对路径会发生变化，必须使用相对路径。

接下来，就是尽兴的写文时刻啦，无论时本地截图 ctrl+v 到Typora，还是拷贝网络上的内容，图片都会被下载到sources/images文件夹，从而提供给sources/_posts目录下的文章使用。由于使用的是相对路径，并且images文件夹下的内容也会被push到仓库，所以部署以后图片正常显示！这里推一手我的博客，欢迎大家访问呢。

ps：还有一个小技巧，因为我不习惯每次写文章打开cmd，然后

hexo new "新文章名"

所以推建大家在鼠标右键新建中加入新建md文件的选项。这样我们只要在sources/_posts目录下新建一个md文件直接开始写就行啦！具体操作见[这里](Windows下右键新建.md文件教程 | LittlePacai (qinantong.github.io))。

结语

搭建个人博客不是一个很难的操作，也有不止一种的解决方案。真正难的是持续总结所学并更新博客。希望各位持之以恒，坚持才是王道。