Hexo+GitHub Pages创建个人博客

工具

July 11, 2018

全球最大的同性交友平台GitHub为我们提供了免费的GitHub Pages服务，个人或者组织可以用于托管静态的网页资源。使用GitHub Pages可以创建产品介绍类的网站，或者个人博客等。

用于创建或者生成静态网页资源的常见工具，或者叫静态网站生成器，是一种将文本文档通过一些处理生成一个有机整体的（HTML+CSS+JS文件组成）静态网站（不和后台服务器有交互）。常用的静态网站生成器有：Jekyll，Hugo，Hexo等。Jekyll使用Ruby语言构建，是GitHub Pages默认支持的生成器；Hugo使用Go语言构建，Hexo使用NodeJS技术构建。因为我对Ruby和Go语言都没有接触过，所以自然而然地选择了Hexo。

使用Hexo和GitHub Pages创建自己的免费个人博客主要包括以下步骤：

在GitHub上创建一个新的仓库（repository）
安装NodeJS和Hexo工具环境
选择自己喜欢的Hexo主题并做简单配置
将Hexo生成的静态网站资源发布到GitHub仓库。

好的，注意力集中，下面我们一步一步介绍如何进行实战。

创建GitHub仓库

首先，你必须有一个GitHub账户。如果没有的话，注册一个，免费的。
GitHub Pages提供了两种类型的网站托管：用户或者组织网站（User or organization site）和项目网站（Project site）。前者只能创建一个，后者可以创建多个。这里我们创建用户或者组织网站。
创建用户或者组织网站，我们直接登录自己的GitHub账户，创建一个新的私有仓库，仓库的名称必须是username.github.io这样的格式，username可以自定义，比如我的是theonegis.github.io。这样即可！

GitHub Pages的官网提供了详细的步骤说明，有兴趣的童鞋可以看看。

安装Hexo环境

首先，需要确保你正确安装了NodeJS（可在命令行终端使用node -v进行验证），如果没有请移步到NodeJS官网下载对应的安装包进行安装。
打开命令行终端，使用npm install -g hexo-cli命令进行Hexo的安装。使用hexo -v命令查看是否安装成功。

配置Hexo

在自己的工作目录下面新建一个文件夹用于存储自己的网站资源，比如我使用新建了一个名为blog的文件夹。
使用Hexo的命令行工具执行初始化工作，具体命令如下：
```
hexo init blog
cd blog
npm install
```
下面我来说一些，初始化工作完成以后，生成的一些文件或者文件夹的用途：
```
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
```
- _config.yml 文件用于对Hexo整体的配置（具体的配置说明参见：https://hexo.io/docs/configuration.html）
- source 文件夹用于存储自己的网站内容，_posts文件夹下面主要存储博客文本文件
- themes 文件夹用于存储下载的主题
接下来下载自己喜欢的主题，当然也可以使用默认主题。Hexo官方提供了很多可选的主题，众多网友推荐使用NexT主题，简洁大方，功能丰富。但是由于使用人比较多，我自己选择了一款比较小众的主题，这个主要看个人喜好吧！一般使用git工具将GitHub上开源的主题克隆到自己的themes文件夹下面，主题的配置文件在themes/_config.yml文件中进行，具体的配置需要参考特定主题的说明。要将自己下载并且配置好的主题应用到Hexo，则需要在根目录下的_config.yml中进行，修改theme的名称为你自己想要应用的主题名称。

比较重要的是对于网站菜单的配置，这个是在themes/_config.yml文件中进行的，比如我的配置如下（每个主题可能稍微有一些不一样，注意查看主题的说明文档）：

# Header
menu:
  主页: /
  归档: /archives
  分类: /categories
  标签: /tags
  关于: /about

为了生成分类和标签页面，我们需要执行如下步骤：

在命令行执行如下命令生成分类页面：

# 新建一个页面，命名为 categories。编辑刚新建的页面，将页面的类型设置为categories，主题将自动为这个页面显示所有分类
hexo new page categories

我的分类页内容如下：

---
title: "分类"
date: 2018-07-10 23:34:06
type: "categories"
---

同理，标签页也是类似的，命令如下：

# 新建一个页面，命名为 tags。编辑刚新建的页面，将页面的类型设置为tags，主题将自动为这个页面显示标签云
hexo new page tags

我的标签页内容如下：

---
title: "标签"
date: 2018-07-10 23:35:16
type: "tags"
---

关于hexo new命令的使用，参见：https://hexo.io/docs/writing.html

撰写博文

使用hexo new post "Hexo-GitHub-Pages创建个人博客"创建自己的第一篇博文，默认会在source/_posts文件夹下面生成一个同名的Markdown文件，然后我们打开该文件使用Markdown语法进行博文撰写即可。

这是我写完博文以后source文件夹的目录列表：
```
source
├── _posts
│   └── Hexo-GitHub-Pages创建个人博客.md
├── about
│   └── index.md
├── categories
│   └── index.md
└── tags
    └── index.md
```
注：_posts文件夹下面默认会有一个Hello Word.md的文件，是默认生成的示例性质的一篇博文，删除即可。
写完以后，可以使用hexo server启动一个本机的服务器，使用http://localhost:4000/地址进行访问，预览一下自己的博客。

发布

要将博文发布出去，需要在根目录下的_config.yml文件中配置一下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/theonegis/theonegis.github.io.git  # 这里是你自己的github仓库地址
  branch: master

然后使用如下命令进行发布：

hexo clean  # 清理生成的静态文件(非必须)
hexo generate  # 重新生成静态网页文件，生成文件位于根目录下public文件夹内
hexo deploy  # 将本机的静态文件发布到GitHub上去

Hexo的常用命令：https://hexo.io/docs/commands.html

关于撰写博文时分类和标签的说明

我们需要在博文中通过元数据的形式告诉Hexo如何对我们的博文进行分类和添加标签，比如我的这篇博文的开头由如下的原信息：
```
    ---
    title: Hexo+GitHub Pages创建个人博客
    date: 2018-07-11 11:36:56
    tags: [Hexo, GitHub, 个人博客]
    categories: 
    - 工具
    - git
    ---
```
这里的tags用于给文章添加标签，多个标签需要用方括号括起来，并用逗号分隔。

categories指定文章分类，如果有多个分类可以以列表的形式指定。
第二个问题是，Hexo默认的链接是以日期指定的，即使:year/:month/:day/:title/这种形式，如果我想以分类来表示博文的永久链接，可以修改为:category/:title/。但是，如果我的文章分类中有文中怎么办？

我们可以通过在根目录下的配置文件中设置一个映射关系解决，示例如下：
```
# Category & Tag
default_category: uncategorized
category_map:
  Python入门: python
  空间数据处理: geos
  机器学习: ml
  深度学习: dl
  算法: algorithm
tag_map:
```