【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 搭建博客

创建博客目录<username>.github.io：

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创建一个<username>.github.io的public仓库，如果你的用户名是xxx,则需要创建一个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,