前言

GitHub Pages是一种静态站点托管服务，旨在直接从GitHub存储库托管您的个人，组织或项目页面。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

创建个人GitHub Page

在GitHub并创建一个名为username.github.io的仓库，username是指GitHub的用户名（或组织名称）。
克隆仓库

1
git clone https://github.com/username/username.github.io

进入工程目录并添加index.html

1
2
cd username.github.io
echo "Hello World">index.html

提交

1
2
3
git add --all
git commit -m "Initial commit"
git push -u origin master

到此个人页面创建完成，用浏览器打开username.github.io即可查看创建的个人页面。

安装Hexo

安装 Hexo 相当简单，但是在安装前必须安装Node.js ( 6.9及其以上版本 ) 和Git。
只需要使用 npm 即可完成 Hexo 的安装。

1
npm install -g hexo-cli

使用Hexo创建博客

初始化我们的博客

1
2
3
hexo init <folder>
cd <folder>
npm install

新建完成后，指定文件夹的目录如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml 网站的配置信息，可以在此配置大部分的参数
source 资源文件夹是存放用户资源的地方。
themes 主题文件夹。Hexo 会根据主题来生成静态页面。
本地预览

1
2
3
hexo new test_my_site	#新建博客
hexo g					#生成
hexo s					#启动服务

完成后，打开浏览器输入地址：localhost:4000，即可看到我们写出第一篇博客。
常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install hexo -g 	#安装Hexo
npm update hexo -g		#升级 
hexo init				#初始化博客

hexo n "my_blog"		#hexo new 新建文章
hexo g					#hexo generate 生成
hexo s					#hexo server 启动服务预览
hexo d 					#hexo deploy 部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

推送网站

上面只是在本地预览，接下来要做的就是就是推送网站到GitHub Pages，在博客根目录里的_config.yml文件为站点配置文件
下一步将我们的Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为：
deploy:
type: git
repo: 填写在GitHub上创建仓库的完整路径，记得加上 .git
branch: master
注意：冒号后面必须有个空格
要将博客部署到我们GitHub的仓库里，我们还需安装Git部署插件。

1
npm install hexo-deployer-git --save

最后依此执行清楚、生成、部署命令

1
2
3
hexo clean 
hexo g 
hexo d

最后打开https://username.github.io 即可查看部署后的博客。

更换主题

如果你不喜欢Hexo默认的主题，可以更换不同的主题，主题传送门：Themes 我自己使用的是Concise主题，可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Conciset主题，在blog目录中打开命令行输入：

安装

因为这个主题使用了 less 编译，Hexo 默认的编译器为 hexo-renderer-stylus 要切换为 hexo-renderer-less

1
npm install hexo-renderer-less --save

安装主题

1
git clone https://github.com/sanonz/hexo-theme-concise.git themes/concise

在 _config.yml 配置文件中 把 theme 值改为 concise.
复制 themes/concise/_config.example.yml 配置文件为 themes/concise/_config.yml

配置

根据个人情况，修改 themes/concise/_config.yml 配置文件

小技巧

可以关闭单个文章的评论，把 comments 设置为 false，默认为 true，例如：

1
2
3
4
5
---
title: Hello World
date: 2017-10-20 20:00:00
comments: true
---

访问 Tags 页面 404，执行一下命令解决

1
hexo new tags "标签"

添加分类列表，设置文章的 categories 字段然后访问 /categories/front-end

1
2
3
4
5
---
title: Hello World
date: 2017-10-20 20:00:00
categories: front-end
---

单独设置归档(Archive)每页显示文章数量，例如每页 30 篇

1
2
3
4
# Archive page setting
archive_generator:
  per_page: 30
  order_by: -date

列表文章显示 阅读更多 按钮，在需要截断的地方插入“ ”注释

创建Tag页面

1
$ hexo new page "tags"

编辑刚新建的页面，将页面的类型设置为tags，主题将自动为这个页面显示标签云。页面内容如下：

1
2
3
4
5
6
---
title: Tagcloud
date: 2017-06-22 12:39:04
type: "tags"
comments: false
---

注意：如果有启用多说 或者Disqus评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false

创建Categories页面

创建分类页和Tag页是差不多的步骤。
$ hexo new page “categories”

1
2
3
4
5
6
---
title: categories
date: 2017-06-22 12:39:04
type: "categories"
comments: false
---

添加菜单

在菜单中添加链接。编辑 主题配置文件 ，添加 tags 到 menu 中，如下:

1
2
3
4
5
6
7
8
menu:
  home: /
  categories: /categories/
  #about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

添加评论

安装Gittalk,

在blog目录下命令行输入

1
npm i --save gitalk

创建OAuth Application

Gitalk 需要一个 Github Application，在GitHub setting下的Developer settings中new一个Application，然后填写相应的参数。
完成后会生成相应的Client ID 和Client Secret。

修改主题配置文件

themes/concise/_config.yml根据个人情况修改github comment相关内容。

1
2
3
4
5
6
7
8
9
10
# github comment 
git_commit:
  enable: true
  client_id: 7256f0c0716291c31927
  client_secret: 69d82bcc43fd6e507b2fc667ba9e08c2eb477718
  repo: legstrong.github.io
  owner: legstrong
  admin:
    - legstrong
  per_page: 10