本篇主要介绍使用Hexo+Pages搭建个人博客的流程。使用 Hexo 博客框架搭建，解析markdown文章，生成静态页面，将页面托管到 github / coding 服务器上。github / coding 都有pages 服务，提供免费的静态网页托管和演示服务。
搭建步骤：
- 安装git，nodejs
- 安装hexo
- 本地搭建站点（线下访问）
- 部署到github/coding（线上访问）
- 站点配置
1. 安装hexo
1.安装Git 。安装完毕后，在任意文件夹下鼠标右击即可打开 Git Bash，输入命令，进行Git操作。
$ git version # 查看Git版本，验证是否安装成功2.安装Node.js。Hexo是基于nodejs的博客框架，而且nodejs还集成了npm包管理工具。
$ node -v # 查看nodejs版本，验证是否安装成功3.安装hexo：
$ npm install hexo --save # 安装hexo
$ npm install hexo-cli -g # 安装hexo命令行模式
$ hexo -v # 查看hexo版本，验证是否安装成功2. hexo建站
1.新建一个blog文件夹，打开blog文件夹，Git Bash。
2.hexo初始化：hexo init
3.安装依赖包：npm install
4.初始化完成，在blog下就会生成以下文件目录：
.
├── node_modules # 依赖模块
├── scaffolds # 文章模板
├── source # 用户源文件：页面，文章markdown文件
| └── _posts # 创建的文章
└── themes # 主题
├── .gitignore # git忽略文件信息
├── _config.yml # 站点配置文件
├── package.json # 已安装插件映射表，下次只需npm install即直接安装表插件5.hexo本地生成静态页面
$ hexo clean # 清理本地静态文件；
$ hexo generate # 生成静态页面，即public文件夹；
$ hexo server # 启用hexo本地服务器；
# 注：Hexo 3.0 把服务器独立成了个别模块，您必须先安装 hexo-server 才能使用。
# hexo-server安装命令：npm install hexo-server --save这时，打开浏览器在地址栏输入http://localhost:4000即可本地访问静态博客页面。
3. 配置github/coding pages
github和coding可以双线配置，也可以选择其中一个配置。推荐双线配置，coding用于国内访问速度较快，github用于境外访问。
1.登录github，New repository：yourname.github.io。其中yourname是你的github用户名，github强制后缀为github.io才能启用github pages服务。
2.登录coding，新建仓库：yourname.coding.me，打开静态pages服务。其中yourname是你的coding用户名，coding不强制后缀为coding.me。
其中yourname是你的coding用户名，coding不强制后缀为coding.me。
3.Git Bash配置git用户信息：
$ git config --global user.name "YourName"
$ git config --global user.email "YourEmail"4.配置网络传输协议
在管理Git项目时，一般使用ssh或https作为安全传输协议，任选其一即可。
(1) SSH协议
①SSH秘钥：
$ ssh-keygen -t rsa -C "[email protected]" # 生成rsa秘钥
$ cd ~/.ssh # 进入虚拟目录ssh文件中
$ cat id_rsa.pub # 显示id_rsa.pub文件内容②复制秘钥至github/coding->用户setting->SSH keys，New SSH Key；
③验证是否添加成功
$ ssh -T [email protected] # 验证github是否添加成功
$ ssh -T [email protected] # 验证coding是否添加成功④编辑站点配置文件_config.yml：
deploy:
type: git
repo:
github: [email protected]:yourname/yourname.github.io.git
coding: [email protected]:yourname/yourname.coding.me.git
branch: master(2) HTTPS协议
①直接编辑站点配置文件_config.yml：
deploy:
type: git
repo:
github: https://github.com/liziczh/liziczh.github.io.git
coding: https://git.coding.net/liziczh/liziczh.coding.me.git
branch: master②验证github/coding用户名和密码。
4. 部署到github/coding
1.安装Git部署插件：
$ npm install hexo-deployer-git --save2.部署：
$ hexo clean # 清理本地静态文件；
$ hexo generate # 生成静态页面，即public文件夹；
$ hexo deploy # 部署到github/coding；3.部署完毕，站点文件目录如下：
.
├── .deploy_git # （新增）hexo deploy 生成的git部署文件
├── public # （新增）hexo generate 生成的静态文件
├── db.json # （新增）hexo generate 生成的数据
├── node_modules # 依赖模块
├── scaffolds # 文章模板
├── source # 用户源文件：页面&文章的markdown文件
| └── _posts # 文章
└── themes # 主题
├── .gitignore # git时需忽略文件
├── _config.yml # 站点配置文件
├── package.json # 已安装插件映射表，下次只需npm install即直接安装表插件站点搭建完毕，打开浏览器在地址栏输入以下链接可随时访问自己的博客了。
- github pages：http://yourname.github.io
- coding pages：http://yourname.coding.me
5. 站点配置
区分配置文件：
| 配置文件 | 路径 |
|---|---|
| 站点配置文件 | D:/blog/_config.yml |
| 主题配置文件 | D:/blog/themes/你的主题/_config.yml |
打开站点配置文件blog/_config.yml，自行发挥，配置完毕，重新部署 hexo g -d；
# 注意：yaml语言使用缩进表示层级关系。
# 注意：键值对中的冒号（:）后面有一个半角空格。
# 网站
title: #网站标题
subtitle: #网站副标题
description: #网站描述
keywords: #关键字
author: #你的名字,文档作者
language: #网站的语言
timezone: #时区，中国：Asia/Shanghai
# 网址
url: https://yoursite.com #你的网址url
root: /
permalink: :year/:month/:day/:title.html #文章永久链接
permalink_defaults:
# 主题
theme: landscape # 主题文件的名称
# 部署
deploy:
type: git
repo:
github: [email protected]:yourname/yourname.github.io.git
coding: [email protected]:yourname/yourname.coding.me.git
branch: master详细配置请参考hexo配置，此处不再赘述。
6. 主题变更
1.hexo默认主题为landscape，可以到Themes|Hexo选择自己喜欢的主题，复制主题在github仓库的url。
2.在themes文件夹下，打开GitBash，克隆主题至themes文件夹中。
$ git clone https://github.com/theme-next/hexo-theme-next.git克隆之后，记住删除themes\你的主题名中的.git，.github，.gitignore等Git仓库文件。
3.更改站点配置文件_config.yml：
theme: 主题文件名4.编辑结束，重新部署：
$ hexo clean # 清理缓存文件；（不清理也可以部署，推荐先清理）
$ hexo g -d # 生成静态页面后直接部署；部署完毕之后，进入以下链接刷新就可以看到你的新主题了。
- github pages：http://yourname.github.io
- coding pages：http://yourname.coding.me
7. 写作
1.新建：在blog文件夹下，打开Git Bash，新建文章：
$ hexo new post "title"2.编辑：在source/_post下可以编辑你新建的文章。
3.编辑完毕，重新部署：
$ hexo clean # 清理缓存文件；（不清理也可以部署，推荐先清理）
$ hexo g -d # 生成静态页面后直接部署；8. 文档的Front-matter
Front-matter 是文档最上方以 --- 分隔的区域，用于指定文档一些的参数。
---
title: 文章标题
date: yyyy-MM-dd hh:mm:ss
tags:
categories:
comments: true
---
# 注意：键值对中的冒号（:）后面有一个半角空格。| 参数 | 值 | 描述 |
|---|---|---|
| layout | post page draft false |
文章【默认值】 页面 草稿 不处理 |
| title | 文本 | 标题 |
| date | yyyy-MM-dd hh:mm:ss | 文件建立日期 |
| update | yyyy-MM-dd hh:mm:ss | 文件更新日期 |
| comments | true false |
开启文章评论功能，默认true |
| tags | 标签（只适用于post） | |
| categories | 分类（只适用于post） | |
| permalink | url | 永久链接 |
不要处理我的文章：将文章Front-Matter中的
layout: false；
9. 文章的[标签]与[分类]
只有文章（post）支持[标签]和[分类]。
1.添加[tags]、[categoies]、[about]页面：
$ hexo new page "tags"
$ hexo new page "categories"
$ hexo new page "about"2.在source文件夹中找到新建页面：
①编辑tags.md：添加layout:"tags"；
②编辑categories.md：添加layout:"categories"；
③编辑about.md，自行发挥。
3.匹配站点配置文件：
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories4.匹配主题配置文件中menu：
menu:
home: /
tags: /tags
categories: /categories
archives: /archives
about: /about5.Front-matter中的[tags]写法：
tags:
- tag_1
- tag_2
# 标签之间相互独立6.Front-matter中的[categories]写法：
categories:
- 运动
- [运动, 球类运动]
- [运动, 球类运动, 网球]
# 类别存在层级关系重新部署之后，个人博客的基本功能，写作，标签，分类，归档就全部实现了。
10. 绑定自己的域名
若不喜欢域名后缀为github.io或coding.me，可以自己注册一个域名进行绑定。
2.添加CNAME文件：在blog\source下，添加一个CNAME文件 (无文件后缀)，内容为你的域名example.com。
3.Github Pages域名解析：
①添加四个A记录：主机记录为@，记录值为185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153。
②添加一个CNAME记录：主机记录为www，记录值为yourname.github.io。
4.Coding Pages域名解析：
①打开控制台ping pages.coding.me，获取IP。
②添加一个A记录：主机记录为@，记录值为ping得的IP。
③添加一个CNAME记录：主机记录为www，记录值为pages.coding.me。
由于国内访问Github Pages速度较慢，所以我将Coding Pages解析线路设为默认，供国内访问；将Github Pages解析线路设为境外，供国外访问。
Chrome无法访问链接问题
问题描述：部署页面之后，Chrome无法访问链接，提示你的连接不是私密连接......
解决方案：前往chrome://net-internals/#hsts，在Delete domain中输入无法访问的网页地址。
附：hexo常用命令
| 命令 | 描述 |
|---|---|
hexo version |
显示 Hexo 版本 |
hexo init [folder] |
新建一个网站 若未设置folder，默认为当前文件夹； |
hexo new [layout] "title" |
新建一篇文档，文档布局由layout决定 |
hexo clean |
清理缓存文件 |
hexo generatehexo g |
生成静态页面 |
hexo serverhexo s |
启用服务器，http://localhost:4000 |
hexo deployhexo d |
部署文件 |
hexo g -dhexo d -g |
生成静态文件后直接部署 部署之前先生成静态文件 |
若想了解更多关于hexo命令的介绍，请参考指令 | hexo