Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装Hexo

我的开发环境是Ubuntu 14.04,node及Hexo的版本为:

hexo: 3.2.0
hexo-cli: 1.0.1
os: Linux 3.16.0-36-generic linux x64
http_parser: 2.6.0
node: 5.4.0
v8: 4.6.85.31
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 47
openssl: 1.0.2e

Hexo依赖node.js,所以先要安装node.js、npm以及git等,具体安装请参考官方介绍,安装好node等环境后,在shell中输入

1
2
sudo npm install hexo-cli -g
sudo npm install hexo --save

等待几分钟,Hexo即可搭建完成。

配置Hexo

init会自动安装依赖,不需要再npm install

1
2
hexo init <folder>
cd <folder>

本地查看效果

在shell中执行hexo server之后,访问localhost:4000查看效果,也可以通过hexo server 0.0.0.0:4000使得其他主机能够看到效果。

部署到github.io上

在github上新建一个仓库(repository),名字必须是user.github.io,其中user是你的github用户名。
修改Hexo项目中的_config.yml文件,把最后修改为

1
2
3
4
deploy:
type: git
repository: git@github.com:user/user.github.io.git
branch: master

其中,user是你的github用户名,运行hexo deploy,会将当前Hexo同步到github,此时访问http://user.github.io/即可看到刚配置好的博客。

问题1. 执行hexo deploy后,出现ERROR Deployer not found: git

解决办法,在当前目录下执行sudo npm install hexo-deployer-git --save即可。

绑定自己的域名

我是想要将一个二级域名blog.pfchai.com绑定到github.io上,首先,需要更改DNS配置,添加一个新的配置:记录类型为CNAME,主机记录为blog,记录值为pfchai.github.io,同时还需要在项目的根目录下新建一个名为CNAME的文件,文件内容形如:

1
blog.pfchai.com

将CNAME文件放在source文件夹下,每次上传就不会删除掉了,其他readme等文件也可以放在这个目录下。

部署到云主机上

由于国内访问github的速度实在太慢,用过一段时间coding.net,发现有时候会莫名其妙连不上,果断改为部署在自己的云主机上。

云主机上配置环境

我的云主机系统是Ubunt,首先需要安装Nginx,安装很简单

1
sudo apt-get install nginx

配置Nginx,修改/etc/nginx/site-available/default文件,添加

1
2
3
4
5
6
7
8
9
server {
listen 80 ;
server_name blog.pfchai.com;

location / {
root /home/to/Blog;
index index.html index.htm;
}
}

重启Nginx

1
sudo service nginx restart

修改域名配置

将域名的A记录指向云主机的ip。我现在的网站同时托管在github page和云主机上,同一个域名下,海外地址解析到github page,国内域名解析到云主机。

自动部署

Hexo安装插件hexo-deployer-rsync

1
npm install hexo-deployer-rsync --save

修改Hexo的配置文件类似为下面的形式:

1
2
3
4
5
6
7
8
9
10
11
deploy:
- type: rsync
host: 182.254.148.171
user: user
root: Blog
delete: true
verbose: true
- type: git
repository:
github: git@github.com:pfchai/pfchai.github.io.git
branch: master

常用命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

安装主题

安装主题很简单,将主题复制到hexo项目中的theme文件夹下,然后再在项目的_config.yml文件中将主题改为要换的主题名字即可。
有的主题可能需要安装其他第三方的库,具体看对应主题的介绍。

找了几个比较喜欢的主题:

hexo-theme-yelee
hexo-theme-yelee

hexo-theme-yilia
hexo-theme-yilia

hexo-theme-spfk
hexo-theme-spfk

maupassant-hexo
maupassant-hexo
注: 安装maupassant过程中遇到问题参考这个

自定义页面

404页面

GitHub Pages有提供制作404页面的指引
直接在source目录下创建404.html或者404.md文件就可以。
推荐使用腾讯公益404

about页面

1
hexo new page "about"

执行上述命令后,会创建\source\about\目录,并在该目录下创建index.md文件,打开输入关于信息即可

Fork me on Github

这里获取需要的代码,添加到themes/yilia/layout/layout.ejs文件的中即可,注意要把代码中的github项目名称改成自己的。

SEO

网站SEO的思路有两个,一个建立sitmaps、robots等文件,让搜索引擎更好的抓取网站内容,另一个思路是增加外链数量,工具可以先研究这个站长工具

1. 建立Google Sitemaps

使用Google Sitemaps 有助于加速网页的查找,这也是抓取网页和编制索引重要的第一步。Hexo中建立Sitemaps很简单,只需要安装一个hexo-generator-sitemap插件即可。

安装 hexo-generator-sitemap

1
npm install hexo-generator-sitemap --save

配置
_config文件中加入

1
2
3
4
5
6
Plugins:
- hexo-generator-sitemap

# sitemap
sitemap:
path: sitemap.xml

2. 添加RSS

安装插件hexo-generator-feed
_config.yml文件中增加配置

1
2
3
4
5
feed:
type: atom
path: atom.xml
limit: 20
hub:

在主题中增加RSS订阅链接

1
2
3
# SubNav
subnav:
rss: "/atom.xml"

3. 建立robots.txt

谷歌、雅虎等搜索引擎爬取网站页面的时候,会首先根据网站根目录下的robots文件的约定来爬取网站内容。
在source目录下新建robots.txt文件,写入下面内容

1
2
3
User-agent: *
Disallow:
Sitemap: http://blog.pfchai.com/