小破站的日志

搭建篇

“回家三天，建站治好了我的精神内耗”

前言

本人一直都有写写博客的需求，毕竟从小学开始就写博客了，下面先来客观分析一下2023年在各个平台写博客的可行性…

平台便捷性稳定性/维护性定制性价格综述
CSDN/博客园最高，无需个人维护一般，可能写完后第二天就没了，想存档也很费事最低，就是挂个文章罢了接近零成本大多数人都选用的建博客方式，最普遍也最省心
自建服务器+平台最差，你还要维护服务器等qwq较高，可操作性很强最高，你想咋搞就咋搞还是看看远方的服务器价格吧家人们…少数人会使用的建博客方式，花销和维护成本较高，但效果很好
Github Pages一般，前期准备工作较繁琐，后期维护成本较自建服务器低一般，稳定性与CSDN等一样，维护性较CSDN高较高，基于静态页面随便搞下限无成本一种面对高服务器价格，但还想要自建服务器优势下的妥协罢了

下面就说说这几天用Github Pages+CloudFlare建站的历程，多半都是踩坑心路…

常规流程：

经过挑选后选择了Hexo&Fluid作为发布在gh-pages的平台，Hexo是一个较主流的博客框架，Fluid是一个Material Design 风格的主题，挺好。

常规流程很简单，大概就两步：

  1. github前期准备（搭建仓库）

    • 新建一个github仓库用于托管Hexo
    • 值得注意的是，如果你想把gh-pages重定向到你自己的域名，用于搭建gh-pages的仓库名必须为**{$你的github用户名$}.github.io**，否则就显示404（我也不知道为什么）…
    • 但仓库名为{$你的github用户名$}.github.io且使用了自定义域名时，你在其他项目用到gh-pages会被重定向到 新域名/仓库名而不是 xxx.github.io/仓库名，看到一篇文章提及可以通过自建组织的方式避免这种情况。

  2. 本地部署Hexo&发布到Github

    • 强烈建议看官方文档，真的写的很详细，可以说是保姆级教程了
    • 在部署时，强烈建议部署使用官方文档中的一键部署命令来上传到github
    • 如果你使用了第三方域名，不要忘了先要参照这里的官方教程向 source目录手动添加 CNAME文件，后在Setting->Pages里绑定域名

美化篇

背景图全屏化+毛玻璃效果

Sir, this way

H1/H2标题美化

Sir, this way

CSS优化

Sir, this way

成品css文件：

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
/*添加H1H2标题高亮*/
:root[data-user-color-scheme=dark] .markdown-body h1>span, :root[data-user-color-scheme=dark] .markdown-body h2>span {
  box-shadow: inset 0 -.5em rgba(58,142,230,.7);
}
.markdown-body h1>span, .markdown-body h2>span {
  box-shadow: inset 0 -.5em #ffeb3b;
  -moz-transition: box-shadow .2s ease-in-out;
  -ms-transition: box-shadow .2s ease-in-out;
  -webkit-transition: box-shadow .2s ease-in-out;
  transition: box-shadow .2s ease-in-out;
}
#navbar > div > a > strong{
  color:#ffffff;
  mix-blend-mode: difference;
}
#navbarSupportedContent > ul > li:nth-child(1) > a{
  color:#ffffff;
  mix-blend-mode: difference;
}
#navbarSupportedContent > ul > li:nth-child(2) > a{
  color:#ffffff;
  mix-blend-mode: difference;
}
#navbarSupportedContent > ul > li:nth-child(3) > a{
  color:#ffffff;
  mix-blend-mode: difference;
}
#navbarSupportedContent > ul > li:nth-child(4) > a{
  color:#ffffff;
  mix-blend-mode: difference;
}
#navbarSupportedContent > ul > li:nth-child(5) > a{
  color:#ffffff;
  mix-blend-mode: difference;
}
#search-btn > a,#color-toggle-btn > a{
  color:#ffffff;
  mix-blend-mode: difference;
}
#subtitle{
  color:#ffffff;
  mix-blend-mode: lighten;
}
.col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board{
  width: 123%;
  left: -23%;
}
@media (max-width: 767px) {
  .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
    width: 100%;
    left: 0;
  }
}
@media (max-width: 424px) {
  .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
    width: 100%;
    left: 0;
  }
}
.tocbot-active-link {
  font-weight: bold;
  /*color var(--link-hover-color)*/
  color: #30a9de;
  background: #30a9d152;
  border-radius: 5px;
}
.toc-list-item::before {
  background: #30a9de;
}

