杯具的开始

昨天下午登录腾讯云控制台准备给云服务器续个费来着,结果发现我1核的学生机可以免费升级成 2 核,本着便宜不占王八蛋的心态,很快啊我立马点击升级

image-20230417150909135

升级完成后,当我打开之前部署的 Halo 博客,准备体验下这多出来的 1 核给我带来的巨大性能提升时,尼玛博客直接打不开了

image-20230417151421856

后面才想起来 Halo 是用 docker 部署的,资源调整会强制重启服务器,而我重启前没有停止容器,结果就是容器直接丢失了……

image-20230417151429134

更离谱的是,此前部署的 North 图床无法通过 HTTPS 访问了,导致此前的很多图片链接直接失效。Fine, 看来又得忙活半天了

补救方案

博客

因为我对 docker 并不是很熟悉,也没有定时导出数据,最后只好重新部署

image-20230417151453996

对了,那段俄文原文为

1
Будет хлеб, будет молоко, все будет там

翻译过来就是

1
面包会有的,牛奶也会有的,一切都会有的

在此也赠予诸君共勉,生活是多么美好,一切都会有的

图床

经过排查后得知

  • SSL证书 未过期

    image-20230417151532129

  • 图床服务 ImageBed 运行正常image-20230416162957745

  • HTTP 可正常获取图片,HTTPS 无法获取

  • nginx 反向代理配置未变动,语法测试通过image-20230416163053294

这个时候大概猜到了是 防火墙 的问题,但是资源调整前安全组和防火墙都已经开放了 443 端口,资源调整后理应不会修改这些配置啊。算了,还是先查看下当前开放的端口吧

1
2
3
4
5
6
7
ubuntu:~$ sudo ufw status
Status: active

To Action From
-- ------ ----
80 ALLOW Anywhere
80 (v6) ALLOW Anywhere (v6)

好家伙怎么只剩下 80 端口了,看来确实是防火墙的问题

1
2
3
4
5
6
# 开启防火墙
sudo ufw enable
# 添加 443 端口
sudo ufw allow 443
# 重启防火墙
sudo ufw reload

再次查看防火墙开放端口

1
2
3
4
5
6
7
8
9
ubuntu:~$ sudo ufw status
Status: active

To Action From
-- ------ ----
443 ALLOW Anywhere
80 ALLOW Anywhere
443 (v6) ALLOW Anywhere (v6)
80 (v6) ALLOW Anywhere (v6)

同时 HTTPS 访问恢复正常,问题解决

梅开二度

上面的问题解决了,但我最初好像是来续费服务器的啊,好家伙一下午白忙活了。不过好歹现在服务器是2核的了,不亏,我直接续费
image.png
What f**k,我怎么记得学生机续费好像就 100 多块来着啊,怎么到这变成 700 多块了。哦对不起搞错了学生机不能直接在实例页面续费,得去 这里
image.png
G, 资源调整后没办法续费了!没办法只能调整回去了,我淦白忙活一下午

image-20230416014648666

放心这次调整前肯定先停止容器嘿嘿,不可能在同一个地方摔倒两次

1
2
3
4
# 查看所有容器
sudo docker ps -a
# 停止容器
sudo docker stop <container>

调整完成后只需要重新启动容器即可,这不是手到擒来

1
sudo docker start container

尼玛报错了,查看了下目前所有的 docker 镜像,发现该镜像的 STATUSExited(137) 。Bing 半天发现好像是 OOM 的问题,但查看日志完全没有此类报错,后面找到个 类似问题

image.png
但好像还是没说怎么恢复容器啊,而且容器已经停止了也没办法进入文件系统,又得从头开始了

梅开三度

罪恶的开始

我是真没想到我居然能在同一个地方跌倒三次

img

因为我用的 Halo 版本有点老(1.4.11),对应版本的 Butterfly 主题有些小问题

  1. 不支持使用 > 引用文字块
  2. 侧边栏目录没有层级划分
  3. 不支持评论
  4. 不支持搜索
  5. 不支持数学公式

前几个我还能接受,引用文字块实在不行改成无序列表,目录没有层级我直接 x.x.x 手动加上,不支持评论也没事(这样就看不到说我博客坏话的了 doge),不支持搜索我把分类和标签做细一点也能找到

