关于Serverless搭建静态博客的折腾

一. 前言

在Gridea静态个人博客的搭建 | Lian中对于如何使用gridea配合GitHub pages搭建serverless静态博客进行简单的介绍, 但和各种博主或者up主介绍的各种花里胡哨的文章或者视频一样, 只说了如何怎么做, 但是关键的很多的细节基本没有提及, 当然还有更多的问题没有提及.

1.1 前提

本文仅讨论的是免费, 傻瓜式的个人静态博客搭建, 对于自行租赁服务器和使用大量命令行实现, 暂不在讨论的范围.

二. 问题

也许在各种乱七八糟的介绍中, 如: 五分钟搭建一个博客, 诸如此类, 但是对于各种细节却是只字不提, 让一个博客系统能够较好的运转, 需要解决的问题甚多.

2.1 Gridea

首先这个软件应该已经停止开发, 软件的问题很多, 如: 卡顿, 当文章的数量达到一定程度, 如超过100篇, 运行很慢等都不会得到修复.

但最致命的问题是, 数据同步: 检测远程连接正常, 同步一直在转圈 - Issue #1061 - getgridea/gridea

这个问题在GitHub上的反馈已经非常多, 就无需赘述.

不仅同步到GitHub这个站点很慢, 就算是netlify, 数据一多就无法同步.

经过测试当数据很少时是可以正常同步数据的, 但是数据很多, 就一直在运行, 3G的数据运行十几个小时也无法成功.

2.2 Github Pages

由于众所周知的原因, 大清国有墙, 墙体愈加高耸.

对于GitHub的封锁也日趋严密(理论上在很长的时间里, 大清都不大可能彻底封锁github), .io域名的GitHub pages已经基本瘫痪, 比主站还严重, 所以国内访问也是个问题.

三. 数据存放在哪

关于个人博客的存放, 这是个问题.

既有展示的需要, 同时也是数据的备份.

仅需一个Github账号, 让文字在互联网中永生超轻量级个人博客框架Gmeek_哔哩哔哩_bilibili

静态页面服务商比较+智能网关测速脚本 | AcoFork Blog, 在这篇博客中作者已经比较全面的介绍了各个平台的差异和优略.

这里选用的是netlify.

3.1 国内陷阱

技术为营销而生.

对于选用国内的服务, 需要提高警惕, 随时数据鸡飞蛋打, 在绝大部分带有稍微公益属性的IT服务服务, 国内的不管大厂还是小厂均遵循了能捞一票就捞, 捞不到立马关门跑路的优秀传统, 当然还少不了套取到足够的数据关门的套路.(网盘这个闹剧, 相信各位读者或多或少经历过)

在gridea提供的几个主要平台, 国内的两家:

管理指引 - 什么是 DevOps? DevOps 介绍｜ CODING DevOps

Gitee Pages - Gitee.com

下载个小文件都需要登陆的站点

几乎都在很短的时间悄咪咪关闭.

在这轮的 ai 大战中, 国内这帮 xx Github的翻版, 没有一家能够冒个泡.

3.2 小结

从数据安全的角度, 国外大厂的产品优先考虑.

同时github作为一个通用平台, 大量的其他产品都会和它对接, 对于数据的迁移也是极为方便

但是这里不讨论github, 而是netlify.

四. 静态博客原理简析

由于使用国外的服务器, 永恒的坎都是如何将数据上传上去, 需要稍微了解一下静态博客的原理.

超详细的个人博客搭建教程( 无需服务器) - 从原理到实践手把手带你搭建属于自己的个人博客_哔哩哔哩_bilibili

具体可见上述的B站链接.

4.1 以`gridea`为例

简单的执行逻辑是, gridea会将markdown文件 + 博客主题 => 编译成为一个独立的html, 这个文件包含各种需要的内容

这就意味着, 每个html文件体积很大

博客种的首页, 标签等内容的超链接的地址的指向, 是根据指定的服务器地址所决定

每次使用girdea同步或者预览本地文件时, 都会从新将所有的配置和文章内容重新编译一次, 需要注意的是并不是所有这些图形界面操作的博客管理软件的本地预览都会以本地服务器形式的方式展现内容.

C:\Users\Lian\.gridea

注意0.93版本之前的输出文件这个目录之下

D:\Documents\Gridea\output

五. netlify

Deploy any modern frontend stack, from marketing sites to AI apps. Join millions of developers and teams shipping faster on Netlify.

Scale & Ship Faster with a Composable Web Architecture | Netlify

