Hexo为一快速、简洁且高效的博客框架。
本文主要简单记录了通过Hexo，借助Github Pages搭建个人博客，并配置主题为NexT的过程，方便后续自己在新环境上重新部署。
也因此有些操作可能不够详尽，并且可能已经不是当下的最佳实践了，请谨慎阅读。

软件安装

安装并配置Git

安装Git

# 本地执行如下代码
git config --global user.name "Username"            # Username为GitHub的注册用户名
git config --global user.email "Email"              # Email为GitHub的注册邮箱
git config --list                                   # 查看已设配置(Username,Email)是否正确

安装Node.js

Node.js 下载链接

安装Hexo

1 2	npm install -g hexo-cli npm install hexo-deployer-git # 安装hexo-deployer-git插件

创建并配置Github账号

创建Github账号

访问Github官网进行注册

创建GitPages

即创建与账号同名的Repository，例如GitHub帐号是yourid，则新建的Repository名称应为yourid.github.io
创建之后可浏览器访问yourid.github.io，如果能够正常访问，则证明GitPages创建成功

生成本地SSH Key

本地生成一个SSH Key

1	ssh-keygen -t rsa -C "Email" # Email为GitHub的注册邮箱

根据页面提示输入相关信息，可以连续回车采取默认配置。
最终生成结果如下，*.pub即为公钥文件。

复制公钥内容到Github账户信息中

打开~/.ssh/id_rsa.pub文件，复制里面的内容，如下
打开Github官网，登录后进入到个人设置(点击头像->setting)
点击右侧的SSH Keys，点击Add SSH key
填写title之后，将之前复制的内容粘贴到Key框中
点击Add key提交

测试SSH是否配置成功

# 本地执行如下代码
ssh -T git@github.com
Hi yourid! You've successfully authenticated, but GitHub does not provide shell access.
# 如提示以上信息，则证明ssh配置成功

Hexo建站

使用hexo进行本地建站

# 本地执行如下代码
cd C:/hexo                          # 切换到本地目录
hexo init C:/hexo                   # 进行Hexo初始化
npm install                         # 安装

如果Hexo安装成功，则在本地Hexo目录下的目录结构如下，详细文件含义见Hexo官方文档

.
├── _config.yml                     # 网站配置文件，可在此配置大部分的参数
├── package.json 
├── scaffolds                       # 模板文件存放路径。新增文章时Hexo会根据scaffold创建文件
├── source                          # 用户资源存放路径
|   ├── _drafts
|   └── _posts
└── themes                          # 网站主题存放路径。Hexo会根据主题来生成静态页面

本地验证是否可用

本地启动默认的静态网站。访问地址为：http://localhost:4000/

1	hexo server --debug

配置部署信息

打开本地Hexo目录中的_config.yml文件，找到如下配置并根据注释说明更新

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy: 
  type: git                                         # 在yml文件中，:后面需要要带空格 
  repo: git@github.com:yourid/yourid.github.io      # 其中yourid为GitHub的注册用户名

生成静态文件并部署到GitPages

1
2
3

$ cd c:/hexo                                        # 进入网站根目录
$ hexo generate                                     # 编译本地内容并生成静态文件
$ hexo deploy                                       # 部署静态网页文件到GitHub

此时，通过访问 http://yourid.github.io 可以看到默认的Hexo首页

Hexo其他常用操作

发布文章

1	hexo n "postname" # 新增文章

命令执行后，会在Hexo的source_post文件夹下新建一个名为”postname.md”的文件，也可以直接在Hexo的source_post文件夹下新建.md结尾的文件。新增文件后重新进行编译和部署以在GitHub Pages上生效。

1 2	$ hexo generate # 编译本地内容并生成静态文件 $ hexo deploy # 部署静态网页文件到GitHub

更新Hexo主题

下载NexT主题

5.1.1版本下载地址
下载后解压文件，重命名为next，拷贝到C:\hexo\themes 目录

修改网站的主题为NexT

打开C:\Hexo下的_config.yml文件，按照如下配置，找到theme字段，将其修改为next

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

增加搜索功能

安装插件

1	npm install hexo-generator-searchdb --save

全局配置文件_config.yml，新增如下内容

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件（\themes\[主题名]\_config.yml），将local_search的enable改为true：

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

增加Gitalk评论系统

Github新增OAuth Apps
打开https://github.com/settings/developers，选择OAuth Apps，点击 New OAuth App
根据实际情况填写
Application name：应用名称
Homepage URL：主页地址，填写博客地址即可
Application description：描述
Application callback URL：应用回调地址，填写博客地址即可
创建APP后，记录client_id，并生成新的client_secret

修改主题配置文件
修改（\themes\[主题名]\_config.yml），在 # Gitalk 字段添加如下配置：

gitalk:
  enable: true
  github_id: [你的Github ID]
  repo: [repo名，后续评论会以issues的形式生成到对应的repo下]
  client_id: [上一步创建的client_id]
  client_secret: [上一步生成的client_secret]
  admin_user: [你的Github ID]
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

支持本地音乐

安装插件
1
npm install --save hexo-tag-aplayer

使用

<!-- 添加单曲 -->
{% aplayer "歌曲名称" "作者" "音乐_url" "封面图片_url" "autoplay" %}

<!-- 添加歌单 -->
{% aplayerlist %}
  {
      "narrow": false,
      "autoplay": true,
      "showlrc": 3,
      "mode": "random",
      "music": [
          {
              "title": "平凡之路",
              "author": "朴树",
              "url": "http://og9ocpmwk.bkt.clouddn.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.mp3",
              "pic": "https://ogd99kckh.qnssl.com/1.jpg",
              "lrc": "http://og9ocpmwk.bkt.clouddn.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.txt"
          },
          {
              "title": "野子",
              "author": "苏运莹",
              "url": "http://og9ocpmwk.bkt.clouddn.com/01%20%E9%87%8E%E5%AD%90.m4a",
              "pic": "http://og9ocpmwk.bkt.clouddn.com/%E9%87%8E%E5%AD%90.jpg",
              "lrc": "https://ogd99kckh.qnssl.com/%E9%87%8E%E5%AD%90.txt"
          }
      ]
  }
{% endaplayerlist %}

添加网易云音乐

使用

1	<iframe allow="autoplay" frameborder="no" border="0" marginwidth="0" marginheight="0" width=900 height=86 src="//music.163.com/outchain/player?type=2&id=355992&auto=1&height=66"></iframe>

支持RSS订阅

其他

Hexo详细操作，可参考Hexo参考文档
NexT主题细节配置，可参考NexT 使用文档
Markdown文章书写，可参考Markdown简明教程
Hexo NexT主题中集成gitalk评论系统
Hexo NexT主题中集成gitalk评论系统
Hexo博客中插入音乐

Duke's Tech Blog

使用Github Pages创建个人博客