记录搭建GitHub Page+Hexo+NexT博客全过程

发表于 2021-07-19 更新于 2022-01-10 分类于 Hexo

安装环境

macOS 11.4

[20220110重装]: macOS 12.1

前置依赖

Node.js ( $\ge10.13$, $12.0$ suggested )
Git

本次使用的git版本为内置的git version 2.30.1 (Apple Git-130)，Nodejs采用brew install node进行安装。

[20220110重装]: git --version: git version 2.32.0 (Apple Git-132)

安装 & 部署

安装

安装nodejs后直接npm install -g hexo-cli安装完整的Hexo。

[20220110重装]: npm遇到ECONNRESET问题，在npm中通过npm config set加入以下config：

1 2	proxy = "http://127.0.0.1:7890/" registry = "http://registry.npmjs.org/"

部署

建站的过程不长，在terminal里面敲（~~fuzhizhantie~~）了几行命令就差不多了。命令如下：

1
2
3

hexo init <folder> # 其中<folder>为指定的hexo在本地存放的路径
cd <folder>
npm install

部署到GitHub Page

首先需要新建一个repository，名字为{Username}.github.io。

部署到GitHub Page则需要修改deploy部分：

[20220110重装]: _config.yml

deploy:
  type: git
  repo: git@github.com:{Username}/{Username}.github.io.git
  branch: master

在确认本地的Hexo安装了git-deployer（npm install hexo-deployer-git --save）后，执行ssh-keygen -t rsa -b 4096 -C "email@git.com"生成public key（过程中要求输入直接回车即可），并将~/.ssh/id_rsa.pub中的内容添加到GitHub-Settings-SSH-SSH keys中，然后执行hexo d将Hexo部署到GitHub。

[20220110重装]: 更换分支需要修改.travis.yml中的branches和GitHub-Settings-Pages中的source-branch

配置

参考：Official

在_config.yml中设置Site和URL部分的参数，如title、author、url等。

主题

本次采用了NexT.Muse，参考Getting Started。

常用指令

参考：Official

new

hexo new [layout] <title>: 新建一篇文章。layout参数可以省略，默认值为_config.yml中的default_layout。标题中若有空格则需要用引号包围整个标题。

参数	描述
`-p`,`--path`	自定义新文章路径
`-r`,`--replace`	如果存在同名文章，将其替换
`-s`,`--slug`	文章的Slug，作为新文章的文件名和发布后的URL

generate

hexo generate, hexo g: 生成静态文件。

选项	描述
`-d`,`--deploy`	文件生成后立即部署网站
`-w`,`--watch`	监视文件变动
`-b`,`--bail`	生成过程中如果发生任何未处理的异常则抛出异常
`-f`,`--force`	强制重新生成文件使用该参数的效果接近`hexo clean && hexo generate`
`-c`,`--concurrency`	最大同时生成文件的数量，默认无限制

publish

hexo publish [layout] <filename>: 发表草稿

server

hexo server: 启动服务器。默认情况下，访问网址为: http://localhost:4000/

选项	描述
`-p`,`--port`	重设端口
`-s`,`--static`	只使用静态文件
`-l`,`--log`	启动日志记录，使用覆盖记录格式

deploy

hexo deploy, hexo d: 部署网站。

参数	描述
`-g`,`--generate`	部署之前预先生成静态文件

render

hexo render <file1> [file2] ...: 渲染文件。

参数	描述
`-o`,`--output`	设置输出路径

migrate

hexo migrate <type>: 从其他博客系统迁移内容

clean

hexo clean: 清除缓存文件（db.json）和已生成的静态文件（public）。

在某些情况（尤其是更换主题后），如果发现更改无论如何也不生效，可能需要运行该命令。

list

hexo list <type>: 列出网站资料。

version

hexo version: 显示Hexo版本。

遇到的问题

主题部署

Q：主题加载失败，界面一片混乱。
A：将_config.yml中的url设置为GitHub Page主页的地址。

主题内修改

back2top.scrollpercent: true
reading_progress.enable: true
reading_progress.color: #0077ff
math.mathjax.enable: true
math.katex.enable: true
footer.since: $2021$
footer.icon.animated: true

主题内math.mathjax.enable的修改目的是为了开启mathjax渲染支持。在不调整math.every_page的情况下，若要获得mathjax渲染支持则需要在post的front-matter中声明mathjax: true。

主题设置参考：Zhihu-hexo+next个性化配置, CSDN-Hexo-Next 主题博客个性化配置超详细，超全面(两万字), 简书-Hexo的Next主题详细配置, Hexo 安装及配置, Hexo-Next 安装及使用, Hexo-Next 配置（基础篇）, Hexo-Next 配置（插件篇）, Hexo-Next 配置（进阶篇）

添加头像

在themes/next/source/images中放入头像文件，并在_config.next.yml中的avatar一栏修改url即可。

参考

Hexo.io