Hexo

我の碎碎念

哈哈哈，终于搭建好自己的博客啦！当时看到人家的博客做的好好看，所以自己也忍不住想入手了~那么第一篇博客就纪录关于我搭建博客所使用的框架 —— Hexo（开源的静态博客生成器），方便以后有需要重新搭建框架的时候使用，从零开始的 Hexo 搭建教程！( •̀ ω •́ )y

Hexo 框架介绍

Hexo 是一个快速、简洁且高效的博客框架，我理解就是专门为写博客而诞生的。Hexo 支持使用 Markdown 来解析文章，是可以去主题官网选择好看的主题，并且能魔改主题文件生成个性化的静态网页，然后一键部署到网站上，制作出可以和大家一起分享技术、心得、生活等的个人博客网站 ~（我现在使用的是框架 Hexo +主题 Butterfly）

安装 Hexo 前提

安装 Hexo 首先有个前提，就是你得先安装好 Node.js 以及 Git，并且 Node.js 的版本不能低于 10.13（官方建议使用 12.0 及以上版本），还没安装的铁铁，可以先去下载一下 Node.js 以及 Git，安装了的铁铁可以继续往下看安装 Hexo 步骤啦~

切换淘宝镜像

由于 node 安装插件是从国外服务器下载，受网络影响大，速度慢且可能出现异常。所以如果 npm 的服务器在中国就好了，所以淘宝团队（阿里巴巴旗下业务阿里云）干了这事，让我们可以使用阿里布置在国内的服务器来进行 node 安装，使下载速度更快些

  1. 切换淘宝镜像：
1
npm config set registry https://registry.npm.taobao.org
  1. 切回源：
1
npm config set registry https://registry.npmjs.org/）

安装 Hexo

首先，选择你想要存放笔记的地方，新建一个文件夹，然后在你新建笔记文件夹的目录下右击选择 Git Bash Here

全局安装 Hexo 脚手架工具

1
npm install hexo-cli -g

初始化 Hexo

这里才是 Hexo 框架的搭建

1
hexo init

下载 pug 以及 stylus 的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

下载 Git 连接远程仓库

1
npm install hexo-deployer-git --save

Hexo 三件套

  1. 查看 hexo 版本
1
hexo -version
  1. 清空已有 hexo 网站文件
1
hexo clean

或

1
hexo cl
  1. 依据网页文本与新的 CSS 样式生成新网站文件（source 这个文件会在 hexo g 打包时打包到 public 中）
1
hexo generate

或

1
hexo g
  1. 启动本地服务器，可以在 localhost:4000 查看网站修改效果
1
hexo server

从 GitHub 仓库下载目标：Butterfly 主题

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

Hexo 三件套

  1. 清除缓存
1
hexo cl
  1. 提交到本地
1
hexo g
  1. 运行 Hexo 跑起来，查看效果
1
hexo s

个性化配置自己的 Hexo

  1. 配置文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink
1
npm install hexo-abbrlink --save
  1. 进入根目录中配置\ _config.yml，替换 permalink
1
permalink: posts/:abbrlink.html
  1. 进入根目录中配置\ _config.yml，修改语言 language
1
language: zh-CN

一、配置插件

  1. 配置文章链接转数字或字母
    复制 github 文档配置文章链接转数字或字母所需的配置到根目录中配置\ _config.yml 中最底下
1
2
3
4
# abbrlink config
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
  1. 本地搜索
    到根目录中配置\ _config.yml 中最底下添加
1
2
3
4
search:
path: search.xml
field: all
content: true

在根目录创建\ _config.butterfly.yml 文件，复制 themes/butterfly/_config.yml 内容到根目录_config.butterfly.yml 中

在\ _config.butterfly.yml 中搜索 local_search 替换

1
2
3
4
5
# Local search
local_search:
enable: true
preload: false
CDN:

二、个性化个人主页资料

在根目录\ _config.yml 中
例如我的：

