如何使用Hexo搭建博客

发表于 更新于 阅读次数： 本文字数： 2.2k 阅读时长 ≈ 8 分钟

一直以来都想要创建属于自己的博客，刚好最近无意中了解到了Hexo这款基于Node.js的博客框架，尝试了一番，觉得很不错，就此写一篇个人总结。

搭建环境(Windows平台)

安装文本编辑器

说明
两款文本编辑器安装其中一款即可

安装Git

  1. 访问Git for Windows，然后单击“Download for Windows” 即可开始下载最新版本的Git安装包

  2. 运行Git安装包按照安装指导完成安装，此处不再赘述

  3. 安装好Git后在GitHub上注册一个账号并登录，如果已经有GitHub账号直接登录，然后在GitHub新建一个仓库(Repository)，作为你博客的版本库。

说明
要求GitHub的仓库名必须为<your_github_user_name>.github.io

安装Node.js

  1. 访问Node.js，下载最新的Node.js LTS版本

  2. 运行Node.js安装包按照安装指导完成安装，此处不再赘述

说明
安装的时候会安装Node.js本身和npm包管理器，都是后面需要用到的工具

  1. 安装完成后运行cmd，执行以下命令查看Node.js和npm版本
1
2
node -v
npm -v

安装Hexo

说明
新旧版本Hexo安装命令有所区别，安装时以官网为准

  1. 运行cmd，执行以下命令安装Hexo
1
npm install hexo-cli -g
  1. 安装完成后执行以下命令查看Hexo版本
1
hexo version

创建并初始化项目

  1. 新建一个文件夹，用于存放博客的相关文件

说明
文件夹位置自定义即可，如果后面出现问题想推倒重来，直接删除这个文件夹即可

  1. 运行cmd，进入文件夹
1
cd hexo-lmx
  1. 运行以下命令初始化项目，初始化需要花费一些时间
1
hexo init

说明
后面有关博客的所有的命令都要通过cmd在博客文件夹下执行，本文中为hexo-lmx文件夹下

  1. 启动服务
1
hexo server
  1. 用浏览器打开 http://localhost:4000 或者 http://127.0.0.1:4000 就能看到你的博客雏形了，接下来将对你的博客进行一系列自定义配置。

说明
按Ctrl+C可以停止本地预览服务

使用

目录结构

.
├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

全局配置_config.yml

说明
配置文件的冒号:后面有一个空格

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
75
76
77
78
79
80
81
82
83
84
85
86
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
##Hexo中文配置文档：https://hexo.io/zh-cn/docs/index.html

# Site 站点信息
title: Koen's Blog #标题
subtitle:  #副标题
description: 想要出类拔萃，就要做别人不想做的事 #站点描述，给搜索引擎看的，可以是自己的座右铭
author: Koen #作者
email: koen****@gmail.com #此处换成你的电子邮箱
language: zh-Hans #语言
timezone:

# URL 链接设置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://xautlmx.github.io #博客网址
root: / #根目录
permalink: :year-:month-:day-:title.html #文章的链接格式
#参考https://hexo.io/zh-cn/docs/permalinks.html
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 写作
#Front-matter可以配置文章使用的模板、所属的分类和Tag等
#可参考https://hexo.io/zh-cn/docs/front-matter.html
new_post_name: :title.md # File name of new posts
#新文章标题
default_layout: post
#默认的模板，包括 post、page、photo、draft（文章、页面、照片、草稿）
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: YYYY-MM-DD
#参考http://momentjs.com/docs/#/displaying/format/
time_format: HH:mm:ss

# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10 #每页文章数，设置为0禁用分页
pagination_dir: page

# Disqus #Disqus评论，替换为多说
disqus_shortname:

# Extensions 拓展插件
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape #设置主题

# Deployment 部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: http://github.com/your_user_name/your_user_name.github.io
  branch: master

命令行的使用

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 查看帮助
hexo help

# 初始化一个目录
hexo init

# 新建文章
hexo new "postName"

# 新建页面
hexo new page "pageName"

# 生成网页，可以在 public 目录查看整个网站的文件
hexo generate

