Githubpages + Hexo搭建个人博客

| |

本文是基于WIndows系统，前提是要有一个Github账号，并会创建仓库项目，并在PC端用过git往github上传过代码最好。

创建Github仓库

直接在Github官网创建一个新的仓库即可，与创建普通仓库的操作一样，只有一点不同，就是Respository name 中一定要输入：你的用户名.github.io，其它没什么好说的。

PC端环境准备，完成博客创建

安装Git

去Git官网选择合适的版本，下载安装即可。

安装Nodejs

打开 Nodejs官网 ，选择 LTS 版本的，然后选择操作系统对应的版本，下载安装。

安装Hexo

打开命令行，在任何目录下都可以，输入命令：

1
npm install hexo-cli -g

创建本地博客

1）打开命令行，定位到你希望放置博客的位置。

2）输入命令：

1
hexo init 你的用户名.github.io  //和创建仓库时使用同一个

操作到此，博客已经搭建完成，使用的是自带的 landscape 主题，所以很丑。因为还没有安装部署发布工具，所以只能在本地打开查看效果。为了一气呵成，如何在本地查看我放在本小节最后来讲，下面安装部署发布工具，我想大家应该迫不及待的想看最终的效果：

安装部署发布工具

这里用到了 hexo-deployer-git，使用如下命令安装：

1
npm install hexo-deployer-git --save

发布博客

执行：

1
2
3
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

其中，后两条命令可以合并成一条：

1
hexo d -g

等命令执行完之后（需要好几秒钟），在浏览器输入： http://xxx.github.io ，即可看到你的个人博客了。

注意：如果是第一次部署，终端会提示要求输入用户名和密码。

以后要发布新文章，执行上述命令即可。

书写文章

1）文章要使用Markdown格式，所以文件的格式应为“.md”

2）文件应放在 /source/_post 目录下

3）文章中除了正文内容，在开头还要指定文章的标题、分类等。例如：

1
2
3
4
5
6
---
title: 文章标题
categories: Android
---
这里是正文，这篇文章分类于Android。

如何在本地查看效果

很多时候，我们在发布文章之前，需要先看看发布效果如何，再决定是否要发布，操作步骤如下：

1）打开命令行，定位到 xxx.github.io 目录

2）输入命令，启动服务：

1
hexo s

3）启动成功可以看到提示，按照提示用浏览器打开提示网址，即可看到你的本地博客了，里面有一篇 Hello World：

注意：我们看到启动成功后，提示的是打开 4000 端口，我们此时在浏览器输入该地址很有可能打不开，因为端口被占用，据说是被“福昕阅读器”给占用了，所以如果打不开就要重新开启一个新的端口，如下操作即可：

1
hexo s -p 5000 #我们改用5000

安装Next主题

截止到上一步，我们的个人博客已经完整的搭建完成了，如果你对显示界面没有任何要求，就可以开始使用了，写博客然后发布。不过默认界面太丑了，如果想要美化一下（基本上是必须的），首先要做的就是更换一个主题，然后在这个主题下自定义你的UI。我们这里使用Next主题，因为使用者众多，界面确实也不错。

前言：

1、在 Hexo 中有两份主要的配置文件，其名称都是 “_config.yml”。其中，一份位于站点根目录下（即 xxx.github.io 目录下），主要包含 Hexo 本身的配置；另一份位于主题目录下（/themes/next/_config.yml），这份配置有主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

2、在修改配置文件时，配置文件中的键值之间一定要有空格，否则会出错。

安装Next

将命令行切换到上面生成的本地博客目录（xxx.github.io），输入命令：

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

配置“站点配置文件（ _config.yml）”

主要有如下需要配置的几个键值，是必须要配置的：

1
2
3
4
5
6
7
8
9
10
11
12
13
theme: next        #设置主题为 Next
title: xxx         # 博客的名称，会显示在博客主页中
author: xxx        # 作者名字，会显示在博客主页中
description: xxx      # 对站点的描述，相当与“简书”中的自我介绍，会显示在博客主页中
language: zh-Hans      # 语言设置，简体中文
deploy:              # 部署相关配置
    type: git        # 使用 Git 提交
    repo: https://github.com/xxx/xxx.github.io.git      # 就是存放博客的仓库地址

