使用Github Pages和Hexo博客网站搭建教程

一、前言

工作之后一直有写作的冲动，想把自己的一些想法记录下来，但可能是天生自带的强迫症，一直没有好的平台，所以一直没有开始。之前看到过一些技术人员有自己的博客，而且是那种私人的博客，觉得非常的炫酷，从此就一直想要说自己也弄一个，其实关于博客的平台有很多，很多人也喜欢在一些第三方平台进行写作，像是简书、CSDN、知乎...但是有一个自己博客的想法一直在我脑海，这不刚好自己现在有时间了，就开始鼓捣起来了。

关于这篇博客

写这篇博客主要是：

第一是对整个网站搭建过程进行记录，帮助自己巩固和总结一下

第二是搭建过程中也遇到了不少的坑和问题，将这些问题进行总结一下，帮助其他人少犯错。

额外想说的一点：
这个虽然说是教程，但是随着技术的更新，肯定会有部分的内容没有及时更新逐渐淘汰，所以我会尽量在写的过程中提供相关的官方文档链接，一般只要这个技术没有被完全淘汰，他的官网文档总是会进行更新的，所以如果我的教程中有哪些地方你觉得可能不太准确，可以通过其中的官网链接进行查看。

二、教程部分

搭建博客网站是一个小的项目工程，所以不要想着一步成功，中间可能还会遇到各种Bug,可以将这个项目分为多个步骤进行，接下来我们开始第一部分（博客网站框架搭建）：

了解Hexo
安装Nodejs环境
安装Hexo
搭建你的一个博客平台
开始你的第一篇博客文章

开始准备工作

首先你的电脑要安装了Git（版本控制工具）,不会的可以点击Git官网进行下载安装
安装nodejs环境，可以去Node官网进行下载即可,这样你就拥有了NPM包管理工具，就可以安装hexo啦！
你需要注册一个GitHub的账号，因为你需要使用GitHub Pages
貌似目前就需要这些。。。

1.Hexo介绍

Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github上。

超快速度
支持MarkDown
一件部署
丰富的插件

2.环境准备

2.1 安装node.js

去nodejs官网下载对应系统的安装包，按照提示进行安装即可。可以使用以下命令检验是否安装成功：

$ node -v

如果安装成功将会显示你安装的node版本信息。

2.2 安装Hexo

在你安装好node之后你就可以使用npm安装hexo，目前由于部分原因，npm并不是所有人都可以使用，如果不行的话可以使用淘宝镜像操作没有很大的不同，把npm改成cnpm即可,安装Hexo的主要流程可以通过Hexo文档进行查看，官方文档都会持续更新。

$ npm install hexo-cli -g

3.使用Hexo搭建你的第一个博客

3.1 创建博客目录

$ hexo init yourblogfilename
$ cd youeblogfilename
$ npm install

这里三个步骤分别是：

初始化你的博客的文件目录
进入到你的博客文件目录中
安装npm

这里的yourblogfilename就是你本地博客的文件夹，这个名字你可以自己随便取。

3.2 生成静态页面

$ hexo clean
$ hexo g

g表示generate

3.3 运行

$ hexo s

s表示server
这个时候你打开浏览器，输入 http://localhost:4000/就可以看到效果啦！

这个时候你应该是有一点小兴奋的吧！终于看到了一个博客网站的大致雏形了，接下来你就可以自己尝试发一篇文章试试！

4.你的第一篇博客文章

4.1 执行命令

$ hexo new firstblog

这个时候在你的博客文件目录的source/_posts下会生成一个firstblog.md文件，这个是一个Markdown文件，相信很多编程人员都知道，编写Markdown文档也是技术人员的基本功之一，所以你可以打开这个文件，随便输入一些文字，保存关闭即可。这将是你的第一篇博客文章，使用以下命令查看生成的效果：

$ hexo clean
$ hexo g
$ hexo s

打开浏览器，输入 http://localhost:4000/查看效果。

4.2 更直接的方法

在source/_post/下新建一个.md文件也可以

以上，你已经完成了一个博客网站的基本搭建，可以自己查看自己的新建并且发布的的博客文章。但是它与我们所设想的还有一段距离，所以接下来我们就要开始进行以下操作：

配置站点信息
更换主题
配置主题信息
部署到Github

5.配置站点信息

网站的设置大部分都在_config.yaml文件中，详细配置可以查看官方文档
下面列举一些常用配置：