1
2
3
4
5
6
7
8
# Site
title: 兜 叽 咕 の 小 小 世 界 # 封面显示标题
subtitle: '兜叽咕の博客'
description: '老骥伏枥，志在千里。' # 描述站点
keywords: '兜叽咕,IT,分享,日常,浪漫 de 唯物主义' # 关键词，搜索时可检索到你的博客（可写 150 字左右）
author: 兜叽咕 # 作者
language: zh-CN
timezone: ''

因为我们修改的是配置文件需要重新运行，修改文章之类就不用重启（终止进程，hexo 三件套重跑一遍）

三、将博客部署到网站上

  1. 注册登录 github
  2. 创建仓库（严格命名：你的用户名.github.io）
  3. 配置 ssh（因为我自己配置过，所以大家可以去看大佬的教程）
  4. 配置完 ssh，就可以得到 ssh 地址，将 ssh 地址复制到根目录中配置_config.yml 中 deploy（替换）
1
2
3
4
5
   deploy:

- type: git
  repository: git@github.com:Dou-JiGu/Dou-JiGu.github.io.git # ssh 地址
  branch: main # 分支

hexo 三件套

最后一步换为 hexo d 提交，也可以使用联合命令，然后就可以登录 github 到你的仓库（你的用户名.github.io 仓库）查看你上传的文件

访问博客

之后复制仓库名：你的用户名.github.io 仓库 即可通过网页访问你的博客了~

四、继续配置

到根目录中配置\ _config.yml 中 deploy 中新加的百度主动推送（格式一定要对齐！）

1
2
3
4
5
6
deploy:

- type: git
  repository: git@github.com:Dou-JiGu/Dou-JiGu.github.io.git # ssh 地址
  branch: main # 分支
- type: baidu_url_submitter # 这是新加的百度主动推送

到根目录中配置\ _config.yml 中最后添加配置代码，并替换 theme

1
theme: butterfly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# Live2D

## https://github.com/EYHN/hexo-helper-live2d

live2d:
enable: true #开关插件版看板娘
scriptFrom: local # 默认

# scriptFrom: https://cdn.cbd.int/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url

tagMode: false # 标签模式, 是否仅替换 live2d tag 标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-koharu # 可替换模型 # npm-module package name # use: https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json # 你的自定义 url
display:
position: left #控制看板娘位置
width: 150 #控制看板娘大小
height: 300 #控制看板娘大小
mobile:
show: false # 手机中是否展示

# https://github.com/hexojs/hexo-generator-sitemap

sitemap:
path: sitemap.xml
rel: false
tags: true
categories: true

# https://github.com/coneycode/hexo-generator-baidu-sitemap

baidusitemap:
path: baidusitemap.xml

# https://github.com/hexojs/hexo-generator-feed

#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
rss: /atom.xml

# Extensions

plugins: - hexo-generator-feed - hexo-generator-baidu-sitemap - hexo-generator-sitemap

提示

要在 hexo generate 或 hexo deploy 之前使用追番插件，否则不会显示追番页面！

更新番剧命令:

1
hexo bangumi -u

删除数据命令:

1
hexo bangumi -d

追番插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
https://github.com/HCLonely/hexo-bilibili-bangumi

bangumi: # 追番设置
enable: true
path:
vmid: 275606116 # 替换为自己的 b 站的用户 id
title: '追番列表'
quote: '生命不息，追番不止！'
show: 1
lazyload: false
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value
cinema: # 追剧设置
enable: false
path:
vmid: 275606116 # 替换为自己的 b 站的用户 id
title: '追剧列表'
quote: '生命不息，追剧不止！'
show: 1
lazyload: true
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value

# 百度主动推送

# https://github.com/huiwang/hexo-baidu-url-submit

baidu_url_submit:
count: 1 # 提交最新的多少个链接
host: www.wowowo.top # 在百度站长平台中添加的域名
token: SzqY2ifHCYLLf4jH # 秘钥
path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里

# APlayer

# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

aplayer:
meting: true
asset_inject: false

一一装上插件

安装 live2d

