基于 GitHub Page 使用 hexo 框架生成静态博客部署全记录

发表于 | 分类于 |  PV

通常搭建一个个人博客需要租用「虚拟服务器」，在服务器部署整个服务端，成本较高，维护麻烦
不同于自行部署整个服务端的成本高昂，使用静态网页的形式可以大大减少部署成本。

概述

GitHub 提供了一个免费的 300M 大小的免费空间供我们放置静态网页并直接访问，需要我们在GitHub新建一个特定名称的 Repo ，在推送静态网页到 Github 后即可访问特定域名访问博客。

以 GitHub 名 SUSTYuxiao 为例：
新建项目 SUSTYuxiao.github.io，部署后可通过 https://sustyuxiao.github.io 访问

hexo 是一个可以自动化生成 静态页面的工具，结合 GitHub 上丰富的主题，可以高效简单地部署个人静态博客。

本文不再赘述 Git 基本命令

hexo 官方文档 https://hexo.io/zh-cn/docs/

环境安装

作者环境为 linux（centos） , mac/win 用户参见官方文档

hexo 框架

hexo 需要依赖 git 和 Node.js ，如果没有安装则依次执行

1
2
3
4
5
6
#install git
$ sudo yum install git-core 

#install Node.js
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
$ nvm install stable

执行以下代码完成 hexo 的安装

1
$ npm install -g hexo-cli

next 主题

安装主题前，先进行 hexo 项目的初始化

1
2
3
$ hexo init <folder> #<folder>是即将创建的项目的文件夹的名字 ex. 「$ hexo init myBlog」
$ cd <folder>
$ npm install

在工程目录下，执行

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

参数配置

配置之前，大概了解一下项目文件树

1
2
3
4
5
6
7
8
9
10
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
    ├── landscape
    └── next

_config.yml 为 hexo 工程的配置文件，称之为「站点配置文件」
_config.yml 文件同样存在于 主题目录 next 内，为next主题的配置文件，称之为「主题配置文件」
本文只介绍部分主要配置项，其他选项参见配置文件中的「注释」以及「官方文档」

站点配置

  • title: #此项为博客主页名称
  • author: #作者名
  • language: zh-Hans
  • theme: next #主题默认为 landscape 这里改为 next

hexo 自带部署功能，在站点配置文件 deploy 修改字段为

1
2
3
4
deploy:
  type: git
  reop: git@github.com:SUSTYuxiao/SUSTYuxiao.github.io.git
  branch: master

据论坛反应， deploy 不稳定，后面我们使用 git 的方式直接部署。

主题配置

切换样式

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

头像设置

1
avatar: http://example.com/avatar.png

也可将图片放置在 source/images/ 目录下
配置为：avatar: /images/avatar.png

菜单配置

1
2
3
4
5
6
7
8
# ex.
menu:
  home: /
  archives: /archives
  #about: /about
  categories: /categories
  #tags: /tags
  #commonweal: /404.html

通过注释#,控制，着重强调一下分类页面categories,经过上述配置，主页即可看到「分类」项，但如果点击会出现 not found

分类页面配置
在工程目录下，首先执行

1
$ hexo new page categories

在 source 文件夹下即会出现 categories 目录，编辑目录内的文件 index.md
修改字段为

1
2
3
4
5
---
title: categories
type: categories
date: 2018-02-05 12:53:58
---

即可正常显示分类页面

部署

编写文章
hexo 默认管理文章的方式有些繁琐，有兴趣请自行查阅官方文档

任选一个 markdown 编辑器，在撰写文档时，在文档头部增加以下字段

1
2
3
4
5
6
7
---
title: 全特化/偏特化/类型萃取技术
date: 2017-11-21
categories:
	- Learn_notes
	- c++
---

博客页面的文章标题依赖 title 字段，排序默认依赖 date 字段
分类标签依赖 categories 字段, 其值第一项为一级分类名，第二项为二级分类名，以此类推…

准备部署
md 文件应放置在站点目录下的 source 目录下的 _posts 目录内

我们可以 markdown 编辑器直接管理 _posts
本文使用 Linux 虚拟环境，在 mac 与 linux 下分别安装了「坚果云」同步两者文档。

生成静态网站
依次执行

1
2
$ hexo clean 
$ hexo g

clean用以清理缓存；g为简写，功能为生成静态网页，输出目录为站点目录下 public 目录。
此时我们将 public 内文件 push 到 GitHub 即可访问。

本文使用

1
$ git clone git@github.com:SUSTYuxiao/SUSTYuxiao.github.io.git

克隆后，编写脚本文件方便后续部署。

1
2
3
4
5
6
7
8
9
#!/bin/bash
# 上一行定义了这是一个执行文件，解释器是 bash
hexo clean
hexo g
cp -rf ./public/* ./SUSTYuxiao.github.io #复制静态网站到本地 git 仓库
cd SUSTYuxiao.github.io
git add -A #加入所有修改到暂存区
git commit -m “update” #提交修改
git push #推送修改

保存文件，后缀名为.sh，并执行以下代码以赋予文件执行权限

1
$ chmod +x ./push.sh

随后我们即可通过以下代码推送所有修改

1
$ ./push.sh

成品预览 https://sustyuxiao.github.io

仍存在的一个小问题是，执行./push.sh后 GitHub Page 页面部分样式没有变化，需要再执行一次，或者修改脚本为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#!/bin/bash
hexo clean
hexo g
cp -rf ./public/* ./SUSTYuxiao.github.io
cd SUSTYuxiao.github.io
git add -A
git commit -m “update”
git push
#run sh again to make sure GitHub page is the last release
cd ..
hexo clean
hexo g
cp -rf ./public/* ./SUSTYuxiao.github.io
cd SUSTYuxiao.github.io
git add -A
git commit -m “update”
git push

有解决方案的大佬希望告诉我一下呀

给我发送邮件