img

但是不支持数学公式真是让我浑身难受啊,然后搜解决方案看到有个 issue 说 halo 1.5 及以上加一个全局 header 就能解决,那我既然都要升级了为啥不直接升到最新版本,于是一咬牙直接上 halo 2.0

image-20230416020528832

当然升级前咱肯定先停止旧的 Docker 容器对吧,毕竟有惨痛教训在前不是 (doge)

image-20230416020701037

好消息是现在 数学公式文本引用目录 都可以正常使用了,坏消息是我发现了其他的一些小问题

  1. 官方提供的插件仅支持 Halo 1.5/1.6 版本进行数据迁移,而我是 1.4

    image-20230416041520640

  2. Butterfly 主题包上传一直失败,控制台报错 413 Request Entity Too Large

    image-20230416041945848

  3. 日志页面去哪了???没有日志我以后去哪发电???

  4. 可能是由于 Halo 2.x 采用动态渲染方案,页面加载速度相比 1.4 慢了非常多

Well, well, Halo 2.0 用起来实在是别扭的不行,而且手动导入博客数据的工作量实在是有点大……得,我还是老老实实用 1.4 吧

image-20230416164123081

又回到最初的起点

不得不说这个数据导入功能是真的爽,手动导入是真的想骂娘(痛定思痛,North 从下个版本起全面支持跨版本数据导入)

image-20230416164252315

然后当我想安装 Butterfly 主题时发现了点小问题,我发行版呢?

image-20230416164555806

我去作者怎么把 Halo 1.x 对应的主题版本全删了,没办法只能根据 git commit 一点一点往前找

image-20230416164951899

翻了十几个硬是没找到能用的,不是配色稀奇古怪就是文章页面打开后空白

心态崩了表情包图片gif动图 - 求表情网,斗图从此不求人!

当我万念俱灰的时候发现 Gitee 上有个 Butterfly 的 镜像仓库

image-20230416165347862

抱着试试看的念头下载下来安装,结果还是报错 413 Request Entity Too Large,后面看到这个 Issue 才想起来我之前服务器 Nginx 反向代理设置了限流规则,修改后就可以正常上传了

image-20230416165652211

然后还找到了数学公式的渲染方法,参见 Sweet 的笔记

image-20230416165851736

1
2
3
4
5
<script type="text/javascript" async 
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

Hexo

体验到 Halo 2.x 后再回到 Halo 1.x 确实落差有点大,侧边目录分级、文本引用实在是太爽了。而且我对 docker 不太熟悉出问题基本没法补救,只能重新部署,定期导出数据又太浪费精力了。本来写博客的目的是方便随时查阅笔记,结果现在还得定期维护下博客系统

image-20230416170645306

纠结再三还是决定转移到 Hexo

image-20230416171153952

  1. 完善的生态支持(插件/主题/社区/API),出问题便于排查解决

  2. 生成的均为静态页面,加载速度非常快

  3. 可以托管至 Github、Vercel,白嫖啊朋友们

Hexo 的命令也相当简单

1
2
3
4
5
6
7
8
9
10
# 创建文章
hexo new <article_name>
# 创建页面
hexo new page <page_name>
# 清理项目
hexo clean
# 运行项目
hexo s
# 远端部署
hexo d

当我急赤白脸部署好 Hexo 时又发现了点小问题,我当时放弃 Vuepress 这样的可以白嫖的静态博客框架就是因为访问起来不稳定(need to over the wall),那已经折腾这么久了怎么办呢

img

等等 Hexo 好像也可以部署到服务器捏,感谢 花猪 的教程救我狗命

image-20230416172028027

好耶活过来了,又花了点时间修改 Butterfly 主题

image-20230416172226654

终极解决方案

前面提到笔者最后采用 Hexo + 公网服务器的方式来托管个人博客,从访问速度和美观程度来看效果还不错。但是上述方案依然存在一些小问题

  • 公网服务器价格偏高。以笔者使用的 1C2G1M 服务器为例,其作为学生机的续费价格为 108 元/年(看着还不错是吧),但学生机最多只能续费 3 年,这意味着 3 年后笔者就需要以 746.1 元/年的价格续费服务器
  • 访问速度太慢。笔者使用的服务器下行带宽仅有 1Mbps,尽管 Hexo 本身作为静态网站响应非常快,但仍然达不到我的期望

