博客上线几个月了，发现hexo非常容易上手，而且搭建也是比较简单，而且零成本，博客是使用markdown文件来解析的，并且使用json来进行数据储存，完全不需要数据库来储存数据，文档也是比较完善，hexo官方的插件也很多，可以满足大部分的需求，比较建议去搭建一个来试试，开发过程中也是比较轻松的，中途的坑也不多，今天把搭建博客的教程呈上，想动手的可以看看。

安装Node

首先，你要安装好Node，hexo需要用到Node的NPM（一个资源库管理工具）工具，如果没有安装过node的可以去Node官网下载，安装完了用cmd命令查看node的版本

1
node -v

如果出现以下信息，说明安装成功

1
v8.9.4

安装Git

当安装完Node之后，需要安装Git客户端，进入官网安装，安装完了可以用cmd命令查看Git的版本

Mac 用户

您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

1
git --version
1
git version 2.15.1.windows.2

安装Hexo脚手架工具

如果Git跟Node都安装完成了之后，就开始进入正式环节了！！！，首先，执行以下命令安装Hexo脚手架工具

1
$ npm install -g hexo-cli

建立自己的博客

1
2
3
$ hexo init my-blog
$ cd my-blog
$ npm install

部署完了博客网站之后，可以看到整个博客网站的目录如下

1
2
3
4
5
6
7
8
.
├── _config.yml #博客配置文件
├── package.json #模块和依赖项
├── scaffolds
├── source  #文章
|   ├── _drafts #草稿目录
|   └── _posts #发布的文章目录
└── themes #主题

文件说明

_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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 网站标题如
subtitle: 网站副标题
description: 网站描述
author: 网站作者
language: 网站的语言
timezone:   网站的时区，默认使用的是电脑的时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 网站地址：你不部署到github的地址，例如https://schxxxx.github.io/xxxx/
root: 网站根目录,建议是用'/'
permalink: 文章的y永久链接格式，默认就好 :year/:month/:day/:title/
permalink_defaults: 永久链接中各部分的默认值，不用填

# Directory
source_dir:资源文件夹，存放文章用的：source
public_dir: 公共文件夹，用来存放编译之后的文件：public
tag_dir: 标签文件夹：tags
archive_dir: 归档文件夹，也就是你的全部文章生成的目录：archives
category_dir: 分类文件夹：categories
code_dir: Include code文件夹：downloads/code
i18n_dir: 国际化（i18n）文件夹: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: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 每一页显示的文章：10
  order_by: -date
  
# 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
time_format: HH:mm:ss

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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: 主题：indigo

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: 存放你博客的仓库地址
  branch: master

package.json

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
{
  "name": "hexo-site",
  "version": "1.0.0",
  "private": true,
  "hexo": {
    "version": "3.4.4"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-asset-image": "^0.0.3",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-json-content": "^3.0.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-helper-qrcode": "^1.0.2",
    "hexo-qiniu-sync": "^1.4.7",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-less": "^0.2.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "valine": "^1.1.9-beta3"
  }
}

写作

说完配置文件，就要说说写作的技巧，我们要使用命令行工具创建一篇文章

1
2
3
hexo new [layout] <title>
# layout是文章的布局，默认是post布局
# 例如：hexo new post '我的第一篇文章'

hexo还有一个文件夹是草稿文件夹_draft，可以用理解成私密文章的功能，只要有不想显示的文章但是又不想删除，就可以把文章拖进去_draft文件夹就可以实现隐藏的功能了，也可以用hexo的命令将文章放到草稿文件夹

1
hexo publish <layout> <filename>

编译文章

当我们写好文章的时候，需要预览一下，hexo的编译命令

1
$ hexo generate

可以简写为

1
$ hexo g

预览文章

1
$ hexo server

可以简写为

1
$ hexo s

如果需要预览draft文件夹下面的文件，需要在后面加上--draft参数

1
hexo s --draft

部署博客

当写完文章时，需要对文章编译然后上传，部署到GitHub仓库，我们去GitHub创建一个仓库然后开启GitHubPage

开启GitHub Page

是不是感觉这个域名太长太难记了，可以去设置自定义的域名，如果你有域名的话可以进入管理控制台里面的dnsj解析那里设置新建一个解析

记录类型选CNAME，主机记录可以写你喜欢的名称，解析线路默认的就行了，记录值需要填写你的GitHub的个人主页，格式是你的GitHub名称.github.io，记住不能写http或者https，然后点击确定。
接下来就在GitHubpage那里写上刚刚设置好的值

设置好域名之后，在source文件夹下面新建一个CNAME文件，然后写入以下的内容

1
您设置的域名,例如：xxx.xxx.com

上传项目

要上传项目，需要用到hexo的GitHub插件hexo-deployer-git，首先用npm下载这个插件

1
$ npm install hexo-deployer-git --save

然后在_config.yml增加以下配置

1
2
3
4
5
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

刚配置好了deploy之后，就可以运行以下命令上传项目了

1
hexo d

完成项目!!!