【GitHub】GitHub+Hexo搭建个人博客
个人博客widiot’s blog
1 Hexo
1.1 介绍
Hexo是基于NodeJS的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github和Heroku上：
- 超快速度
- 支持MarkDown
- 一键部署
- 丰富的插件
1.2 安装node.js
在nodejs官网下载对应系统的安装包，按提示安装。
检验安装成功：
node -v
1.3 安装hexo
npm install hexo-cli -g
Mac系统则需要：
sudo npm install hexo-cli -g
2 搭建博客
创建博客目录
hexo init username.github.io
cd username.github.io
npm install
生成静态页面，g即generate：
hexo clean
hexo g
运行，s即server：
hexo s
打开浏览器，输入地址localhost:4000即可看到博客页面。
3 发表文章
3.1 命令方式
在source/_posts目录下生成test.md文件，写入一些内容再保存：
hexo new test
然后生成静态页面，访问localhost:4000查看效果：
hexo clean
hexo g
hexo s
3.2 直接方式
在source/_posts/下新建.md文件，然后写入内容。
使用上述命令生成静态页面，访问localhost:4000查看效果。
4 配置
网站的设置大部分都在_config.yml文件中，详细配置可以查看官方文档。
下面列出简单常用配置：
- title：网站标题
- subtitle：网站副标题
- description：网站描述
- author：你的名字
- language：网站使用的语言
注意：进行配置时，需要在冒号:后加一个英文空格：
title: myblog
5 换主题
Hexo中有很多主题，可以在官网查看。这里推荐hexo-next。下面说明更换主题的一般步骤。
下载主题资源：
git clone https://github.com/theme-next/hexo-theme-next themes/next
在网站配置文件_config.yml中，配置theme，next是主题名称，具体的可查看主题的文档：
theme: next
可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置。
接下来执行调试命令查看效果：
hexo clean
hexo g
hexo s
6 部署到GitHub
在GitHub创建一个xxx.github.io的public仓库。
安装hexo-deployer-git：
npm install hexo-deployer-git --save
网站配置git，在网站的_config.yml中配置deploy，branch为分支，默认为master，可以不配置。repo为仓库地址，在github上新建仓库后，可复制地址：
deploy:
type: git
repo: <repository url>
branch: [branch]
部署，d即deploy：
hexo d
7 标签
7.1 两个确认
确认站点配置文件有：
tag_dir: tags
确认主题配置文件有：
tags: /tags
7.2 新建tags页面
hexo new page tags
此时会在source/下生成tags/index.md文件。
7.3 修改source/tags/index.md
title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false
7.4 在文章中添加tags
在文章xx.md中添加，多个Tag可按下面的格式添加：
tags:
- Tag1
- Tag2
- Tag3
其文件头部类似：
title: TagEditText
date: 2016-11-19 10:44:25
tags:
- Tag1
- Tag2
- Tag3
8 分类
8.1 两个确认
确认站点配置文件有：
category_dir: categories
确认主题配置文件有：
categories: /categories
8.2 新建categories页面
hexo new page categories
此时会在source目录下生成categories/index.md文件。
8.3 修改categories/index.md
title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false
8.4 在文章中添加categories
在文章xx.md中添加：
categories:
- cate
其文件头部类似：
title: TagEditText
date: 2016-11-19 10:44:25
categories:
- cate
9 评论功能
安装gitment：
npm install gitment --save
在 https://github.com/settings/applications/new 进行注册，获取Client ID和Client Secret。打开themes/next目录下的_config.yml文件进行修改并保存：
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: <username> # MUST HAVE, Your Github Username
github_repo: <username>.github.io # MUST HAVE, The name of the repo you use to store Gitment comments
client_id: 76xxxxxxxxxxxxxxxx5f # MUST HAVE, Github client id for the Gitment
client_secret: 4axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxca # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
生成网站和提交网站：
hexo g
hexo d
点击文章下方的初始化评论按钮。
文章名太长会导致评论功能开放失败出现Error: Validation Failed错误。修改文件next/layout/_third-party/comments/gitment.swig，将id部分修改为id: '{{ page.date }}'：
{% if page.comments %}
<script type="text/javascript">
function renderGitment(){
var gitment = new {{CommentsClass}}({
id: '{{ page.date }}',
owner: '{{ theme.gitment.github_user }}',
repo: '{{ theme.gitment.github_repo }}',
{% if theme.gitment.mint %}
lang: "{{ theme.gitment.language }}" || navigator.language || navigator.systemLanguage || navigator.userLanguage,