用 hexo+github 搭建这个博客的一点经验

博客基本算是搭好了。当然,还有很多地方可以改进,比如加上包括评论(主要是多说不知道为什么一申请就告诉我出错)在内的第三方服务,比如样式还可以再漂亮一些,而且也没有申请自己的域名(毕竟也没什么人看吧…大概)。但是一个博客,内容的质量应该是最重要的。从现在开始,先写点东西吧,比如,先谈谈搭建这个博客时遇到的一些问题以及解决的方案。注意,我是用 mac 搭建的,以下很多内容可能只适用于 OS X 系统。

这个博客后期做的样式等修改也会在这篇博文中进行实时更新记录。

初始搭建

前期准备:安装 XCode、Node.js,注册 Github。除开Node.js外都是已有的,也没遇到什么问题。

hexo 的安装推荐查看hexo的官方文档,说的很详细。看网上七七八八的教程反而可能遇到一些莫名其妙的问题。整个搭建过程中花费时间最多的就是在解决 DTrace 错误上:

1
[Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' 

按照百度的解决方法折腾半天(是真的半天!)也不奏效,最后的解决方案还是按照文档从安装hexo开始重新走了一遍,再使用命令:

1
npm install hexo --no-optional

这才解决。果然官方文档才是坠吼的!

然后就是主题选择了。根据知乎上有哪些好看的 Hexo 主题?-知乎问题的回答,果断选择github上star最多的NexT主题,官方文档也同样详细易懂。Muse 实在太丑,开始时我选用的 Scheme 是 Mist。后来百度看到好多大佬选用 Pisces,感觉要比 Mist 好看一些,于是换了。其实就是改改配置文件,很简单。之后加入不蒜子统计,设置 RSS(其实我并不清楚这个是干什么的…就是橙色的图标蛮好看的),加上标签、分类、关于页面、搜索功能和侧边栏社交链接。这些在官方文档写的都很清楚。

我还改了一些什么呢?第一,背景颜色。原来NexT的默认背景颜色是浅灰色,不仅沉闷,而且和其他博客的重复率太高。在网上搜到改动方法:hexo(hexo工程文件)-> themes -> next -> source -> css -> _schemes -> Pisces(Mist和Muse也行),找到路径下的index.styl文件,改动文件的最上方的那一行代码即可。这个方法应该也可以将背景换成图片,但是每次我用hexo server在本地看是正常的,传到github上就显示不了图片。还没找到解决方法,只好作罢。

17.04.27更新:解决了,现在背景图片为《言叶之庭》中的截图,CSS 代码为

1
body { background: url("../../../images/back1.jpeg"); background-repeat:no-repeat; background-attachment:fixed; background-size: 100% 100%;}

第二,我对底部 powered by 的 logo 栏进行了更改。其实按理说这个地方作为对 hexo 和 NexT 的开发者的感谢不应该修改的…还是更想个性化一点,抱歉抱歉。修改方法参见 Hexo-Next底部powered by的logo栏更改以及注意事项(附官方文档,文末有福利链)。我把这里当作一个随时修改的心情栏了。(17.04.27:我改回来了)

大概就这些了。希望搭建这个博客能够督促我写下更多编程学习中的经验之谈。但我也没有打算只把这个博客当作一个写技术性文章的地方,随笔、填词什么的也会放在这里。欢迎大家多多来看,相互交流 :)

后期更新

16.12.31更新:加上了鼠标点击出爱心的特效。详见 hexo引用自定义js文件和css样式。这个blog还有粒子特效的背景,说不定哪天也给自己加上。

17.02.20更新:申请了现在的域名,域名解析详见 Hexo站点之域名配置【2】

17.02.21更新:增加多说评论并修改样式,详见 动动手指,给你的Hexo站点添加最近访客(多说篇)。(17.04.08更新:多说归西)

17.02.26更新:NexT主题支持自行设定CDN以加速静态资源的加载,详见 进阶设定 - NexT 使用文档。但是经过测试,感觉修改CDN后并没有实现预期的加速(也有可能是我没找到比较好的CDN)。所以现在暂时还是保持没有修改的状态。

17.04.27更新:NexT 主题更新至 5.1.1 版本,更换背景图片(好看多了w)。

17.12.20更新:感觉字体不好看,修改了 /themes/next/source/css/_variables 文件。

18.04.12更新:Next 升级到 v6.1.0。加上评论区。