Hexo搭建博客网站的全流程指南

Hexo + Travis CI + Github Page = 如你所见的这个网站。

---

需求分析

搭建目标：属于自己的博客网站，上传便捷、随意修改、一键部署。内容第一，开发越轻量化越好。

开发方针：寻找现有方案，能用就用，不能用就换个继续用。

期望时间：一个月内搭建完毕，能和其他人在网站里交流想法。

确定方案：使用Hexo搭建网站，从Hexo官方文档做起，遇到不会的去Google，走一步看一步。

Hexo安装与建站

从Hexo官方文档开始，一步步照着做。

安装Hexo的前置需求是Node.js和Git。Node.js是一个Javascript运行环境，可以让js在脱离浏览器的情况下运行；Git就是传说中最伟大的开源版本控制系统，不多赘述。

两个都安装好之后，打开cmd，用npm安装hexo。npm是Node.js一起的包管理工具，可以通过这个安装别人的第三方包。

安装完毕后，顺着官方文档的建站继续操作，全部完毕后，就有了个可以初步进入的网站了。

基础知识准备

这一步不会有实际操作，先预习下之后会用得到的内容。

YML语法规范

Hexo里的配置文件是yml写的，按照百科，此格式是YAML Ain’t Markup Language递归缩写。.yml是一门专门用来写配置的语言，和.json一样。.yml有一些语法规范需要注意，写错的话轻则没效果，重则报错起不来。

网上有很多文章对此进行总结，比如这篇。个人踩过的坑里印象最深的：① 大小写敏感； ② 数组用 - 来写； ③冒号后必须空一格。挨打了要长教训。

Hexo基本配置

官方文档的命令里讲了一部分指令，下面的基本操作里也有介绍。

可以适度看看，但不建议直接照着做内容。很多东西讲得不够清楚，或者和前后重复，以及使用频率并不高。个人建议是，熟悉下_config.yml、post的抬头配置和一些hexo指令就足够了。

至于hexo指令，要熟悉哪个呢？唯一的神：hexo s。（启动服务器测试）

网站部署流程搭建

经过了1和2，现在有了一个使用默认theme Landscape的基础网站。

不推荐现在就使用theme和他人项目文件，否则上线出错的话，不知道是部署有问题还是theme有问题。

个人使用的是官方文档的第一种方法，即使用Travis CI将网站部署到Github Pages上。

前方预警：此文档年久失修，且个人由于知识匮乏存在若干不理解的地方，磕磕绊绊后弄出来了。接下来介绍下本人纠结过的地方。

1. 新建一个repository，就是去github上新开一个库。

2. 在Travis CI里新建环境变量时，Name的GH_TOKEN要手打，直接复制官方文档会复制到格式。

3. 关于.travis.yml：每次推送时，CI会根据这个文件进行持续集成。但是！现在的主分支英文是main而不是master，复制了官方的脚本后需要手动修改。

4. 推送后Travis CI还是没有运行的话，可以尝试在.travis.yml里再加入 deploy: target: gh-pages。

5. 第一次部署需要较长时间，请稍安勿躁。

   
   

使用主题和示例项目

3成功后，网页已经可以上线访问，url是<你的github用户名>.github.io。但现在还比较丑，无法邀请朋友来参观。此时有两个选择：自己学习Hexo写布局，和使用他人主题和项目文件。

如果想继续学习前端，请走前者；如果只是想有地方生产内容，请走后者。

Hexo使用了组件化生成的思想，渲染引擎是EJS，它可以把md渲染成html。切换页面时，不是html之间直接切换，而是更换模块后重新渲染。想要自己写主题，可以沿着EJS+Stylus的方向继续研究，但不好意思，因为我要走后者，所以本人的叶公好龙到此为止。

大致了解了Hexo的运行方式后，现在来挑选主题吧。

选择你的主题

Theme是一套编写好的渲染模板，选择了theme后，你的md文件会按照这个格式被渲染出来，变成具体网页。官方的主题里列出了所有上传的theme，可以按照自己喜好选择。

个人建议的挑选标准是：