再次强调，键值之间一定要 ”加空格“，请在文本编辑器中搜索定位后再修改。

主题安装完成后，界面焕然一新，但是还存在一些问题，比如你点击某些菜单会显示“404 not found”，这是因为这些菜单你还没有进行配置，所以对Next主题的自定义设置也是必须的。而且日后对网站所做的界面更改，基本上都是在对Next主题进行自定义了。

自定义Next主题 —— 基本设置

Next主题已经安装完成，下面要做的就是自定义自己的主题了，不同的设置，可以实现不同的效果。这一小节讲解基础的配置，所有操作都在主题配置文件 （_config.yml）中，注意是next主题里的 _config.yml 文件，不是根目录下的。主要基础配置如下：

主题风格(scheme)

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

Next主题提供了三种风格，默认的是第一个，我使用的是第三个。大家可以都尝试看看，喜欢哪个就用哪个，只需要取消注释（去掉前面的 # 号）即可。

设置侧栏菜单(menu)

1
2
3
4
5
6
7
menu:
  home: / # 在菜单上显示首页
  #archives: /archives # 在菜单删显示全部
  categories: /categories # 在菜单上显示 分类
  #tags: /tags # 在菜单上显示 标签
  about: /about # 在菜单上显示 关于
  #commonweal: /404.html

这个主要是设置显示哪些菜单，不需要的注释掉即可。在我们刚刚搭建完成时，只有“主页”菜单是可以点击的，其它的“categories”、“about”等由于还没有设置，没有建立相应的页面，所以点击后会显示“404 not found”。如何建立相应的页面，这个会在后面讲解。

友情链接

基本上所有的博客都会有这么一个友情链接，来链接到其它网站，这个是如何设置的呢？肯定也是修改相应的键值了：

1
2
3
4
5
6
7
# Blog rolls
links_title:                       #链接的title，会显示在界面上
links_layout: block                #它的作用我还没尝试，很明显是设置布局的，和下面的二选一
#links_layout: inline
links:                             #添加链接，前面是显示的链接文字，后面是网址，添加新的链接就在下面增加即可
  简书: http://www.jianshu.com/u/0bb409c7df28
  Github: https://github.com/thinkChao

自定义Next主题 —— 添加分类/关于

我想实现的分类效果是在菜单栏的分类菜单下，直接显示各种分类，不过默认实现的并不是那种效果，需要其它的一些设置，这个目前我还不知道怎么弄，所以现实现默认的分类效果吧。

默认实现的分类是：点击分类菜单，会进入一个分类页面，在这个页面下会显示所有的分类条目，点击某个条目，就会显示该分类下的所有文章。具体怎么实现呢？

新建分类页面

1）打开命令行，定位到 xxx.github.io 目录

2）新建一个页面，命名为 categories：

1
hexo new page categories

3）打开新建的页面：/souce/categories/index.md，配置：

1
2
3
4
5
---
title: 分类                  #设置title
date: 2017-05-17 16:13:17    #创建时间
type: "categories"           #将页面的类型设置为 categories
---

在创作文章时，添加分类

上一步，我们已经把分类页面创建好了，但是打开一个分类也没有。所以接下来你是不是认为应该开始增加分类了，然而并不是。

分类条目并不是提前创建好的，像我们在其它的博客中那样可以随意创建一个分类。而是在发布文章的时候，在文章中指定分类。举例如下，我们新建文章：

1
2
3
4
5
6
---
title: 文章标题
categories: Android
---
这里是正文，这篇文章分类于Android。

看到没有，我们在文章开头有一个“categories”标签，然后我们将这篇文章分类与Android下。如果这个分类已经存在，那么直接将这篇文章添加到这个分类；如果是第一次指定这个分类，则会新建这个类别，然后将这篇文章添加到这个分类。当然，你也可以添加二级分类。

