使用 Hexo + Github Page 搭建个人博客的实践记录。
更新日志
迁移「添加网站到搜索引擎」部分到另一篇文章。规范了更新日志格式。
更新了「数学公式渲染」、「搜索引擎」、「评论系统」的部分内容。
更新了「数学公式渲染」相关内容。
新增「优化博客性能」相关内容。
新增「添加 RSS 订阅」相关内容。
新增「添加网站到搜索引擎」相关内容。
新增「字体修改」与「启用评论数学公式」相关内容。
发布文章。
环境搭建
前置环境
Node.js & npm
在终端中执行
node -v此外，中国大陆地区使用 npm 需要配置淘宝的镜像源：
npm config set registry https://registry.npmmirror.comGit
在官网上下载 Windows 版本的 Git 安装包并安装。
Hexo
安装
在终端中执行
npm install hexo-cli -ghexo -version本地建站
初始化
新建一个用于存储博客数据的目录(如D:\Blog)并确保该目录为空，随后在终端中执行
cd D:\Blog
hexo inithexo s -gGithub 部署
注册 Github 账号部分不进行叙述，请参考网上教程。
首先打开根目录下站点配置文件 _config.yml，配置有关 deploy 的部分：
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repo: git@github.com:用户名/用户名.github.io.git
branch: master$ npm install hexo-deployer-git --savehexo d用户名.github.io 网站，如果能看到和 hexo s 一样的网站界面，就说明部署成功。更多配置
这部分是我自己的博客配置，仅供参考。
短永久链接
Hexo 默认的永久地址格式是 YYYY/MM/DD/title，如果标题为中文，那就是灾难性的链接长度，因此需要更换更短的永久链接。
本站使用了 hexo-abbrlink 插件固定博文的地址。附上我自己在 _config.yml 中的配置，仅供参考。
# abbrlink config
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
drafts: false #(true)Process draft,(false)Do not process draft. false(default)
# Generate categories from directory-tree
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
enable: true #true(default)
depth: 3 #3(default)
over_write: false
auto_title: false #enable auto title, it can auto fill the title by path
auto_date: false #enable auto date, it can auto fill the date by time today
force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.主题
可以在 Hexo 官网的主题列表里选择心仪的主题进行更换，并参考主题的配置说明进行配置。
本博客使用 Fluid 主题。
站名与图标
按照 Fluid 官方配置文档安装 Fluid 主题后，先在 _config.yml 中修改主站名、描述和网站语言
# Site
title: HPCesia 的摆烂小屋
subtitle: ''
description: '记录自己的摆烂日常与学习记录'
keywords:
author: HPCesia
language:
- zh-CN
- zh-TW
timezone: 'Asia/Shanghai' # 这个默认是主机时区，不用管_config.fluid 中修改一下网站图标。# 用于浏览器标签的图标
# Icon for browser tab
favicon: /img/fluid.png
# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: /img/fluid.png./source 文件夹中，在生成过程中会与主题自带的文件进行合并。字体
本博客使用霞鹜文楷字体，如需配置其他字体，请参考主题配置指南
在 _config.fluid.yml 中搜索 font_family 即可找到字体配置
font:
font_size: 16px
font_family:
letter_spacing: 0.02em
code_font_size: 85%在 font_family 后面添加 "LXGW WenKai Screen"，并在 _config.fluid.yml 中的 custom_css 下添加霞鹜文楷屏幕阅读版网络字体仓库中给出的链接：
custom_css:
- https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css再使用 hexo clean + hexo g，即可更换字体。
头图
在 _config.fluid.yml 中搜索 banner_img 即可找到各页面的头图配置。由于大陆访问 Github 的速度相当便秘，头图应该使用 .webp 格式进行高度压缩，以在质量不太拉胯的前提下加快加载速度。
数学公式
本博客使用 mathjax 进行数学公式渲染，参考主题配置指南进行了相应配置。
如果你想用KaTeX
KaTeX 使用的 hexo-markdown-it 渲染引擎会与 tocbot 冲突，导致侧边栏一级目录跳转失效，经排查发现是一级标题对应的 <h1> 没有 id 导致的
解决方案：在 scripts 目录下新建 hexo-markdown-it-bugfix.js 文件：
hexo.extend.filter.register('after_post_render', (post) => {
if (post.content) {
const uniqueIdStore = {};
post.content = post.content.replace(/<h1>(.*?)<\/h1>/g, function (match, p1) {
const cleanId = p1.trim().toLowerCase()
.replace(/\s+/g, '-')
.replace(/[?#&]/g, '');
let uniqueId = cleanId;
if (cleanId === '') {
uniqueId = 'default';
}
if (uniqueIdStore[cleanId]) {
uniqueId = `${cleanId}-${uniqueIdStore[cleanId]}`;
uniqueIdStore[cleanId] += 1;
} else {
uniqueIdStore[cleanId] = 1;
}
if (!/<h1 id=".*?">/.test(match)) {
return `<h1 id="${uniqueId}">${p1}</h1>`;
}
return match;
});
}
});id 的 <h1> 添加正确的 id。评论
本博客使用 Twikoo 评论系统，请参考配置指南进行配置。
本博客使用的配置方法为配置指南中的 MongoDB Atlas + Hugging Face.
主题需要增加自定义 .js 文件来让 Twikoo 评论也能渲染公式。在 _config.fluid.yml 中的 custom_js 下添加
custom_js:
- https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js
- https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js如果使用的是 mathjax 进行文章数学公式渲染，则还需要在 custom_css 下添加
custom_css:
- https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css # Twikoo Katex 数学公式渲染再重新 hexo clean + hexo g，即可在评论区激活数学公式渲染。
添加 RSS 订阅
安装 hexo-generator-feed 插件:
npm install hexo-generator-feed --save_config.fluid.yml 中追加配置项：# hexo-generator-feed
plugins:
hexo-generator-feed
feed:
enable: true
type: rss2 # 类型 atom | rss2
path: rss2.xml # 文件路径, 默认是 atom.xml | rss2.xml
limit: 5 # 展示文章的数量, 使用0或则false代表展示全部
hub: #
content: # 在RSS文件中是否包含内容, true | false, 默认不填为 false
content_limit: 140 # 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
content_limit_delim: ' ' # 截取描述的分隔符, 以指定分隔符作为截取结束的标志.
order_by: -date
autodiscovery: true
template:<a href="/rss2.xml" target="_blank" rel="nofollow noopener"><i class="iconfont icon-rss"></i>RSS</a> 进行展示就行，我是放在页脚。更多主题修改
参看我的另一篇文章
将网站添加到搜索引擎
本节内容已整体迁移至另一篇文章。
优化博客性能
这段内容参考使用gulp压缩博客静态资源 | Akilarの糖果屋编写。
安装插件
在博客根目录下打开终端，输入：
npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件npm install gulp-htmlclean --save-dev # 压缩 html 文件
npm install gulp-html-minifier-terser --save-dev # 压缩 html 文件
npm install gulp-clean-css --save-dev # 压缩 css 文件
npm install gulp-terser --save-dev # 压缩 js 文件
npm install gulp-fontmin --save-dev # 不使用本地字体包可以不安装配置 gulp
在博客根目录下新建 gulpfile.js：
//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', async () => {
gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(terser())
.pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
return gulp.src(['./public/**/*.css'])
.pipe(cleanCSS({
compatibility: 'ie11'
}))
.pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, //清除html注释
collapseWhitespace: true, //压缩html
collapseBooleanAttributes: true,
//省略布尔属性的值，例如：<input checked="true"/> ==> <input />
removeEmptyAttributes: true,
//删除所有空格作属性值，例如：<input id="" /> ==> <input />
removeScriptTypeAttributes: true,
//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,
//删除<style>和<link>的 type="text/css"
minifyJS: true, //压缩页面 JS
minifyCSS: true, //压缩页面 CSS
minifyURLs: true //压缩页面URL
}))
.pipe(gulp.dest('./public'))
});
//压缩字体
function minifyFont(text, cb) {
gulp
.src('./public/fonts/*.ttf') //原字体所在目录
.pipe(fontmin({
text: text
}))
.pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
.on('end', cb);
}
gulp.task('mini-font', (cb) => {
var buffers = [];
gulp
.src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
.on('data', function (file) {
buffers.push(file.contents);
})
.on('end', function () {
var text = Buffer.concat(buffers).toString('utf-8');
minifyFont(text, cb);
});
});
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
'compress', 'minify-css', 'minify-html', 'mini-font'
))hexo g 后手动运行 gulp 即可压缩文件。 ### 自动化配置 在博客根目录下找到 package.json，在 scripts 键下添加新脚本："scripts": {
"postbuild": "gulp"
}scripts 目录下新建 generator.js，添加以下内容：hexo.extend.generator.register('postbuild', function () {
const { exec } = require('child_process');
exec('npm run postbuild', (err, stdout, stderr) => {
if (err) {
console.error(`Error: ${stderr}`);
} else {
console.log(`Output: ${stdout}`);
}
});
});hexo g 后就会自动运行 gulp 对博客进行压缩。
评论 ()