title -> 网站标题
subtitle -> 网站副标题
description -> 网站描述
author -> 你的名字
langiage -> 网站使用的语言

⚠️注意：在配置时，需要加上冒号:,冒号后面要加一个英文的空格，例如：

title: Kevin wan

6.换一个你喜欢的主题

配置好上面的站点信息以及发布了自己的博客文章之后，是不是发现Hexo这个自带的主题有点丑呢？没关系，Hexo中有很多主题，可以在Hexo官网查看。我自己使用的是Next主题,个人还是比较推荐的。

6.1 下载主题资源

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

当然，这里我使用的Next主题作为例子，你也可以使用其他的主题，只需要将clone后面的链接换成你的主题的URL即可。

6.2 使用下载主题

在站点配置文件，也就是_config.yaml中，配置theme

next是我使用的主题名称，具体的可以通过主题文档查看你的主题名称

6.3 主题其他部分配置

到这一步你已经可以看到一个比较漂亮的博客网站了，一个你喜欢的风格的网站。当然，还有一些细节的部分需要我们进行配置，这个时候可以根据主题的配置文档进行主题配置，一般是在theme/{theme}/_config.yaml主题配置文件下进行配置，Next主题的可以查看Next文档，详细的配置步骤这里就不多说了，可以按照自己的喜好进行配置。
在配置完之后怎么查看自己是否配置成功呢？可以使用完成的调试命令进行查看：

$ hexo clean
$ hexo g
$ s

这个时候本地浏览器访问http://localhost:4000/即可

此时，你已经完成了第二个部分，配置好了你的站点信息，选择了自己喜欢的主题和配置了相应的主题设置，但是目前这个网站仅限于我们自己本地进行浏览，无法让别人看到，这就需要我们将我们的网站部署到Github上面去，至于什么是GitHub，知道的可以自己搜索一下，作为一名开发人员，GitHub肯定是要了解的，废话不多少，接着操作：

注册Github账号
创建仓库（repo）
网站配置
进行部署

7.部署到GitHub

7.1 注册GitHub账号

7.2 创建一个xxx.github.io的仓库

这里的xxx是你的用户名，例如我的用户名是Xiankai-Wan那么我的仓库就命名为Xiankai-Wan.github.io

7.3 安装hexo-deployer-git

$ npm install hexo-deployer-git --save

7.4站点配置Git

在站点而不是主题的_config.yaml中配置deploy

deploy:
    type: git
    repo: <repository url>
    branch: [branch]

type这里默认为git
repo后面是你的这个repo的URL，可以在Github上面找到你的repo的地址
branch表示分支，可以不填，一般为master
还是那句话，冒号后面要有空格

7.5 部署

终端输入：

$ hexo d

d 就是 deploy

将网站部署到GitHub已经完成了，这一步还是比较简单的，只需要一些基本的操作就可以了，这个时候你就可以通过xxx.github.io访问自己的博客网站啦！
接下来我们需要配置一些其他的信息，例如每一个博客文章中都有标签，那这个是怎么来的呢？还有我们可以对每一篇博客文章进行分类，这个也是需要我们手动配置一下的，所以接下来我们开始：

配置标签页
配置分类页

8.创建标签页

8.1 确认相关信息

你需要确认站点配置文件里面有：

tag_dir: tags

确认主题配置文件有：

tags: tags

8.2 新建Tags页面

$ hexo new page tags

这个时候会在source/下面生成tags/index.md文件

8.3 配置标签页面

打开tags/index.md,配置如下：

title: tags
date: 2017-10-20 06:49:50
type: "tags"
comments: false

date可以保持系统生成的时间，其他部分不要乱改

8.4 在文章中添加Tags

在完成以上操作之后，你就可以在自己的博客文章xx.md文件中添加：

tags:
        - Tag1
        - Tag2
        - Tag3

多个Tag可以按照上面的格式进行添加。
之后你的博客文章文件头部类似于：

title: TagEditText
date: 2016-11-19 10:44:25
tags: 
    - Tag1
    - Tag2
    - Tag3

9.创建分类页

9.1 确认相关信息

你需要确认站点配置文件里面有：

category_dir: categories

确认主题配置文件有：

categories: /categories

9.2 新建分类页面

$ hexo new page categories

这个时候会在source目录下面生成categories/index.md文件。

9.3 配置分类页面

打开categories/index.md，配置如下：

title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

date 可以保持系统生成的时间，其他不要随意更改

9.4 在文章中添加categories