1. 主题功能齐全。有边框、头图、预览图、归档等功能。widget可以随便装卸，功能可以用不到，但不能没有。

2. 有完整的说明文档。theme自己也需要按步骤操作，含糊的说明会带来Hexo一样的烦恼。

3. 持续更新中。有些theme已经年久失修，用着用着如果跑不动了，凭自己很难解决。

4. 有示例项目。示例项目是人家用自己的theme做好的网站，可以直接对着文件改，迅速上手一套规范。

动手实操，一通修改

个人经过了4.1阶段的几次试错后，最终选择了icarus。选好主题后，按照步骤安装完成，接下来就是实践环节了。把人家的改成自己的，美名曰“站在巨人的肩膀上”。

主要需要修改的对象：

1. _config.yml，要修改theme config，不然主题无法生效。
2. _config_xxxxx.yml，主题自己的主页配置，把所有人家的元素替换成自己的即可。如果要删减模块，需要注意是否会报错，即原theme是否支持更改。
3. post文件夹的内容。不同theme的layout不同，可能存在独特格式，去找一份别人的md，拿回来对着修改，然后记下这个格式，以后无限复用。

Theme的安装其实有个小坑。很多高级theme会需要插件支持，一般来说npm install即可。但试用Claudia插件时，需要安装hexo-renderer-sass，由此引出一系列问题，最后的解决方案就是…换个主题。

毕竟，有现成的就用，用不了就换一个，这就是本人的开发方针嘛。

其他系统

评论功能方面，注册了一个Disqus，直接享受带广告的免费评论功能。很多主题直接集成了这个功能，修改comment的配置项和shortname即可。shortname需要和Disqus的唯一对应，不是随便写的。

后来又给评论弄了DisqusJS，是Disqus的阉割版，为了在无法登陆的地区提供评论预览功能。Disqus弄好后再弄DisqusJS非常快，配置API Key即可。

图床方面，一开始打算用img-hut做图床，没别的原因，这里居然能发色图。后来嫌弃人家UX不好用，外加才知道Github可以直接传图，所以改为直接上传到source文件夹下，自己打理结构。

后续维护时的零碎踩坑

工具是越用越好用，踩了坑才知道要填什么坑。总而言之，多多实践，遇到问题留下记录，警示自己。

hexo s都起不来

本地都起不来，多半是文件就写错了。主要出错的地方有俩，分别是post的md和_config.yml文件。前者一般有报错精准到哪个文件，后者就需要慢慢赏读了，因为会把背后的渲染文件牵扯出来。

我这文章咋没换行？

md里回车不是换行，需要直接写br换行符，太蠢了。指我自己。

本地有效果，推送后却没有

仔细赏读下Travis CI的log，多半是因为没找到layout，即theme文件夹没推送。如果是直接clone theme经常出现这个问题，theme下还有.git文件夹，所以整个文件夹都不会推送。此时就手动删除即可。

如果不是这个，看看你的theme大小写是否正确。yml，大小写敏感！

本地跑得动，推送就挂了

之前在sass插件风波时遇到的问题，可以赏读Travis CI的log，看看是哪个指令出了问题，然后对照着去搜。当时sass是挂在npm ci上，也就是sass根本没安装成功，虽然本地可以跑了，package lock对不上。

出错了，记得找log，没有log，比尔盖茨来了都迷惑。

有没有更便捷的测试方法？

只是改md的话，本地hexo s后可以直接刷新4000进行测试，不需要重启，节省些时间。

但是修改config的话，需要重启。

我的网站Google不到？

如果没被收录，需要自己提交站点地图。这件事本站也还没做，日后做了会单独写篇小传记录下，不写白不写。

对当前主题的部分效果不够满意？

需要修改人家的theme文件，网上有教学，工程里有说明，小改怡情，大改动骨。

……

使用Hexo搭建网站的全流程，至此就结束了，相当简单便利。但正如开头所言，这个博客的出现是为了保持写作习惯，不断更新知识，后续的内容生产才是最重要的。毕竟网站这么好看，不填鸭一下Timeline，对得起人家的主题吗？www