搭建Hexo并使用vivia主题再托管到GithubPage

网络系列
1.7k 词

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

如何安装？

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1
npm install -g hexo-cli

进阶安装和使用

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

1
npm install hexo

安装以后，可以使用以下两种方式执行 Hexo：

1
npx hexo

Linux 用户可以将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo：

1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

什么是 Vivia？

Vivia 是一个基于 Landscape 进行二次开发的 Hexo 主题，其极简与现代化的设计受到了不少 Hexo 用户的好评。

如何安装 Vivia 至你的博客？

Vivia 官方提供了 2 种安装方式：

通过 npm 安装（推荐）

1
npm install hexo-theme-vivia

通过 Git 安装

1
2
3
4
5
# 将主题下载至 /themes/vivia 目录
git clone https://github.com/saicaca/hexo-theme-vivia.git themes/vivia

# 安装主题的依赖
npm install colorjs.io stylus hexo-symbols-count-time

创建主题配置文件

将主题的示例配置文件复制至 Hexo 根目录：

  • 若通过 npm 安装，文件位于 node_modules/hexo-theme-vivia/example_zh_CN_config.vivia.yml
  • 若通过 Git 安装，文件位于 themes/vivia/example_zh_CN_config.vivia.yml

复制后，将文件重命名为 _config.vivia.yml。

自定义主题

修改 _config.vivia.yml 填写自定义配置。

将 Vivia 设置为主题

1
hexo config theme vivia

创建 about 页面

1
hexo new page about

禁用归档页面的分页

修改 _config.yml 填写下列配置：

1
2
archive_generator:
  per_page: 0

若不添加此配置，归档页最多只能显示 10 篇文章。

如何部署到 Github Page 上？

首先，你的 Git 得绑定一下你的 Github 账户：

1
2
git config --global user.name "Github 用户名"
git config --global user.email "Github 注册邮箱"

接着再生成一下密钥：

1
ssh-keygen -t rsa -C "Github 注册邮箱"

一路回车就行。

然后前往 /root/.ssh，复制一下 id_rsa.pub 里面的内容。

前往 Github，进入账户的 Setting -> SSH and GPG keys -> New SSH Key。

其中 Title 随便填，Key 里面填写 id_rsa.pub 里的内容，其他不用管。

接着创建一个仓库，因为你要使用 Github Page，所以仓库名一定要为：你的Github账户名.github.io。

其次，仓库一定要设置为 Public，不然无法访问。

创建完成之后复制一下你仓库的 Git 链接。

进入博客根目录，打开 _config.yml。

修改 deploy 部分为：

1
2
3
4
deploy:
  type: git
  repo: 这里填写Git链接
  branch: gh-pages

接着返回控制台，使用命令来清除缓存并推送至 Github：

1
hexo clean && hexo deploy

最后访问 Github用户名.github.io，看看是否可以正常访问。

如果无法访问，请检查你的仓库设置是否如下图所示：

  • General:
    General
  • Pages:
    Pages