实际上,国内静态资源部署的选择还有很多

  • 免费托管商:Gitee Pages、……
  • 对象存储类:腾讯云 COS、阿里云 OSS、……
  • frp + 自建服务器
  • 其它

其中 对象存储类 需要付费(访问费用 + 流量费用),frp + 自建服务器后期的维护工作较多,所以笔者优先考虑使用 Gitee Pages 托管

Gitee Pages

Gitee Pages 是由 Gitee 提供的免费的静态网页托管服务,免费啊朋友们!于是笔者兴冲冲创建仓库,然后打开服务一看,额怎么现在开个 Pages 还要实名认证……

img

好家伙 Github 免费且非实名的服务到你这儿整的跟办贷款一样,要不是 Github 被墙谁会用这玩意啊淦!说实话我是真不太放心把这么隐私的东西交给别人,于是直接 pass(大家如果不介意的话可以 尝试下,Gitee Pages 国内的访问速度还是非常可观的)

腾讯云 COS

最初接触对象存储服务是几年前,由于实在难以忍受百度云盘的下载速度,所以开始摸索能否自建云盘服务。然后在腾讯云产品里找啊找,一看好家伙腾讯云对象存储(以下简称 COS)也太便宜了!以 10GB 标准存储容量包为例,一年存储空间所需的费用仅为 9.77 元

image-20230801112544944

计费项