1
2
# 安装 live2d
npm install --save hexo-helper-live2d

安装模型

1
2
# 安装模型
npm install --save live2d-widget-model-koharu # 可替换模型

安装 sitemap ，方便爬虫爬我们的网站

1
2
3
# 安装 sitemap ，方便爬虫爬我们的网站
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save-dev

装 Rss ，也类似方便爬虫爬我们的网站

1
2
# 装 Rss ，也类似方便爬虫爬我们的网站
npm install hexo-generator-feed --save

追番插件

1
2
3
# 追番插件
npm install hexo-bilibili-bangumi --save
（配置一下，vmid 需要自己去拿！）

百度主动推送

1
2
3
4
5
6
7
8
9
10
11
# 百度主动推送
记得修改一下百度主动推送，参照：

# https://github.com/huiwang/hexo-baidu-url-submit

baidu_url_submit:
count: 1 # 提交最新的多少个链接
host: wowowo.top # 在百度站长平台中添加的域名，改成自己的站点
token: 自己的秘钥 # 秘钥
path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里
（具体看大佬的教程）

一些配置

  1. 将主题配置中的懒加载 lazyload:enable 打开，把根目录配置里的懒加载关闭（避免冲突）

  2. 到主题配置\ _config.butterfly.yml 里，查找 aplayerInject，全部改为 true，防止重复加载

1
2
3
4
5

aplayerInject: # 防止重复加载
enable: true
per_page: true

  1. 将音乐代码放到主题配置_config.butterfly.yml 里的 Inject 中选择位置 head/bottom，将语法复制进去
1
2
3
4
5
6

# aplayer 音乐

- <div class="aplayer no-destroy" data-id="1708664797" data-server="tencent" data-type="playlist"   data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>
  （记得改 data-id 以及 data-server，具体看大佬教程，可以去github搜aplayer音乐看如何配置）

五、装配 PWA

用处：

  1. 右上角可以有安装按钮，可以离线看博客
  2. 可以有缓存，加快我们的访问速度
  3. 博客更新后，右上角会有通知
    安装必要插件
1
2
3

npm install --global gulp-cli # 全局安装 gulp 命令集
npm install workbox-build gulp --save # 安装 workbox 和 gulp 插件

压缩 html 插件

1
2
3
4
# 压缩 html 插件

npm install gulp-htmlclean --save-dev
npm install --save gulp-htmlmin

压缩 css 插件

1
2
3
# 压缩 css 插件

npm install gulp-clean-css --save-dev

压缩 js 插件

1
2
3
4
5
6
7
8
9
10
11
# 压缩 js 插件

# 使用 babel 压缩 js，与 terser 二选一

npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env

# 使用 terser 压缩 js，与 babel 二选一（建议 terser 压缩 js，babel 容易混淆代码语义）

npm install gulp-terser --save-dev
npm install --save-dev gulp-babel @babel/core @babel/preset-env

压缩图片插件

1
2
3
# 压缩图片插件（图片压缩，一定是 node12.x 才有用，node16.x 就没有用了）

npm install --save-dev gulp-imagemin

压缩字体插件

1
2
3
4
5

# 压缩字体插件(font-min 仅支持压缩 ttf 格式的字体包)

npm install gulp-fontmin --save-dev

在根目录的 package.json 中添加

1
2
3

"type": "module",

在根目录新建文件 gulpfile.js，复制以下内容到 gulpfile.js 中（主要用处：用来压缩）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

import gulp from 'gulp';
import cleanCSS from 'gulp-clean-css';
import htmlmin from 'gulp-htmlmin';
import htmlclean from 'gulp-htmlclean';
import workbox from 'workbox-build';
import fontmin from 'gulp-fontmin';

// 若使用 babel 压缩 js，则取消下方注释，并注释 terser 的代码
// var uglify = require('gulp-uglify');
// var babel = require('gulp-babel');

// 若使用 terser 压缩 js
import terser from 'gulp-terser';

