基于 Hexo 搭建个人博客

1 安装 Git 和 Node.js

git 与 node.js 是安装 hexo 的前提条件。

假设对于 macos 来说已经安装了 homebrew,对于 Ubuntu 来说已经安装好了 Linuxbrew:

安装及配置 git:

1
2
3
4
5
// 安装 git
brew install git
// 配置 git
git config --global user.name "xxx"
git config --global user.email xxx

安装 nvm:
brew install nvm
然后在 .zshrc 或者 .bashrc 末尾添加如下:

1
2
export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"

查看 node.js 版本:
nvm ls-remote

安装相应版本的 node:
nvm install v0.12

使用某个版本的 node:
nvm use 0.12

设置当前shell使用的默认版本的node:
nvm alias default 0.12.18

测试 git 和 node.js 是否安装成功。

1
2
3
4
git --version
node -v
// 最新的 node.js 已经集成了 npm 这个包管理工具,这个 npm 在安装 hexo 的时候会用到
npm -v

2 安装 Hexo

npm install hexo-cli -g

如果安装失败,则替换为如下命令:
npm install hexo-cli -g --no-optional --save

3 建立个人博客目录

1
2
3
4
5
6
folder是指你的博客的目录名,一般建立在主目录或其子目录下,不要建立在根目录等其他地方,方便查询管理
hexo init folder
// 切入到folder中
cd folder
// 安装必要的插件
npm install

4 配置博客目录下的 _config.vml 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 这是我博客的_config.vml文件中的内容
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Jason Tan in Cradle Studio
subtitle: Think Different
description: Be all you wanna be!
author: Jason Tan
language: zh-cn
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year.:month.:day-:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MM-DD-YYYY
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: yilia

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:cuckootan/cuckootan.github.io.git
branch: master

5 Hexo 中的常用命令

1
2
3
4
5
6
7
8
9
10
// 会自动地在博客目录下的source/_posts/中创建New-Post.md文件
hexo new "New Post"
// 会自动在博客目录下的source/中创建New-Page目录
hexo new page "New Page"
// 清理缓存等
hexo clean
// 也即hexo generate,生成静态页面至public目录
hexo g
// 也即hexo server,用于在本地查看博客,执行后,在浏览器中输入localhost:4000即可
hexo s

6 编写博文

6.1 分割线上的项目

执行
hexo new "New Post"
后,该文件里会自动生成以下内容:

1
2
3
title: New-Post
date:
tags:

要想在新建一个post时,默认显示更多项目,可以在博客目录下的scaffolds目录中的post.md文件中添加。比如要添加categories,则在后边加上
categories:
即可。

事实上,可以添加的项目包括:

1
2
3
4
5
6
7
8
layout	# 指定排版格式,默认为default_layout。也可设为false,表示不使用任何排版格式
title # 标题
date # 日期
updated # 最后修改日期
comments # true表示允许评论,false表示不允许
tags # 标签
categories # 类别
permalink # 指定新的permalink文件名覆盖默认permalink文件名(在博客目录下的_config.vml中)

这些项目与正文用 分割开来

6.2 分割线下的正文

  • 在正文中,如果如果不想博文在首页全部显示,并能出现 阅读全文 按钮效果,则可以在相应位置添加
    <!--more-->

例如:

1
2
3
此处及以上的内容会在首页显示
<!--more-->
一下是在首页隐藏的部分

  • 对于代码块高亮问题

仍然可以使用markdown语法,也可以使用:

1
2
3
{ % codeblock %}
alert(‘Hello World!’);
{ % endcodeblock %}

6.3 如何在正文中插入图片

1
2
3
// 首先在博客目录下的source目录中新建一个目录images,用于存放图片
// 然后在正文中需要添加图片的地方加上。其中小括号里指的是该图片的绝对路径(根目录为source目录)。
![图片描述](/images/xxx.xxx)

7 部署到GitHub上

首先输入以下命令:
npm install hexo-deployer-git --save

然后,在github上建立博客所在仓库。Github官方规定,仓库名为用户名.github.io。

1
2
3
4
5
6
7
8
9
// 在博客目录下的_config.vml中的最后面加上以下内容
# Deployment
## 部署设置
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git # 部署类型
// 这里使用的github上传方式时ssh,而非http,因为方便。ssh设置详见github官方帮助页面中的ssh
repository: git@github.com:jast923/jast923.github.io.git # 个人博客所在仓库地址。git@github.com:是固有字段,jast923是我的github用户名,jast923.github.io是我的博客所在仓库名,不要忘记最后面要加上git
branch: master # 分支

设置之后,用下命令将其部署到github上:

1
2
3
4
// 在本地进行任何操作之后,都要执行此命令,甚至有时候还会要先执行hexo clean
hexo g
// 也即hexo deploy,以后每次想要将本地博客的改变同步到github上,都要先执行hexo g,然后执行hexo d
hexo d

完了之后,就可以在浏览器中输入 用户名.github.io(与仓库名相同) 即可查看博客。

8 切换主题

可以在hexo官方网站上找到很多主题,也可以在其他地方上找到。这些主题通常都会存放在github上。

比如:
https://github.com/wuchong/jacman,这是jacman主题所在仓库,可以执行下面的命令,下载到本地themes目录中,并切换成这个主题。

1
2
3
4
5
6
7
8
9
// 通常主题编写作者都会在github中指出主题相应的安装方法,主要是要注意一定要下载到博客目录下的themes目录中
git clone https://github.com/wuchong/jacman themes/jacman
// 切换成该主题
// 打开博客目录下的_config.vml文件,在后面的位置找到theme: 改写成
theme: jacman

// 应用改变
hexo g
hexo d

9 配置主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
# Header
menu:
主页: /
所有文章: /archives
关于我: /about

# SubNav
subnav:
github: "https://github.com/cuckootan"
weibo: "http://weibo.com/jsont923"
# rss: "#"
# zhihu: "#"
#douban: "#"
#mail: "#"
#facebook: "#"
#google: "#"
twitter: "https://twitter.com/cuckootan"
#linkedin: "#"

rss: /atom.xml

# Content
excerpt_link: more
fancybox: true
mathjax: true

# 是否开启动画效果
animate: true

# 是否在新窗口打开链接
open_in_new: false

# Miscellaneous
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: /img/avatar.jpg
#是否开启分享
share: true
#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: false
#是否开启云标签
tagcloud: true

#是否开启友情链接
#不开启——
#friends: false
#开启——
friends:
Andrew Liu: http://andrewliu.tk/
Xi Chen: http://abbeychenxi.net/
Le Lu: http://rocklule.me/
Qing Su: http://pastqing.github.io/
Qianwen Ma: http://misok.github.io/
Ruotong Qi: http://beatrice7.tk/

#是否开启“关于我”。
#不开启——
aboutme: false
#开启——
aboutme:

10 申请域名

dot.tk网站 或者 Freenome网站 获取一个免费的顶级域名(这两个网站貌似是一家的)。或者是在 NameCheap 上购买一个域名。

使用国内的 dns 服务,这里以 腾讯DnsPod 为例。

  • 申请账号;
  • 添加域名;
  • 在相应域名中添加 CNAME 记录,记录值为 用户名.github.io
  • 然后在申请域名的网站上对申请的域名自定义 dns 地址,这里为 f1g1ns1.dnspod.netf1g1ns2.dnspod.net

11 将域名和博客绑定在一起

在博客目录下的source目录中,建立一个名为CNAME的文件,在其中只填写所注册的域名(不要加 http:// 或 https://)。

完了之后再执行:

1
2
hexo g
hexo d

然后在浏览器中输入域名,即可查看博客。


Reference