Hexo静态博客搭建不完全手册

Posted by Kriz on 2016-12-17

写在前面的话

首先要注意,本文基于windows系统。其他系统的步骤也类似,可以考虑参考本文的参考文献

整个过程还是很简单的,但因为各方面的原因绕了不少圈子,在这里记录一下主要的步骤。如果有错误、不完善的地方或者没有提及到的内容,可以随时联系我。

正式开始之前,先在这里稍微写点无聊的感慨,具体实现部分请跳过这段,直接往下拉哈。:)

捣鼓了好几天,终于算是把hexo非常基础地调教好了。

大概是因为无比罪恶的怠惰和不务正业,两年半之后好好打量了一下自己,发现无论是能力还是阅历都和身边的大腿差了一个档次。还记得当初拿到SAPVT计划offer的时候,整个人在慈湖边上愣了好久,攥着拳头发誓要珍惜它。然而时间过去好几个月,也不知道自己当时的干劲都跑到哪里去了,全身都是各种没填完的坑,也根本没有一个能勉强算作熟练掌握的领域。

听到谁之前说过,简历上的“了解xxx”“初步掌握xxx”,都是没人看的。

之后大概还是会广泛接触,但必须要找一个主要的努力方向了。

刚好很偶然地找到冬菇的博客,就按照步骤搭了个简单的自留地,借以自我鞭策,也希望能稍微给后来人提供点便利。

那么,就这样开始吧。


第一步:准备搭建环境

安装Node

Node官网下载最新版本即可。目前的版本已经可以自动设定环境变量,无需手动添加。

安装Git

下载安装git

安装支持Markdown的代码编辑器

非必须,但会提供方便。推荐Sublime Text 3


第二步:安装Hexo本体

安装hexo

执行命令

npm install -g hexo-cli

即可,-g表示全局安装。如果因为网络环境等问题出现速度慢或不稳定,可以考虑更换淘宝npm镜像,具体实现请参考这里

配置hexo

此处我使用了hexo-theme-huxblog模板,咳咳我才不会说是因为跟着教程走的时候不想换模板怕踩坑呢。

注:如果不想使用模板,进行初始化的步骤请参考官方文档的建站步骤

cd到合适的位置,执行命令

git clone https://github.com/Kaijun/hexo-theme-huxblog.git
cd hexo-theme-huxblog
npm install

即可进行主题的安装。

接下来编辑根目录下的_config.yml文件。注意如果有中文需求,请确认文本编辑器编码格式正确。反正不要用记事本写字板就对了

关于文件内各项内容的配置,请参考官方文档的各参数说明这个还不错的范例

请务必注意,配置文件内每个key冒号后面的空格不可删除,否则会报错。


第三步:发布文章

新建博文

在根目录下执行命令

hexo new "blablabla"

或使用简写

hexo n "blablabla"

即可创建新的博文。其中,双引号中为文章标题。在/source/_post路径下可以看到新生成的文件和文件夹,用以管理此博文。

在这个文件夹中存在其他示例文章,可以直接删掉,也可以挪到其他位置留作参考。

生成文件

执行命令

hexo generate

或使用简写

hexo g

即可创建或更新静态文件。第一次创建没有问题的话,根目录下会出现public文件夹,存放所有产生的文件。完成后,执行

hexo server

或使用简写

hexo s

开启本地服务器,可以在浏览器中查看效果。默认为http://localhost:4000,端口可以在配置文件中修改。

在终端按下ctrl+C即可停止。

部署

hexo提供了一键部署功能,支持git、heroku等常见云平台,首次使用需要配置,具体步骤请参考官方文档

配置完毕后,执行命令

hexo deploy

或使用简写

hexo d

即可完成部署。此处若想要部署到自己的服务器,直接将public文件夹中的内容移动到合适的位置即可。


第四步:个性化

基本的博客到这里就成型了,接下来是一些可供参考的内容。

文章相关

hexo的博文直接使用markdown进行编辑。

因为换系统比较多,所以我直接把hexo装在服务器上,博文同步到本地来写。最近做着lua的项目,所以在用IntelliJ IDEA+multimarkdown,虽然有点笨重但用着还算舒服。

优雅一点的话建议直接使用Sublime Text 3,冬菇推荐了OmniMarkupPreviewer插件,不妨一试。

hexo支持标签插件,可以在文章中方便地插入引用块、代码块等,请参考官方文档的标签插件部分

辅助函数也很有用处。

修改网站图标

打开/themes/huxblog/layout/_partial/head.ejs

可以发现这里有一句

<link rel="icon" href="<%- config.root %>favicon.ico">

因此,替换/source/img/favicon.ico文件为自己的icon即可。制作icon比较有名的是faviconer,墙里比较慢,可以使用bitbug

数据统计

被安利了不蒜子,好像挺好用的,代码放到scripts文件夹下就可以了。

更多扩展功能

对功能的自定义扩展,hexo支持脚本插件两种方式,官方文档中写得很详细。

参考文献

冬菇的教程:言简意赅,一般来说够用了

bruce的教程:非常详细的一篇十全大补丸

官方文档:全面而细致的配置文档