动机

作为前云计算大厂AWS员工，深知公有云便利和成本二者不可兼得。对于博客或者个人独立开发者而言，公有云就像奢侈品。

直到遇见了Cloudflare, 这个在我印象中一直做cdn的云厂，居然有着不输传统公有云的替代实现，例如cf workers, cf pages, workers AI等。在深度使用一段时间后，它表现出来的应用开发和交付的便利性，直觉这才是真serverless。更难能可贵的是，在保持便利性的同时，cloudflare有着慷慨至极的真免费计划。

Github Pages迁移到Cloudflare Pages

博客之前托管在github pages上，要自己设置github ci推到github page仓库, 才算发布成功。

而cloudflare pages就简单了，选择你的框架，例如hexo, hugo等，配置好仓库，然后ci是自动的，你也不需要关心什么cdn,https证书,高可用之类的问题。

参造这篇deploy-a-hugo-site文档操作，整个过程非常流畅，全程不超过5分钟搞定.

然后你会得到一个xx.pages.dev的高可用网站, 再把博客域名加进去就完工了。

七牛图床迁移到Cloudflare Pages

之前用的七牛云托管图床，用的http协议访问，后来chrome不让https站点加载http, 这个方案crash了。 翻开七牛的文档一看，https的价格简直劝退，而且又有一堆https证书的申请和配置问题，对个人和独立开发者极度不友好。

索性也迁移到cf pages, cf本来就是cdn, pages里托管还免费。这样cdn和图床都解决了。

过程也比较简单，先用qshell把图床都download到hugo的static文件夹，再用vscode或者别的编辑器批量修改md中的图片url链接

例如

http://xx.xx.com/a.jpg -> /a.jpg

vscode里正则替换http://xx.xx.com/(.*.jpg) 为/$1就行了

hugo图片生成水印

图片打上博客水印之前是七牛自带的功能，迁移后就得自己实现了。好在hugo本身自带了Images.overlay功能, 只要找个图叠上原图就行了。

网上发现了个参考: https://adityatelange.in/blog/hugo-watermarking-images/, 由于本站的博客图片都放在static文件夹下，这个代码也直接用不了。得稍微改改。

用hugo的render hooks来修改渲染图片叠上水印, 文件放在layouts/_default/_markup/render-image.html, 水印图放在static/watermark.png.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!-- contents of render-image.html -->
{{- $link := split .Destination "#" }}
{{- $image := resources.Get (index $link 0) }}
{{- $logo := (resources.Get "watermark.png") }}

{{- if and $image $logo }}
{{- $size := math.Round (mul $image.Height 0.30) }}
{{- $size := cond (ge $size 80) ($size) (80.0) }}

{{- $logo := $logo.Resize (printf "%.0fx png" $size) }}
{{- $image := $image.Filter (images.Overlay $logo (sub $image.Width $logo.Width 10) (sub $image.Height $logo.Height 10) ) }}
{{- $finalUrl := cond (isset $link 1) (printf "%s#%s" ($image.Permalink) (index $link 1)) ($image.Permalink) -}}

<img src="{{ $finalUrl | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- else }}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }}  />
{{- end }}

背后用的原理也比较简单，都是简单的go模板语法和Hugo的一些指令，这里不解释了。

完成

cloudflare的确方便，全程搞下来也就10分钟差不多，一个https整站高可用的博客网站就做好了。 搭配function和workers一些简单的业务逻辑也能往上写，绝大部分中小企业的需求都能满足。

以上。