优化篇

插件清单

安装插件时可以参考这篇参考资料

在博客目录使用 npm ls即可查看当前安装的所有插件，以下截止至2023/01/27

1
2
3
4
5
6
7
8
+-- hexo-abbrlink@2.2.1【博客永久链接生成器】
+-- hexo-bilibili-plus@0.1.3【自制B站视频快速插入】
+-- hexo-blog-encrypt@3.1.6【博客文章加密器】
+-- hexo-fix-h1h2@0.0.1【自制h1h2美化器】
+-- hexo-generator-sitemap@3.0.1【sitemap生成】
+-- hexo-neat@1.0.9【博客文章压缩器】
+-- hexo-pdf@1.1.1【内嵌pdf】
+-- hexo-renderer-markdown-it@6.1.0【用于替代原有的Markdown渲染器】

在Hexo Fluid中一键插入Bilibili视频

在几个月前还在用洛谷博客的时候发现可以插入B站视频，后去Github搜了一下发现没有可以简便插入B站视频的插件，于是自己写了一个
项目地址：hexo-bilibili-plus
效果如下：

双备份

在一键部署时，我们的博客全部文件并不会全部上传到github上，但我们可以在托管网页的仓库中另建分支，在一键部署流程后同时将全部文件上传到github上另一个分支实现备份，稳定性++

费事是不可能费事的，你可以把所有部署代码都写在一个 .sh文件中，写完博客要上传后直接无脑点击sh文件就好啦，好像还省事了

WIth Cloudflare & Vercel

Cloudflare和Vercel提供了页面托管、轻量服务器等众多白嫖服务，你还可以使用Cloudflare的域名一条龙

如果你的网站没有备案，这意味着你抛弃了备案费事的同时就要忍受极慢的加载速度…（国内的CDN只为备案过的域名服务）

使用Cloudflare的DNS解析

Cloudflare的传统艺能。

亲测未备案的域名套Cloudflare的dns解析和原生gh-pages体验基本一致…

测速对比

但醉翁之意不在酒，你还可以干别的…

利用Cloudflare Worker/Vercel搭建随机图接口

两者都提供了免费的轻量服务部署，网上教程一搜一大堆，这里就不写了

注意：

  • 最好还需要一个位于国内的存储桶来存储图片，不要让本来就很慢的速度雪上加霜啊喂…

  • 建议图片使用 .webp格式并尽量单张压缩到300kb以下，要不图片就要卡半分钟诶喂…

    （图片压缩可采取 .jpg/.png -> .webp -> 压缩webp的思路进行）

  • 参考Cloudflare搭建资料

  • 参考Vercel搭建资料

  • 参考webp压制工具

利用 Cloudflare Page/Vercel 复刻网站

我也不知道这样有啥用

但是这个网站的备份页：pk5.site

After 2023/6

在群友的提醒下经过数次折腾为博客仓库通过Github Action实现了自动化CI/CD，现在只需要修改md文件即可自动部署

自动化CI/CD过程以后再来探索吧

捉虫篇

Cloudflare中的Rocket Loader带来的debuff

之前有一天脑抽打开了Cloudflare中的Rocket Loader（见下）
可以有更快的内容加载…嘿嘿嘿🤤但是打开之后奇怪的事情发生了
再次打开博客页面时，发现博客上面的进度条会鬼畜版的一直在还剩一点的地方卡住不动…看了一下开发人员工具，发现是这个一直在加载

找了一下相关资料，发现有先人踩过坑，还是cf带来的网络负面buff…

Waline不能将表情存放在存储桶？

待解决qwq

正文渲染图片居中问题

待解决qwq

Hexo
#折腾
小破站的日志
http://blog.pk5ls20.com/posts/111d57cd/
作者
pk5
发布于
2023年1月19日
许可协议