注册后(个人使用GitHub授权), 进入控制后台, 找到站点

随便拖个文件夹进来, 上面的添加新站点这个按钮才会出现

这个站点id和站点名称是需要使用到的, 复制出来

进入用户设置

创建一个token

5.1 命令行

由于gridea无法同步大量的数据, 这里使用的是netlify-cli工具来部署站点.

Netlify CLI deploy command | Netlify CLI command reference

但是安装有点坑

(base) PS C:\Users\Lian> npm version
{
  npm: '10.5.2',
  node: '20.13.1',

需要node

npm install -g netlify-cli

安装会报错

npm warn deprecated glob@8.1.0: Glob versions prior to v9 are no longer supported - Issue #7029 - netlify/cli

报错之后, 进入目录

C:\Users\Lian\AppData\Roaming\npm\node_modules

将和netlify-cli完全删除, 重新安装, 依然还是提醒, 但没有报错.

npm install -g netlify-cli@latest

depreciation glob@8.1.0: Glob versions prior to v9 are no longer supported

但是神奇的是, 可以正常使用了

netlify login

先登陆账号, 需要授权, 跳转网页.

然后就可以进行部署了, 命令行很简单

(base) PS C:\Users\Lian\.gridea\output> cd C:\Users\Lian\.gridea\output
(base) PS C:\Users\Lian\.gridea\output> netlify deploy --prod
This folder isn't linked to a site yet
? What would you like to do? Link this directory to an existing site

netlify link will connect this folder to a site on Netlify

? How do you want to link this folder to a site? Search by full or partial site name
? Enter the site name (or just part of it): lianhwang
Looking for sites with names containing 'lianhwang'...

Directory Linked

Admin url: https://app.netlify.com/sites/lianhwang
Site url:  https://lianhwang.netlify.app

You can now run other `netlify` cli commands in this directory
Please provide a publish directory (e.g. "public" or "dist" or "."):
? Publish directory C:\Users\Lian\.gridea\output
Deploy path: C:\Users\Lian\.gridea\output
Deploying to main site URL...
⠋ Uploading blobs to deploy store...
Netlify Build
────────────────────────────────────────────────────────────────
❯ Version
  @netlify/build 29.59.2
❯ Flags
  deployId: ...
  open: false
  prod: true
  prodIfUnlocked: false
  skipFunctionsCache: false
❯ Current directory
  C:\Users\Lian\.gridea\output
❯ Config file
  No config file was defined: using default values.
❯ Context
✔ Finished uploading blobs to deploy store
✔ No cached functions were found
✔ Finished hashing
✔ CDN requesting 188 files
⠇ (28/195) Uploading tag/bfZBf6yTI/index.html...                                                                    ✔ Finished uploading 195 assets
✔ Deploy is live!

上传的速度还算可以, 中途没有报错什么之类的

六. Poblii

为了替代掉gridea, 中途顺便折腾一下poblii.

Open-Source Static CMS for Fast, Secure, GDPR & CCPA-Compliant Websites

怎么说呢, 这个软件看起来什么都还行, 虽然有稍微的小瑕疵, 但随着使用的深入很快就发现各种问题

主题很少, 多是要付费, 主题风格偏向美食, 旅行风格.
搜索被单独分离出来(需要付费)
没有集成latex渲染
本地预览不是以服务器的方式呈现(注意: 预览html时, 需要文件指定使用哪个浏览器, 如果没有默认设置, 不会弹窗提示使用哪个浏览器打开)

latex的渲染在自定义html中实现.

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.11.1/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

freaks-dev

经过一番检索, 这个up为这些问题都进行了解决, 提供了一个不错的主题, 更重要的是提供了检索模块.

当看似所有的问题都基本解除时, 最主要的是同步数据的速度很快(也许是数据比较少)

但, 但问题还是来了, 而且还很麻烦

markdown文件中的latex的换行符\\双斜杠没有被正确处理, 会转义为单斜杠

(需要四个斜杠来消除转义带来的问题)

6.1 小结

总体而言, polii对于不是重度latex需求的用户还是很合适的, 更为细致的功能, 流畅性很好.

七. 总结

最终选择的方案是, gridea管理本地的博客, netlify-cli同步数据到netlify

首先, 设置同步为代理, 然后生成本地文件, 生成过程占用cpu, 页面卡死, 恢复正常后表明文件全部生成, 退出程序即可.

然后使用netlify-cli命令行同步.

略微麻烦.