//pwa
gulp.task('generate-service-worker', () => {
return workbox.injectManifest({
swSrc: './sw-template.js',
swDest: './public/sw.js',
globDirectory: './public',
globPatterns: [
// 缓存所有以下类型的文件，极端不推荐
// "**/*.{html,css,js,json,woff2,xml}"
// 推荐只缓存 404，主页和主要样式和脚本。
'404.html',
'index.html',
'js/main.js',
'css/index.css',
],
modifyURLPrefix: {
'': './',
},
});
});

//minify js babel
// 若使用 babel 压缩 js，则取消下方注释，并注释 terser 的代码
// gulp.task('compress', () =>
// gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
// .pipe(babel({
// presets: ['@babel/preset-env']
// }))
// .pipe(uglify().on('error', function(e){
// console.log(e);
// }))
// .pipe(gulp.dest('./public'))
// );

// minify js - gulp-tester
// 若使用 terser 压缩 js
gulp.task('compress', () =>
gulp
.src([
'./public/**/*.js',
'!./public/**/*.min.js',
'!./public/js/custom/galmenu.js',
'!./public/js/custom/gitcalendar.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'));
});

// 压缩 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,
})
)
.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.series(
'generate-service-worker',
gulp.parallel('compress', 'minify-html', 'minify-css', 'mini-font')
)
);

在根目录新建文件 sw-template.js 文件，复制以下内容到 sw-template.js 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

const workboxVersion = '5.1.3';

importScripts(`https://storage.googleapis.com/workbox-cdn/releases/${workboxVersion}/workbox-sw.js`);

workbox.core.setCacheNameDetails({
prefix: '兜叽咕', // 缓存名称
});

workbox.core.skipWaiting();

workbox.core.clientsClaim();

// 注册成功后要立即缓存的资源列表
// 具体缓存列表在 gulpfile.js 中配置，见下文
workbox.precaching.precacheAndRoute(self.\_\_WB_MANIFEST, {
directoryIndex: null,
});

// 清空过期缓存
workbox.precaching.cleanupOutdatedCaches();

// 图片资源（可选，不需要就注释掉）
// workbox.routing.registerRoute(
// /\.(?:png|jpg|jpeg|gif|bmp|webp|svg|ico)$/,
// new workbox.strategies.CacheFirst({
// cacheName: 'images',
// plugins: [
// new workbox.expiration.ExpirationPlugin({
// maxEntries: 1000,
// maxAgeSeconds: 60 _ 60 _ 24 \* 30,
// }),
// new workbox.cacheableResponse.CacheableResponsePlugin({
// statuses: [0, 200],
// }),
// ],
// })
// )

// 字体文件（可选，不需要就注释掉）
workbox.routing.registerRoute(
/\.(?:eot|ttf|woff|woff2)$/,
new workbox.strategies.CacheFirst({
cacheName: 'fonts',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 1000,
maxAgeSeconds: 60 _ 60 _ 24 \* 30,
}),
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);

// 谷歌字体（可选，不需要就注释掉）
workbox.routing.registerRoute(
/^https:\/\/fonts\.googleapis\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
})
);
workbox.routing.registerRoute(
/^https:\/\/fonts\.gstatic\.com/,
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 1000,
maxAgeSeconds: 60 _ 60 _ 24 \* 30,
}),
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);

// jsdelivr 的 CDN 资源（可选，不需要就注释掉）
// workbox.routing.registerRoute(
// /^https:\/\/cdn\.jsdelivr\.net/,
// new workbox.strategies.CacheFirst({
// cacheName: 'static-libs',
// plugins: [
// new workbox.expiration.ExpirationPlugin({
// maxEntries: 1000,
// maxAgeSeconds: 60 _ 60 _ 24 \* 30,
// }),
// new workbox.cacheableResponse.CacheableResponsePlugin({
// statuses: [0, 200],
// }),
// ],
// })
// )

workbox.googleAnalytics.initialize();