# 开启本地预览，可通过'Ctrl+C'关闭
hexo server

# 部署.deploy目录
hexo deploy

# 清除缓存
hexo clean

插件管理

1
2
3
4
5
6
7
8
# 安装插件
npm install <plugin-name> --save

# 升级
npm update <plugin-name>

# 卸载
npm uninstall <plugin-name>

安装主题

1
git clone <repository> themes/<theme-name>

说明
<repository>为主题的git仓库地址，<theme-name>为本地的文件夹名

编辑文章

新建文章

  1. 执行以下命令可以新建一篇文章
1
hexo new "标题"
  1. 新建后在_posts文件夹下会生成文章对应的md文件，文件名格式为：标题.md
1
2
3
4
5
6
7
8
9
title: 标题
date: 2014-11-11 11:11:11
tags:
- 标签1
- 标签2
- 标签3
categories: [分类1,分类2,分类3]
---
文章正文，使用Markdown语法书写
  1. 编辑完成后保存，依次执行以下命令生成文章的html文件，并启动本地预览
1
2
3
hexo clean all
hexo generate
hexo server

删除文章

  1. 删除source/_posts/里对应文章的md文件

  2. 执行以下命令更新博客内容

1
2
3
hexo clean all
hexo generate
hexo server

发布

本文以发布到Github托管为例，如果要部署到自己的服务器上可以参考我后面写的文章Hexo博客部署到云服务器

  1. 安装Git插件
1
npm install hexo-deployer-git --save
  1. 编辑全局配置文件_config.yml中的deploy部分，添加以下内容

说明
<your_github_user_name>要修改为你的Github用户名

1
2
3
4
5
6
# Deployment 部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: http://github.com/<your_github_user_name>/<your_github_user_name>.github.io
  branch: master
  1. 最后执行以下命令进行部署
1
hexo deploy

说明
如果出现以下提示说明部署成功

1
[info] Deploy done: git
  1. 单击GitHub项目的“Settings”，单击左侧的“Pages”，可以看到提示“Your site is published at http://xautlmx.github.io/”，访问提示中的链接就可以看到你发布到Github上的博客网站啦~

优化

配置主题

推荐几款酷炫的主题：

如果你觉得都不合你口味，那你可以到Hexo的主题列表中慢慢挑，总有一款适合你>_<

下载主题

1
git clone <repository> themes/<theme-name>

说明
务必将整个主题目录放在theme文件夹下

在全局配置文件_config.yml中将theme选项改成对应主题的文件夹名称

theme: Next

主题目录结构

.
├── languages          #国际化
|   ├── default.yml    #默认
|   └── zh-CN.yml      #中文
├── layout             #布局
|   ├── _partial       #局部的布局
|   └── _widget        #小挂件的布局
├── script             #js脚本
├── source             #源代码文件
|   ├── css            #CSS
|   |   ├── _base      #基础CSS
|   |   ├── _partial   #局部CSS
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #style.css
|   ├── fancybox       #fancybox
|   └── js             #js
├── _config.yml        #主题配置文件
└── README.md          #主题介绍

以下是截取的Next主题的配置文件

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
##Hexo中文配置文档：https://hexo.io/zh-cn/docs/index.html

# Site 站点信息
title: Koenli's Blog #标题
subtitle: #副标题
description: 讨厌自己明明不甘平凡，却又不好好努力 #站点描述，给搜索引擎看的，可以是自己的座右铭
keywords:
author: Koenli #作者
language: zh-CN #语言
timezone: Asia/Shanghai

# URL 链接设置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
#url: http://koenli.github.io #博客网址
url: http://www.koenli.com #博客网址
root: / #根目录
permalink: :abbrlink.html #文章的链接格式
#参考https://hexo.io/zh-cn/docs/permalinks.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
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 写作
#Front-matter可以配置文章使用的模板、所属的分类和Tag等
#可参考https://hexo.io/zh-cn/docs/front-matter.html
......

更多有关Next主题的配置请参考https://theme-next.js.org/docs/theme-settings/

如果对Hexo搭建博客仍有疑问可以参考Hexo官方文档