博客折腾日记

杯具的开始

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

image-20230417150909135

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

image-20230417151421856

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

image-20230417151429134

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

补救方案

博客

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

image-20230417151453996

对了,那段俄文原文为

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

翻译过来就是

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

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

图床

经过排查后得知

  • SSL证书 未过期

    image-20230417151532129

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

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

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

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

ubuntu:~$ sudo ufw status
Status: active

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

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

# 开启防火墙
sudo ufw enable
# 添加 443 端口
sudo ufw allow 443
# 重启防火墙
sudo ufw reload

再次查看防火墙开放端口

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

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

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

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

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

<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 的命令也相当简单

# 创建文章
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 年 的标准存储资源包价格如下

规格中国大陆通用(元)中国香港和海外通用(元)
10G9.7712.42
20G19.2624.48
50G47.4460.30
100G93.46118.80
200G184.08234.00
500G453.12576.00
1T913.491161.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 插件

npm install hexo-deployer-cos --save

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

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

hexo g -d

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

image-20230801144649553

image-20230801144711214

image-20230801144753156

点击编辑

image-20230801144827223

相关配置如下,点击保存

image-20230801145130677

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

image-20230801145048843

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值