使用Hexo + Github Pages搭建个人独立博客

1. 环境配置

安装Node

Node
下载安装

安装Git Bash

下载Git Bash
下载完成后一路 next 就OK了

2. 安装 Hexo

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo s #或者hexo server，可以在http://localhost:4000/ 查看

此时在浏览器中打开http://localhost:4000/即可查看到一篇文章博客

这里简单列一下几个hexo的常用命令

$ hexo generate # (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
$ hexo server # (hexo s) 启动服务器
$ hexo deploy # (hexo d) 部署博客到远端（比如github等平台）
$ hexo new "postName" # 新建文章

具体其他的可登录hexo官网查看

3. Hexo 站点配置

可以在 _config.yml 中修改大部分的配置。
这里简单举个例子，
页面的语言可能是英文，想要换成中文也简单。

更改语言

找到Hexo目录下的 _config.yml 配置文件中的 language 属性，将其设置为 zh-CN。
然后清除缓存，重新启动服务器。

$ hexo clean
$ hexo s

此时，页面就变成了中文。
还可以更改网站标题，网站描述，及作者等等信息，这里不再一一列出来
具体可以查看Hexo站点配置。

4. 更改 Hexo 主题

我比较喜欢Next这个主题，这里就用这个主题作参考。

安装主题

$ hexo clean
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

启用主题

修改站点配置文件中的 theme 属性，将其设置为 next。
现在打开http://localhost:4000/，会看到我们已经应用了一个新的主题。

每个不同的主题会需要不同的配置，主题配置文件就是主题目录下的_config.yml。
找到 Hexo目录下的 theme 文件夹，找到 next 文件夹，找到 _config.yml 文件，这个文件就是Next的主题配置文件。

更改主题风格

Next 简洁好看，并且支持多种样式。
找到 Schemes 属性，下面有四种风格，看自己喜欢可更换风格。

侧边栏设置

侧栏设置包括：侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等

打开 主题配置文件 找到 sidebar字段

sidebar:
# Sidebar Position - 侧栏位置（只对Pisces | Gemini两种风格有效）
  position: left        //靠左放置
  #position: right      //靠右放置

# Sidebar Display - 侧栏显示状态（只对Muse | Mist两种风格有效）
  #display: post        //默认行为，在文章页面（拥有目录列表）时显示
  display: always       //在所有页面中都显示
  #display: hide        //在所有页面中都隐藏（可以手动展开）
  #display: remove      //完全移除

  offset: 12            //文章间距（只对Pisces | Gemini两种风格有效）

  b2t: false            //返回顶部按钮（只对Pisces | Gemini两种风格有效）

  scrollpercent: true   //返回顶部按钮的百分比

头像设置

打开 主题配置文件 找到 Sidebar Avatar 字段

# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径，找到更换图片即可

菜单设置

执行命令

$ hexo new page "about"

之后在 \source\about\ 目录下会生成一个 index.md 文件
打开输入个人信息即可。
此时页面上可能并没有出现，那就找到主题文件夹下面查看 about 页面是否存在或打开。

找到 Menu Settings 会发现 menu 属性有多个页面处于注释状态。

这是 next 主题提供的几个较为特殊的页面，
about 是关于，
tags 是标签页面
categories 是分类页面

但是打开注释之后还是没有页面，这是因为此时还没有创建，同理，创建这几个页面就 OK 了。

$ hexo new page "tags"
$ hexo new page "categories"

此时在某篇文章的 Front-matter 部分加上 tags 参数和 categories 参数
然后在 tags 页面 加上 ** type: “tags”**
在 categories 页面 加上 ** type: “categories”**
即可在页面上看见标签和分类。

网站ico设置

打开主题配置文件，搜索字段favicon

找到主题文件夹内的相应位置，替换图片即可

5. 插件及扩展功能

搜索插件

1. 安装插件

$ npm install hexo-generator-searchdb --save

2. 修改 站点配置 文件
   找到 Extensions 在下面添加

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