在[Blogroot]\themes\butterfly\layout\includes\third-party\目录下新建 pwanotice.pug 文件，（通知博客文章更新了），打开[Blogroot]\themes\butterfly\layout\includes\third-party\pwanotice.pug,输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#app-refresh.app-refresh(style='position: fixed;top: -2.2rem;left: 0;right: 0;z-index: 99999;padding: 0 1rem;font-size: 15px;height: 2.2rem;transition: all 0.3s ease;')
.app-refresh-wrap(style=' display: flex;color: #fff;height: 100%;align-items: center;justify-content: center;')
label ✨ 有新文章啦！ 👉
a(href='javascript:void(0)' onclick='location.reload()')
span(style='color: #fff;text-decoration: underline;cursor: pointer;') 🍗 点击食用 🍔
script.
if ('serviceWorker' in navigator) {
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.addEventListener('controllerchange', function() {
showNotification()
})
}
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js')
})
}
function showNotification() {
if (GLOBAL_CONFIG.Snackbar) {
var snackbarBg =
document.documentElement.getAttribute('data-theme') === 'light' ?
GLOBAL_CONFIG.Snackbar.bgLight :
GLOBAL_CONFIG.Snackbar.bgDark
var snackbarPos = GLOBAL_CONFIG.Snackbar.position
Snackbar.show({
text: '✨ 有新文章啦！ 👉',
backgroundColor: snackbarBg,
duration: 500000,
pos: snackbarPos,
actionText: '🍗 点击食用 🍔',
actionTextColor: '#fff',
onActionClick: function(e) {
location.reload()
},
})
} else {
var showBg =
document.documentElement.getAttribute('data-theme') === 'light' ?
'#5CA1FF' :
'#1f1f1f'
var cssText = `top: 0; background: ${showBg};`
document.getElementById('app-refresh').style.cssText = cssText
}
}

修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,在文件底部添加以下内容，注意缩进。butterfly_v3.6.0 取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}:（pug 是严格缩进模式！）

1
2
3
4

if theme.pwa.enable
!=partial('includes/third-party/pwanotice', {}, {cache: true})

将你的图标包移入相应的目录，例如我是/img/siteicon/，所以放到[Blogroot]/source/img/siteicon/目录下。新建文件名为 manifest.json 并将其放到[Blogroot]/source 目录下，此时还不能直接用，需要添加一些内容，以下是我的 manifest.json 配置内容，权且作为参考，其中的 theme_color 建议用取色器取设计的图标的主色调，同时务必配置 start_url 和 name 的配置项，这关系到你之后能否看到浏览器的应用安装按钮。（https://www.iconfont.cn/ 阿里巴巴矢量图标库，可以设置站点图标）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

{
"name": "欢迎来到 兜 叽 咕 の 小 小 世 界",
"short_name": "兜叽咕",
"theme_color": "#5CA1FF",
"background_color": "#5CA1FF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [{
"src": "/img/siteicon/16.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "/img/siteicon/32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/img/siteicon/48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/img/siteicon/64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "/img/siteicon/128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/img/siteicon/144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/img/siteicon/512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}

打开主题配置文件[Blogroot]/_config.butterfly.yml,找到 PWA 配置项。添加图标路径。这里的 theme_color 建议改成你图标的主色调，包括 manifest.json 中的 theme_color 也是如此。

1
2
3
4
5
6
7
8
9
10

pwa:
enable: true
manifest: /manifest.json
theme_color: '#5CA1FF'
apple_touch_icon: /img/siteicon/128.png
favicon_32_32: /img/siteicon/32.png
favicon_16_16: /img/siteicon/16.png
mask_icon: /img/siteicon/128.png

终端输入 gulp 进行压缩
hexo 三件套（本地看不到 pwa，运行 hexo g 之后必须运行 gulp 指令，不然 PWA 不会生效！ https://akilar.top/posts/8f31c3d0/）

1
2
3

hexo d 直接部署

六、配置自定义 css（一图流）

七、标签外挂

八、hexo 完成 github action 自动部署

九、图床

十、自定义域名

本篇未完结，后续还会慢慢更新、修订……