鼠儿果，恢复少量神

0%

使用 Hexo 搭建博客并部署到 Github

发表于 分类于 Valine：

一份使用 Hexo 搭建博客并部署到 Github 的简要指南。
网上不少博客使用的 NexT 主题还是 v5.1.x 的版本（官网，Github），但事实上这个版本已经不再维护。最新版本已经更新到 v7.6.0 （官网，Github）。

我在使用 v5.1.x 版本时就遇到了 Bug，菜单栏和侧边栏的链接解析一直是错误的，网上教程很多是删除主题配置文件对应位置的空格，但这仅能修复菜单栏的问题，侧边栏的问题无法修复。最好的方案是把 NexT 更新到最新版本。
这里有一份 NexT 官网给的指南：Update from NexT v5.1.x

下载安装和环境配置

参考 Hexo 文档

安装 Git 和 Node.js

安装 Hexo

使用 npm 命令安装

1
$ npm install -g hexo-cli

安装完毕后，使用 npx hexo <command> 执行 Hexo 命令。

新建博客的本地目录

1
2
3
$ npx hexo init <blog-folder>
$ cd <blog-folder>
$ npm install

安装并启用 NexT 主题

进入博客的本地目录后

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

注意，不要使用这个不再维护的项目地址：https://github.com/iissnan/hexo-theme-next

然后，在站点配置文件（博客本地目录下的 _config.yml）中修改

1
theme: next

使用 VS Code 作为 Markdown 编辑器

安装 Markdown Preview Enhanced 插件即可。

Hexo 的基本使用

新建页面

1
$ npx hexo new "My New Post"

More info: Writing

运行服务

1
$ npx hexo server

More info: Server

根据 Markdown 文件生成静态 html 文件

1
$ npx hexo generate

More info: Generating

部署

1
$ npx hexo deploy

More info: Deployment

一般，在部署前需要重新生成静态页面，即需要运行

1
2
3
$ npx hexo clean
$ npx hexo generate
$ npx hexo deploy

部署到 Github

参考这篇博客：使用Github搭建Hexo技术博客托管在GitHub Pages上

创建 Github Pages 并 SHH 授权

在 Github 上创建以 <username>.github.io 为名的 Repo。
创建 SHH 密钥，在 Git Bash 中输入

1
$ ssh-keygen -t rsa -C "<email-address>"

然后，查看目录 C:/Users/<username>/.ssh 下是否有两个文件：私钥文件 id_rsa 和公钥文件 id_rsa.pub。
打开 id_rsa.pub 并复制其内容，访问 https://github.com/settings/ssh 新建密钥后粘贴 id_rsa.pub 中的内容。

安装部署相关的 Hexo 插件

在本地博客目录下

1
2
$ npm install hexo -server --save
$ npm install hexo-deployer-git --save

然后，编辑站点配置文件
1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: git@github.com:<username>/<username>.github.io.git,master
    coding: git@git.coding.net:<username>/<username>.git,master

注意：密钥文件在原来的目录 C:/Users/<username>/.ssh 下时，系统会自动识别。

部署

在检查本地站点无误后，运行

1
$ npx hexo deploy

站点配置

添加菜单

创建 About 菜单

1
$ npx hexo new page about

生成 source/about 目录，修改其中 index.md 文件内容即可。

创建 Categories 菜单

1
$ npx hexo new page categories

生成 source/categories 目录，修改其中 index.md 文件标题：

1
2
3
title: 分类
date: xxxx-xx-xx xx:xx:xx
type: "categories"

创建 Tags 菜单

1
$ npx hexo new page tags

生成 source/tags 目录，修改其中 index.md 文件标题：

1
2
3
title: 标签
date: xxxx-xx-xx xx:xx:xx
type: "tags"

启用菜单

在主题配置文件（themes/next 下的 _config.yml）启用

1
2
3
4
5
6
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

添加站内搜索功能

首先，在本地博客目录下安装搜索插件包

1
2
$ npm install hexo-generator-search --save
$ npm install hexo-generator-searchdb --save

然后，打开站点配置文件，增加以下内容

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

最后，打开主题配置文件，启用搜索功能

1
2
local_search:
  enable: true

添加动态背景

以 canvas-nest 为例，在本地博客目录下进入 themes/next 目录后安装至其下的 source/lib 目录

1
2
$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

然后，修改主题配置文件

1
2
3
4
5
6
7
8
9
10
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,0" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

添加评论系统

参考 NexT 官网的说明：Comment Systems
以 Valine 为例，先去 LeanCloud 注册帐号并创建项目，获得 App ID 和 App Key，然后修改主题配置文件 valine 下的内容。

启用 Latex 公式渲染

参考 NexT 官网的说明：Math Equations
首先，在本地博客目录下卸载原来的 hexo-renderer-marked 渲染工具，然后安装新的 hexo-renderer-kramed 渲染工具

1
2
$ npm uninstall hexo-renderer-marked
$ npm install hexo-renderer-kramed

然后，修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

这里的 per_page 设置为 true 时，需要在（需要公式渲染的）页面标题处设置 mathjax: true 才会开启公式渲染，如

1
2
3
4
---
title: A Post with Math Equations
mathjax: true
---

行内公式渲染问题

在行内公式中，下划线（_）会被解析成 Markdown 语法中斜体字体的开始标记，这种时候可以使用 \_。更好的处理方案是，到博客根目录下，找到 node_modules/kramed/lib/rules/inline.js，把第 11 行的 escape 变量的值做相应的修改：

1
2
// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

再把第 20 行的 em 变量的值也做相应的修改：
1
2
// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

然后重新渲染所有页面即可。

博客项目迁移

参考这篇博客：hexo：更换电脑，如何继续写博客

安装 Git 和 Node.js

安装 Hexo

拷贝以下几个文件和目录

1
2
3
4
5
_config.yml
package.json
scaffolds/
source/
themes/

安装模块

进入博客的本地目录后

1
2
3
4
$ npm install
$ npm install hexo-deployer-git --save
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save