3. 修改 主题配置 文件

local_search:
  enable: true

添加评论系统

目前比较有名的第三方评论系统很多都无法使用了，多说已经关了，网易云跟帖8月1号关闭，畅言要备案，Disqus被墙。剩下的也不是很多，了解了一下之后，有两款很是不错，一款是Gitment，一款是Gitalk，两款都是基于GitHub Issues实现的评论系统，都很优秀，但是考虑到前者已经很久没有更新，服务器似乎也不是很稳定，这里主要推荐一下Gitalk。

1. 申请 GitHub Application

点击此处申请

其他的不做要求，但是 Authorization callback URL 一定要填写当前使用插件页面的域名，也就是github page的地址
申请完成后会生成一个ID和一个密码，在 setting > Developer settings 可以找到

2. 在博客中调用Gitalk

{% if page.comments && theme.gitalk.enable %}
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

     <script type="text/javascript">
          var gitalk = new Gitalk({
            clientID: '{{ theme.gitalk.ClientID }}',
            clientSecret: '{{ theme.gitalk.ClientSecret }}',
            repo: '{{ theme.gitalk.repo }}',
            owner: '{{ theme.gitalk.githubID }}',
            admin: ['{{ theme.gitalk.adminUser }}'],
            id: md5(location.pathname),
            distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
          })
          gitalk.render('gitalk-container')
      </script>
  {% endif %}

3. 修改themes的配置_config.yml 文件

找到gitalk，没有的话直接添加

gitalk:
  enable: true
  github_id: yourid
  repo: # 这是评论存放的仓库，可以是你的 gitpage，也可以是其他的仓库，自己指定就好
  client_id: yourid
  client_secret: yoursecret
  admin_user: your_github_id
  lazy: true

保存就可以了，此时启动服务就可以看到评论系统添加成功了

添加站点访问计数

站点访问计数比较有名的就是不蒜子

1.修改主题配置文件

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer: 位访客
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer: 次访问
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-eye"></i>
  page_pv_footer: 次阅读

搜索 busuanzi ，将 enable 设置为 true。

Github Pages

GitHub Pages 本用于介绍托管在GitHub的项目，不过，由于它的空间免费稳定，用来做搭建一个博客再好不过了。

1. 创建自己的Github Pages

每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是username/username.github.io，这是特殊的命名约定。
可以通过http://username.github.io来访问你的个人主页。

这里特别提醒一下，需要注意的个人主页的网站内容是在master分支下的。

2. 安装插件

$ npm install hexo-deployer-git --save

3. 设置本机的 SSH Key

打开下载的 Git Bash

1. 输入命令确定用户

$ git config --global user.email "you@example.com"
$ git config --global user.name "yourname"

2. 输入命令生成 SSH Key

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

3. 然后系统会要你指定路径保存，输入加密串等等，此时一路回车就好。

> Enter a file in which to save the key (/c/Users/you/.ssh/id_rsa):[Press enter]
> Enter passphrase (empty for no passphrase): [Type a passphrase]
> Enter same passphrase again: [Type passphrase again]

看到类似于这样的图片就表示已经生成好了

4. 在本机设置SSH Key之后，需要添加到GitHub上，以完成SSH链接的设置。
   找到生成SSH的文件夹，找到 id_rsa.pub 这个文件，使用文本编辑器打开，复制里面的所有内容
   打开Github，找到设置，然后找到 SSHKey 的设置，点击这个按钮，然后将复制的内容粘贴进去即可。
   

4. 使用 Hexo deploy部署

到此时，Github Pages 还是无法打开的，需要进行一次部署提交。

hexo deploy可以部署到很多平台，具体可以参考这个链接。
如果部署到 Github，需要在站点配置文件_config.xml中作如下修改：

deploy:
  type: git
  repo: <repository url> #git@github.com:username/username.github.io.git
  branch: [branch] #master
  message: 

然后在命令行中执行

$ hexo deploy

即可完成部署
此时打开 Git page应该可以看到效果了