COS 除了对容量计费外,还会对读写请求、流量等计费,详细的计费项见下图(参照 COS 官网

img

这里以个人博客搭建为例,我们需要关注的计费项如下

  • 存储容量费用
  • 流量费用
  • 请求费用

存储容量费用

搭建博客时我们需要把静态资源文件(html、css、……)上传至 COS,这些文件存储在 COS 上会对存储空间计费。针对不同的存储需求,比如有的文件占用很多存储空间但访问非常少(如:备份文件),而有的文件存储空间占用很少但访问较为频繁(如:网站图标),COS 为我们提供了多种存储服务

  • 标准存储
  • 低频存储
  • 智能分层存储
  • 归档存储
  • 深度归档存储

不同存储服务间的差别大家可以在上图中看到,这里不再赘述,对博客搭建来说我们优先选择 标准存储

流量费用

访问 COS 中的文件即会产生流量费用,该项计费具体包含如下子项

  • 外网下行流量

    数据通过互联网从 COS 传输到客户端产生的流量

  • CDN 回源流量

    数据从 COS 传输到腾讯云 CDN 边缘节点产生的流量

    CDN工作方法

    对个人博客来说,COS 自身的访问速度已经非常可观,笔者个人博客测速结果如下

    image-20230801122357769

    国内所有节点的访问速度均保持在 0.3s 以下,可以说非常流畅了,因此不考虑使用 CDN。需要说明的是,由于不同云厂商外网下行流量和 CDN 回源流量价格存在差异,某些情况下使用 CDN 可减少外网下行流量进而降低总体流量费用

  • 跨地域复制流量

    数据从一个地域的存储桶传输到另一个地域的存储桶产生的流量。网页静态资源文件通常并不涉及跨地域复制,因此该项费用也可忽略

    1

  • 全球加速流量

    笔者搭建个人博客时仅考虑中国大陆地区访问,因此不启用全球加速,该项费用直接忽略

请求费用

将文件上传至 COS 或从 COS 中下载文件即会产生请求费用,具体包含以下子项

  • 请求费用

    上传/下载文件操作产生的费用,我们需要考虑的计费项

  • 对象监控费用

    搭建博客一般不需要进行监控,直接 pass

  • 深度归档取回请求费用

    上文我们提到个人博客搭建优先考虑标准存储,因此不涉及该项费用

综上所述,搭建个人博客所需考虑的计费项包括

  1. 网页静态文件所需的存储空间费用
  2. 访问网页文件产生的外网下行流量费用
  3. 上传/访问网页文件产生的请求费用

资费对比

下面我们简单计算下搭建个人博客所需的存储容量费用,需要说明的是 COS 支持两种计费方式,详细内容请 移步

  • 按量计费

    COS 默认的计费方式,先使用,后付费。按照各计费项的实际用量,以天为单位,每日进行计量、结算、扣费和出账,并且支持 所有地域。以成都区域公有云为例,按量计费模式下的存储容量费用如下

子计费项 价格(元/GB/月)
标准存储 0.099
低频存储 0.08
智能分层存储 存储容量费用 与转换后的存储类型一致
归档存储 存储容量费用 0.03
深度归档存储 0.01
  • 资源包

    COS 针对不同计费项推出的优惠资源包,先购买,后使用。在结算时,系统将优先抵扣资源包的用量,超出资源包的部分按量计费。资源包仅适用于公有云地域,不适用于金融云地域。以标准存储容量包为例,有效时长 1 年 的标准存储资源包价格如下

规格 中国大陆通用(元) 中国香港和海外通用(元)
10G 9.77 12.42
20G 19.26 24.48
50G 47.44 60.30
100G 93.46 118.80
200G 184.08 234.00
500G 453.12 576.00
1T 913.49 1161.22

假设博客网站静态资源存储空间占用为 5MB,日均访问 100 次(不考虑网页缓存和上传请求),那么每年相关子项产生的费用如下

  1. 网页静态文件所需的存储空间费用
    • 按量计费:0.099 * (5 / 1024) * 12 ≈ 0.0058
    • 资源包:9.77 元(10G 规格)
  2. 访问网页文件产生的外网下行流量费用
    • 按量计费:0.5 * ((5 * 100 * 365 / 1024)) ≈ 89.11 元
    • 资源包:81.60 元(20G 规格)
  3. 上传/访问网页文件产生的请求费用
    • 按量计费:0.01 * 100 * 365 / 10000 = 0.0365
    • 资源包:0.83 元(10 万次规格)

总计 0.0058 + 81.60 + 0.0365 = 81.64 元,远低于云服务器所需的 746.1 元。当然,不同博客的实际情况不同(例如有的网站将图片也存储在 COS 上,有的网站静态资源较大等等),大家还是要根据实际情况选择最优的计费方案

部署

接下来就是具体的部署环节了,过程也非常简单,首先安装 hexo-deployer-cos 插件

1
npm install hexo-deployer-cos --save

修改 Hexo 根目录下 _config.yml 文件中的 deploy 字段

1
2
3
4
5
6
deploy:
type: cos
secretId:
secretKey:
bucket:
region:

上述 deploy 字段的剩余参数需要前往 腾讯云控制台 获取,首先前往 COS 管理页面 创建存储桶

image-20230801140705769

选择存储桶区域并为存储桶命名,访问权限需要设置为 公有读私有写,点击下一步

image-20230801140839305

点击下一步

image-20230801141056025

点击创建

image-20230801141125677

存储桶创建完成,前往存储桶概览页面获取插件所需的 bucketregion 参数

image-20230801143332496

以该存储桶为例,其 bucket 参数为 mblog-1301879085regionap-beijing

image-20230801143433098

接下来前往 API 密钥管理 获取剩余的参数 secretIdsecretKey,点击新建密钥

警告:这两项参数实际上是腾讯云的 API 密钥,其代表相应账号身份和所拥有的权限。使用腾讯云 API 可以操作对应名下的所有腾讯云资源,请妥善保管!

image-20230801144105672

复制相关参数至 deploy 字段中

image-20230801144207245

编译并上传网页静态文件至 COS

1
hexo g -d

部署完成,可以看到相关文件已经上传至存储桶中,点击前往基础配置 > 静态网站

image-20230801144649553

image-20230801144711214

image-20230801144753156

点击编辑

image-20230801144827223

相关配置如下,点击保存

image-20230801145130677

大功告成,通过上图中的 访问节点 即可访问博客!

image-20230801145048843

好家伙本来想简单记录下折腾的经历,写着写着怎么介绍起 COS 来了,腾讯云的员工要是看到了记得给我打广告费哈 [doge]