分类功能是主题自动维护的，只要我们的文章按照规范来写就行了。

添加“关于”页面

创建“关于”页面和添加分类一样，要现创建出这个页面。

然后我们只需在 /souce/about/index.md 中书写我们想显示的内容就ok了，没有其它额外的操作。

自定义Next主题 —— 添加网站的访客数量、文章的访问数量

添加访问量的统计也是常用功能，虽不必要，但有这个功能也是极好的，可以查看有多少个IP访问过你的网站，哪个文章的点击量最多。

访问统计这里分为两类：

1）对网站访问量的统计：包括网站的浏览次数，即pv；以及网站的访客数，即uv。网站每刷新一次，pv就会加1，包括你点击一篇文章，pv也会增加。所以个人感觉这个统计功能很鸡肋。而uv是每当一个新的IP主机访问这个网站，uv加一，以后无论这个主机访问多少次，uv等不会增加。

2）对文章阅读量的访问统计：每打开一次这篇文章，访问量就加1，这里也包括作者本人的访问。

下面对这两个访问统计的设置进行讲解：

对网站访问量的统计

对网站访问量的统计我们使用Next主题自带的不蒜子统计。

1）安装 busuanzi.js 脚本
打开 /theme/next/layout/_partial/footer.swig 文件，拷贝下面的代码至文件的开头：

1
2
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

2）显示统计标签
仍是在 /theme/next/layout/_partial/footer.swig 文件中，将想要显示的统计量pv或者uv的显示代码放在合适的位置，我是放在了代码的最后，也就是最后一行代码的上面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#这行代码的目的是显示短竖直的分割线，应该有比这更优雅的设置方式，无奈我不会前端技术
<div class="powered-by">  
</div>
#显示 UV 的代码
<span id="busuanzi_container_site_uv">
   访客数：<span id="busuanzi_value_site_uv"></span>
</span>
#显示短竖直的分割线
<div class="powered-by">
</div>
#显示 pv 的代码
<span id="busuanzi_container_site_pv">
    访问量：<span id="busuanzi_value_site_pv"></span>
</span>

对文章阅读量的访问统计

对文章阅读量的访问统计我们使用leanCloud，Next主题也对其提供了支持。

具体步骤参考leanCloud实现文章阅读量统计，写的很详细，很有条理，我就不再赘述了。

自定义Next主题 —— 添加留言功能

这个目前我还没有实现，因为还不知道该用哪家的服务，比较知名的有两家：

1）国内的多说：关于它就不多说了，因为马上就停止服务了。

2）国外的Disqus：这个我试过，需要翻墙才能访问，所以果断放弃。

其它的就不了解了，以后有好用的会再考虑添加这个模块。

自定义Next主题 —— 其它

如何删除小icon后的文字

如果打开我的博客中的一篇文章，会发现每一篇文章的标题下面会显示三个内容：时间、分类、阅读量，并且每个项目前面都会有一个小icon（图标），这个是主题自带的，默认就有，而且默认的是在图标后面还有显示的说明文字，例如在那个眼睛的图标后面，默认带有“阅读量”之类的文字。我为了简洁，就把文字去掉了，是怎么去掉的呢？

打开 /themes/next/layout/_macro/post.swig 文件，把相应的显示文字的那行代码注释或删除就可以了。我也不懂前端技术，代码我也看不懂，我也是通过搜索相应的关键字，然后查找“可能的代码”，然后尝试着去删除。

例如你想删除分类icon后面的文字，你就可以在这个文件中关键字搜索“category”，然后查找相应的显示文字的代码，删除就可以了。

如何设置摘要的显示字数

1、首先打开主题配置文件（/themes/next/_config.yml），将auto_excerpt设置为true：

1
2
3
auto_excerpt:
  enable: true
  length: 150

2、然后在每篇文章，在你想要显示的文字后面加上<!--more-->用来截断，这样在这行代码后面的 内容就不会显示在主页的摘要当中了。否则，默认是全文显示的，这样很不友好。