使用Hexo搭建个人博客简记

写在前面

如果本地(-s)正常，deploy上去挂掉了：建议等待一会并清除浏览器缓存后刷新，一般是缓存问题。

如果出现了莫名其妙的显示异常：先尝试hexo clean！

Hexo博客基本部分搭建

获取域名

由于对域名（仅用于个人网站）和服务器暂时没有什么较大的需求，直接使用Github Pages作为个人博客运作。

登录到Github后直接创建新仓库New Repository，仓库名为*github_username*.github.io [1]

安装Git并配置SSH Key

使用Git作为个人博客的版本控制系统。从Git - Downloading Package (git-scm.com)下载并安装。全程按照默认配置安装即可。完成后打开GitBash做如下设置：

1
2
git config --global user.name "*github_username*"
git config --global user.email "*github_useremail*"

随后生成SSH Key：

1
ssh-keygen -t rsa -C "*github_useremail*"

随后三个询问直接回车。

随后找到SSH Key的公钥文件（通常在C:\*windows_username*\.ssh_rsa.pub）用记事本打开并全文复制。在SSH and GPG keys (github.com)选择New SSH Key，title随意，Key填入复制的Key即可。

在GitBash中检测设置是否成功，输入ssh [email protected]，第一次设定时会提示 The authenticity of host ‘…’ can’t be enstablished.是正常情况。在接下来的询问中输入yes即可完成配置。

安装Node.js

Download | Node.js (nodejs.org)下载Node.js并安装（包含环境变量和npm的安装）

通过在命令行中输入：

1
2
node -v
npm -v

来检查npm和node.js是否安装成功

安装Hexo

打开命令行，cd /d 至想要存放博客文件的文件夹。

安装hexo并初始化：

1
2
npm install -g hexo-cli
hexo init blog

检测是否成功建立网站：

1
2
3
hexo new test_my_site
hexo g
hexo s

（分别对应创建一篇新文章，生成整个博客，启动本地预览）

然后浏览器打开localhost:4000即可看到博客的本地预览。

网站推送

本地预览需要推送到GitHub Pages才能正常访问。

打开blog根目录下的站点配置文件（区别于主题的配置文件）_config.yml，翻到最后将deploy一段（若没有则添加）修改为

1
2
3
4
deploy:
  type: git
  repo: https://github.com/*Github_Username*/*Github_Username*.github.io.git
  branch: master

注意：两格缩进和冒号后的空格都不能略去，属于强制格式要求。

保存后在命令行中安装部署插件：

1
npm install hexo-deployer-git --save

随后生成并部署网站：

1
2
3
hexo clean
hexo g
hexo d

博客自此上线运行。

发布文章

如下操作

1
hexo n "*YOUR_POST_NAME*"

随后在blog\_posts中打开对应md编写文章（Markdown好文明！）

完成写作/编辑之后：

1
2
hexo g
hexo d

即可推送博客更新。

主题安装：以Next为例

关于站点和主题设置文件

站点设置文件：博客的根目录下_config.yml（Hexo相关的基本设定）

主题设置文件：根目录/themes/*主题名*/_config.yml（主题相关的设定）

常见的一种便于处理的方法是把主题设置文件拷贝到博客根目录下，更名为_config.*主题名*.yml

站点信息的简单个性化设置

打开博客根目录下的_config.yml，site栏目下（其实就是第一个）可做博客信息的修改

1
2
3
4
5
6
title: （网页标题）
subtitle: ''（网页副标题）
description: ''
keywords:
author: （作者，会显示在页面底端）
language: zh-CN（用zh-Hans也可）

下方的URL栏目中的url更改为你的博客地址（加project似乎会导致推过去的网页链接到错误的子页面，尚且不明白其中原因）：

1
url: https://wortalicia.github.io/

主题安装与设定

正题来了。

直接选用了主题Next，界面美观且可玩性较强。

安装直接通过git clone操作进行（默认cd到博客根目录下执行）

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

安装完成后修改站点配置文件_config.yml，找到并修改：

1
theme: next

即可启用Next主题。

在_config.next.yml中可以修改Next自带的几种样式（默认是Muse）：

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

