Hexo & gitpage equal to blogs

Posted on In

What is Hexo？

Hexo 是一个静态网站生成软件，它通过预定义的网页模板，把 Markdown 文件渲染为一个静态网页。除此之外，Hexo 还支持高度的自定义设置，通过应用社区共享的主题样式，你能轻易地实现网页的个性化。同时，我们可以把 Hexo 生成的静态网页部署到静态网站托管服务器上，例如：GitPage，让我们能快速搭建一个个人博客。

What is Github Pages？

Github Pages, 简称 GitPage，是 Github 推出的静态网站托管服务，它能直接从一个仓库中生成个人，组织或项目的主页。但 GitPage 的托管服务不支持服务器端代码，仓库容量限制为 1G，每小时可编译网站次数为 10 次，每月可用流量为 100G。想了解更多详细内容查看官方文档。

安装

Hexo 的静态文件生成，以及插件管理功能都是依赖 Node.js 软件包来实现的。另外，我们需要用 git 来把本地的静态网页部署到 github 仓库上。所以我们需要先安装以下两个软件：

  • Node.js
  • Git

环境准备

  1. npm 的安装 
1
2
3
4
5
sudo apt-get -y install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
. .profile  # 重新读取配置文件
# bash
nvm install --lst

请不要在安装完 hexo 后删除 nvm，也不要在 WSL 里安装 nvm，因为它将拖慢 WSL 的启动速度，一个可行的解决方法是把 nvm 的启动命令放到.nvmrc 脚本中，需要时用 source .nvmrc 读取。

  1. Git 的安装 
1
sudo apt-get -y install git

安装 Hexo

当安装完 npm 和 git 后，我们就可以使用 npm 来安装 Hexo 及其插件了。使用以下命令把 Hexo 安装到全局环境中：

1
npm install -g hexo

提示：国内的同学可以使用淘宝 npm 镜像源加速安装过程，淘宝的 npm 镜像源每隔十分钟会与官方服务器进行全量同步。可以在.bashrc 中设置别名来快速使用淘宝 npm 服务。

1
2
3
4
5
#alias for cnpm
alias cnpm="npm --registry=https://registry.npm.taobao.org \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npm.taobao.org/dist \
  --userconfig=$HOME/.cnpmrc"

使用以下命令手动同步一个模块：

1
cnpm sync <sample>

主程序安装

按照以下步骤新建一个 Hexo 项目，并进行初始化：

1
2
3
4
mkdir <hexo_folder>
cd <hexo_folder>
npm install hexo --save
hexo init

插件安装

1
2
3
4
5
6
7
8
9
10
11
12
npm install hexo-deployer-git --save
npm install hexo-excerpt --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-index --save
npm install hexo-generator-tag --save
npm install hexo-generator-searchdb --save
npm install hexo-pangu --save
npm install hexo-renderer-ejs --save
npm install hexo-renderer-marked --save
npm install hexo-renderer-stylus --save
npm install hexo-server --save

主题下载

1
2
cd <hexo_folder>
git submodule add git@github.com:next-theme/hexo-theme-next.git themes/next

应用主题

在 目录下有网站的配置文件_config.yml，使用文本编辑器更改文件内的 theme 字段为 next，注意不应使用 <tab>，而应该使用空格进行缩进。

1
theme: next

Hexo 常用命令

从模板创建新博文

新建的博文默认保存在 <hexo_folder>/source/_posts/<postName.md>

1
hexo new [layout] postName

其中 layout 为可选参数，用来表示新建博文的样式，默认样式值在_config 中定义。在 scaffolds 目录下保存了所有可用样式文件，用户可以手动添加样式文件，或者更改现有的样式文件，例如 <hexo>/scaffolds/post.md

1
2
3
4
title: {{ title }}
date: {{ date }}
tags:
---

我们可以添加 categories 到样式文件中，这样就可以避免每次手动输入

1
2
3
4
5
title: {{ title }}
date: {{ date }}
categories:
tags:
---

可以添加以下的预定义参数到布局文件头部

参数 描述 默认值
layout 布局
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 文章的评论功能 true
tags 标签 不适用于分页
categories 分类 不适用于分页
permalink 覆盖文章网址 .

为了确保文件头变量有效，在两个大括号间不应有空格

生成静态文件

1
2
# hexo g
hexo generate

运行服务器

运行本地服务器，可以通过浏览器打开 localhost:4000 观察

1
2
# hexo s
hexo server

运行本地服务器到调试状态

1
hexo s --debug

部署到 GitPage

在部署前需要先配置好 git，把公钥添加到了 github 服务器上，同时更改_config.yml 文件，找到以下字段并更改为你想部署的 git 仓库

1
2
3
4
deploy:
      type: git
      repository: git@github.com:<username>/<username>.github.io.git
      branch: master

注意：为了能直接通过 <username>.github.io 来访问你的主页，你需要建立的 github 仓库也应具有相同的名字

执行以下命令提交修改

1
hexo g -deploy

Fancybox

通过在博文的头部添加 photos 项来添加图片到文件开头，图片地址每行添加一个

1
2
3
4
5
title: imyhxy
photos:
- http://www.example.com/photos-0.jpg
- http://www.example.com/photos-1.jpg
---

高级

手动设置博文的 date 和 update 时间：

1
2
3
4
5
6
7
---
title: {{ title }}
date: YYYY-MM-DD HH:MM:SS
update: YYYY-MM-DD HH:MM:SS
tags: {{ tags }}
categories: {{ categories }}
---

设置新建博文文件名格式，在_config.yml 文件中找到 new_post_name 字段，并设置：

1
new_post_name: :year-:month:-:day-:title.md

独立资料文件夹 (Asset) 代表 source 资料文件夹外的所有文档，但你打开了独立资料文件夹功能后，在新建博文时将新建同名的资料文件夹，你可以将你在博文里引用的图片，CSS，JS 等文件放到资料文件夹里，方便管理

1
post_asset_folder: true

资源引用，如果你通过 Markdown 语法引用资源，那么资源不会显示在博客首页上

1
![](/example.jpg)

正确的引用方法是使用内置标签引用：

1
{% asset_path slug [title] %}