基于 Hexo 搭建个人博客

1 安装Git和Node.js

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

对于mac来说(假设已经安装了brew):

安装及配置git:

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

安装nvm:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh | zsh

查看node版本:
nvm ls-remote

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

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

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

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

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

对于Ubuntu来说:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 安装git
sudo apt-get install git
// 配置git
git config --global user.name "xxx"
git config --global user.email xxx
// 要安装node.js,首先要安装nvm
wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | zsh
// 查看node的所有版本
nvm ls-remote
// 然后通过nvm安装node.js如果输入nvm没有任何正确的反应,则可能是路径没有添加到你当前所使用的shell上,比如用的是zsh,但添加到了bashrc中,这个时候就要将其改到zshrc中,然后source(最新版的node.js好像没有这个问题了)。
// 假设安装0.12这个版本
nvm install v0.12
// 如果安装了多个版本的node.js,选择一个使用版本。
nvm use 0.12.2
// 将此版本设为默认的node.js
nvm alias default 0.12.2
// 测试git和node.js是否安装成功
git -v
node -v
// 最新的node.js已经集成了npm这个包管理工具,这个npm在安装hexo的时候会用到
npm -v

2 安装Hexo

从这里开始,之后的步骤均适合Ubuntu和Mac。
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网站获取一个免费的顶级域名(这两个网站貌似是一家的)。

  1. 申请自己喜欢的域名. 例如 cuckootan.tk。
  2. 在 use your new domian 选择use DNS。
  3. 通过自己的 username.github.io,获取对应的ip地址,具体步骤如下 :
  • 打开终端,输入命令 ping username.github.io
  • 记录下方出现的ip地址,填写到dns设置中
  • Registration length选择12months
  • 然后注册个人账户
  • 会发一封激活邮件到邮箱,请注意激活

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

在博客目录下的source目录中,建立一个名为CNAME的文件:

1
2
// 在其中只填写所注册的域名,不要加https://
vim CNAME

完了之后再执行:

1
2
hexo g
hexo d

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


Reference