数学公式支持和部分Markdown语法适配(转义相关)

在文章中添加注释

我用过的Markdown编辑器（Typora，Marktext）都支持注释功能，但是这似乎并不是Markdown的原生功能（？），导致使用Marktext写了注释之后放上来会被直接吃掉显示成一个超链接……

为了解决这个问题，我们需要安装一个拓展插件：hexo-reference（博客根目录下执行）

1
npm install hexo-reference --save

然后就按照通常操作即可

给文章添加标签分类

在文章的front-matter中添加即可，示例如下：

1
2
3
4
5
title: 使用Hexo搭建个人博客简记
date: 2022-03-12 18:58:29
-------以上为原有内容----------
tags: [Hexo,博客搭建]
categories: [网站技术]

添加数学公式支持（hexo-renderer-pandoc+Mathjax）

作为理科院系学生，发博文自然是离不开数学公式的。

然而同样的，$ L^AT_EX$ 数学公式支持同样也不是Markdown的原生内容，不受Hexo内置的Markdown渲染引擎支持。

解决这个问题需要我们更换渲染引擎（从默认的hexo-renderer-marked切换到hexo-renderer-pandoc）：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

同时安装Pandoc （装好以后重启一下电脑）

依照主题不同，可能还需要:

  1. 修改主题配置，开启数学公式渲染器（Fluid参照配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)，Next自行百度 总之就是改主题配置文件）

  2. 在文章的front-matter里加入

    1
    2
    mathjax: true
    (or math: true)

主题的美化（转Fluid了 搁置）

(以下内容写于2022/5/4)

Next实在太平淡了于是就换了Fluid，Next主题设置懒得写了，Fluid的自定义部分基本全在配置指南 | Hexo Fluid 用户手册 里了，所以没什么好写的。

等我想起来有什么值得引入的第三方功能/效果再加进来吧。

以及一些补充：

关于某些公式显示奇妙换行BUG

mathjax的默认加载格式是cHTML(commonHTML)，在Fluid下似乎存在莫名其妙给公式换行的问题。修正方法：\node_modules\hexo-renderer-mathjax\mathjax.html中修改渲染使用的预制配置文件，改为TeX-AMS-MML_HTMLorMML(最底下看着像这个的那段改掉)，之后默认使用的就是HTML-CSS方式处理，问题解决。

关于引入外部字体

暂且选择使用思源宋体，直接引用一下别人的

代码：

1
2
3
4
5
6
7
8
9
10
11
12
// Font
 $font-size = theme-config("font.font_size", "16px")
 $letter-spacing = theme-config("font.letter_spacing", "0.02em")
 $font-family = theme-config("font.font_family", '"Noto Serif SC",var(--font-family-sans-serif)')


font:
  font_size: 18px
  font_family: Noto Serif SC
  custom_css: https://fonts.proxy.ustclug.org/css2?family=Noto+Serif+SC&display=swap
  letter_spacing: 0.02em
  code_font_size: 85%

来源：Hexo 美化指北 - 哔哩哔哩 (bilibili.com)

如果主题是直接npm install的考虑更改node_modules下的hexo-theme-xx文件夹内的文件（不推荐）

应该有更好的办法，但我多次尝试使用@font_face在自定义css中引入本地字体都未能成功，故选择修改内部文件来像使用正常字体族那样使用外部字体。

附：常用的Hexo命令及其简写

npm install hexo -g #安装Hexo

npm update hexo -g #升级

hexo init #初始化博客

命令简写

hexo n “我的博客” == hexo new “我的博客” #新建文章

hexo g == hexo generate #生成

hexo s == hexo server #启动服务预览

hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器

hexo server -s #静态模式

hexo server -p 5000 #更改端口

hexo server -i 192.168.1.1 #自定义 IP

hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
  1. 全文所有的github_username之类的写法均直接替换成相应内容，不带’*’。 ↩︎
网站技术
#Hexo #博客搭建
使用Hexo搭建个人博客简记
https://blog.alicelab.uk/2022/03/12/使用Hexo搭建个人博客简记/
作者
Alice Lin
发布于
2022年3月12日
许可协议