利用Hexo搭建静态网页博客

其实也是有点玄学

Posted by Donggu Ho on 2016-09-28

由于各方好评于是使用了hexo来搭个blog。Hexo是个制作静态网页Blog的框架,而且支持Markdown所以用着还是挺爽的。
过程真的很简单,参考了Hexo官方文档,在此记录一下。

安装hexo

首先需要安装Git和Node.js。Node.js安装新版即可自动设置环境变量。

然后使用npm安装hexo。考虑国内环境需要先更换npm源(此处改为淘宝npm源),因为后续使用npm次数较多,所以直接永久替换了。

1
2
npm config set registry https://registry.npm.taobao.org 
npm info underscore (如果上面配置正确这个命令会有字符串response)

更换源后即可安装hexo

1
npm install -g hexo-cli

配置Hexo

下一步理论上是新建一个空文件夹来存放hexo文件。

1
2
3
hexo init <folder>
cd <folder>
npm install --save

然而。Hexo有许多模板可供使用,https://hexo.io/themes/中有许多相关项目,封装程度不等,可根据各个主体的文档操作。有的模板下下来需要放到theme/中,那么上一步还是要做的。而我选择的hexo-theme-huxblog主题,由于该主题直接封装了整个hexo文件夹,所以不需要上面的步骤,直接clone即可。

1
2
3
4
git clone https://github.com/Kaijun/hexo-theme-huxblog.git
mv hexo-theme-huxblog hexo//短的名字看着爽
cd hexo
npm install

一边安装可以一边修改各种文件了。

_config.yml

根目录配置文件_config.yml,基本上都很好懂,照着改就是了。由于我不是发布到Github.io所以也不用配置deploy。关于该模板有一些比较特别的地方

1
2
3
4
5
# Sidebar settings
sidebar: true # whether or not using Sidebar.
sidebar-about-description: "Why a raven is like a writing desk?"
sidebar-avatar: img/avatar.png # 这里要注意,由于该图片被用于各种地方所以需要绝对路径。
# 实际使用的是url + root + sidebar-avatar

另外,该模板使用了Disqus的评论插件,翻墙才会显示。需要到该网站注册配置后将此处的用户名改为自己的。不然会出现别人的广告。相关的JS代码已插入不需要修改。

1
2
# Disqus settings                       
disqus_username: donggu

Source/

Source/文件夹中存放了Blog内容的文件。其中_post中为各篇.md博文,同名文件夹内存放对应文章引用的图片。还有别的文件夹恩反正望文知意了。这个模板的作者在里面放了一些,可以留下一篇当模板其余删掉。

写Blog

安装完就可以使用了。首先新建一篇博文

1
hexo new "my blog"  //双引号内为博文标题。

然后查看/source/_post即可看到新生成的文件及其文件夹。
打开.md文件,页首的信息为Front matter

1
2
3
4
5
6
7
8
9
10
---
title: 文章主标题
subtitle:文章副标题
date: 2016-09-28 17:09:28
tags:
- 标签1
- 标签2
header-img: 对应文件夹内的图片名
comments: true/false 开启/关闭评论功能。默认开启
---

后面则是正常的markdown随便写。个人使用的是Sublime Text 3+OmniMarkupPreviewer插件。

生成和发布

生成文件

1
hexo generate

该命令下hexo会自动更新生成静态文件。产生的文件全部放置在public/文件夹内。可以将文件夹复制到任何想要的地方。

本地服务器查看

1
hexo server

开启本地服务器,默认为http://localhost:4000,在浏览器输入该地址即可查看。

部署

一键部署至服务器(首次使用需要配置)。

1
hexo deploy

其实通常使用首字母简写命令。

1
2
3
hexo g
hexo s
hexo d

扩展的使用

Hexo还支持各种markdown语法和标签插件,详情请看官方文档的标签插件辅助函数部分。
我使用了辅助函数的toc方便地生成文章目录。

1
<%- toc(page.content) %>

将这句命令插入到需要的地方即可。愉悦。

一些Bug和修正

  • tag 生成会把_draft文件夹里面草稿的 tag 也算进去,导致有空标签。待解决
  • hexo g生成文件的时候highlight.js有时会报错导致失败。已解决

    出错来自CodeBlock的语法自动检测,在_config.yml中将auto-detect关闭即可。代码块自行标注语言,可以保证语法着色的正常使用。