使用 Hexo + Coding Pages 搭建个人博客

前言

话说程序员应该有一个自己的博客，我是从2016年9月——也就是四个月前开始写尝试写博客的，那时是在csdn上写的，最近接触了coding，它和github一样提供了“静态页面网站托管”的功能，觉得有搞头，这有一个好处就是相当于给了我一个免费的域名，例如我现在博客的域名就是cxfree.coding.me，乍一看还真像那么回事，来起比自己买vps，搭建维护web应用，购买域名等等之一系列操作简单多了！
刚好最近接触了nodejs，hexo是基于nodejs开发的，使用得挺广泛的，所以最终决定hexo+Coding Pages搭建个人博客的方案。下面介绍自己搭建过程中遇到的一些问题及解决思路。

关于静态资源404的问题

由于hexo生成的html引用静态资源时是以这种形式的：<link rel="stylesheet" href="/css/style.css">
用的是绝对路径，是相对于主机地址的，coding上是 ${user_name}.coding.me
而我们部署的项目的地址却是${user_name}.coding.me/${project_name}
这就很尴尬了。

解决办法：

还能怎么办，修改html文件呗，批量修改静态资源标签。
一种办法是等hexo生成完毕之后，用程序批量修改html文件，太麻烦了。
还有一种是学习hexo的生成机制，修改其默认generate方式，让它能够生成我们预期的html文件形式，学习成本也比较高。
网上早有现成的解决办法了，把项目名改成和用户名一样就可以了。
为什么呢？
因为这是利用了coding本身的一种特性：
经实验发现
${user_name}.coding.me
```
等价于
```
${user_name}.coding.me/${user_name}
所以，显然
${user_name}.coding.me/css/style.css
```
也等价于
```
${user_name}.coding.me/${user_name}/css/style.css
这是最简单直接的解决办法了，唯一不好的是没法像这样再搭建第二个博客（因为项目名要和用户名相同嘛），不过这些不算什么事，毕竟只是现在只是为了快速搭建，快速上手在coding上体验一下个人博客。等将来学有所成，可以更灵活地部署静态网页，或者使用Coding Pages 内定的jekyll。

markdow引用的图片放在哪？

使用相对路径，也就是使用本地图片，好处是不依赖第三方服务，hexo也提供了相应的插件，允许插入本地图片，并且提供了相应的标签，可就坏在这里，这样子用md编辑器编辑时就没法看到图片了，不能做到所见即所得，比较不友好，对于这一点别人可能有解决办法吧，我还没去研究。
引入远程的图片资源，使用“图床”，把图片放在第三方公共存储服务提供商那里，例如网上推荐比较多的“七牛”，因为是国内的服务，所以不用考虑被墙的风险，使用这种方案最大的好处是markdown文件的”可移植性“非常强，因为图片是远程的，所以在任何地方打开md文件都能看到图片。我用的是马克飞象，这样还可以把md文件（也就是博客）同步到印象笔记上，方便我使用印象笔记时随时能够查看博客文章。

刚开始的时候犹豫采取什么方案，后来想到这个好处之后果断使用七牛来存放图片，花了两个小时，摸索了七牛的文件上传工具和它提供的api，七牛官方内定的命令行工具“qshell”，功能貌似强大的，但要想高效引用文件的话还得自己加入一些个性化需求，打算开发个命令行程序，功能是这样的：

配置一个本地文件目录，把想要上传的文件丢到里面，程序支持“增量同步功能”，也就是说只上传新增的文件。
把文件丢进指定目录后，使用命令行运行指令，程序去调用qshell的命令把文件上传到七牛，然后把文件的外链写入剪切板。

写博客时引用图片大多是使用的截图，下面以截图然后引入图片为例，梳理一下操作步骤：
第一步：使用截取软件（我用的是qq截图），图片另存为到指定目录。
第二步：运行命令行程序，程序会自动把图片上传到七牛，然后把外链写入系统剪切板
第三步：回到markdown编辑器（如我用的马克飞象）执行ctrl+v 就得到图片的链接了，搞定！

现在已经把这个工具写好了，github地址：https://github.com/cxfree/qiniu-sync-tool

力求最高效地引入图片，提高写作效率。如何大家还有更好的方法欢迎交流。

想要注册七牛云的可以点击下面的链接（实际上是我邀请链接，你们注册成功的话可以给我加每月5G的流量，嘿嘿）
https://portal.qiniu.com/signup?code=3lito3c5lu2qa