前言 #
本人的博客今天突然挂了，因为下载流量超额了……我本来用的是Firebase的免费服务，每个月提供10G左右的下载流量。
现在有点后悔没有提前对比哪个部署平台更好用，现在还得多折腾这一趟…
开始之前先确定我的需求：我的博客大部分都是记录日常生活，有些博客会附有很多照片（比如上一篇伦敦游记），这些照片有些是缩略图，但有些是几十兆大小的相机原图，还有一些自定义字体，种种加起来让我构建完后的博客文件夹大小达到了五百多兆，这也是我为什么把Firebase的免费额度用超了的主要原因……考虑到我以后可能会放更多照片，我不得不提前规划一下。不太确定以后会不会继续换部署平台，但我不想自己的博客域名一直换，这样朋友们要是找不到我了怎么办（x）所以决定买个私人域名！
在折腾这些的时候我就顺便写了个博客记录一下。
挑选域名 #
网上的部署平台一般都会提供一个自己的域名（比如.netlify.app和.web.app），但是我觉得要做好我可能还会再换平台的准备，那么我的博客域名要是一直换就会很不方便了！！！于是我打算买个固定的博客域名。
说起来这是我第三次买个人域名了，第一次费尽全力给自己的技术博客（。）弄了个域名，没特意宣传也没做SEO，所以两年都没人访问，到期后我也没续费；第二次是在荷兰这边注册freelancer需要提供一个域名，我就买了随便弄了弄，现在域名都过期了我还没开张（擦汗
我之前在腾讯云和Namecheap上买的域名，还有其他一些常用的域名购买网站我列在下方：
每个网站都会对域名的第一年使用提供相对低廉的价格，后续续费就是原价了；所以一定要看续费价格是多少。
买域名的时候可能会看到价格里包含Whois注册费，Whois是一个用来查询域名或 IP 地址注册信息的协议和工具。它可以提供某个域名属于谁、注册在哪个注册商、什么时候注册、什么时候过期等信息。
一般来说，域名越偏门就越便宜，越泛用就越贵，比如后缀是.com的域名一定比后缀是.icu的域名贵！！并且前者的域名很有可能已经被占用，想买都买不到了。我经过一番精心挑选和视奸网友们的博客，在nanako.blog和nanako.icu之间纠结很久，最后还是选择了.icu作为后缀，因为.blog的域名每年续费要贵几十块呢…而且网友们的博客很多都用了.icu，跟上潮流！
有网友跟我推荐了.top域名，十分便宜，续费一年只要33块，大家可以看一看
挑好了域名，我决定先买三年。经过我对这个域名价格的对比，其中Dynadot是最便宜的，价格是200.9元，腾讯云的价格贵了9.1块，阿里云和Namecheap的贵了几十块，GoDaddy的价格贵了一百多块，NameSilo不允许一次性买三年，只能一年一年地买，续费价格是14.95刀（按照现在的汇率大概是108块，比Dynadot贵一点）。因此，最后还是选择在Dynadot上买了这个域名。
选择部署平台 #
目前市面上常见的静态博客托管服务有：
- Vercel
- Netlify
- Github Pages
- Firebase
- Cloudflare Pages
等很多我还没列出来的平台，这么多种选择真是让人眼花缭乱！在上文我已经提过了我的需求是放很多照片，目前我是把它们全部都放博客里，如图：
然后在构建博客时直接把这些照片一起部署到博客站点里。
这样做十分简单也方便，但是由于里面掺杂了相机原图，这让我的博客体积暴涨，也消耗掉了我所有的Firebase免费额度！！！这么多未优化过大小的图片也让我的博客的加载速度十分慢！另外我还要考虑到Github仓库是有限制大小的，单个仓库容量限制是建议不超过1G，强烈建议不超过5G，单个文件大小限制是100M（详情参见关于 GitHub 上的大文件）我现在的仓库大小已经有995MB了，而我的博客才运行两个多月（。）最好的办法是把照片们都上传到图床里，然后博客只存放小图片和博客文本。
下面对比一下不同平台，以及解释一下我为什么选择Cloudflare Pages的原因。
首先排除的就是Firebase，尽管它很好用，部署快速也方便，但是提供的免费额度太低了，我本来想着付费也可以接受，但是Firebase只允许按量计费，没有一个固定套餐……哇……这就很吓人了……这意味着我每个月会花多少我都不知道，万一有人恶意攻击我博客，想象一下那个天价账单都感觉自己快昏倒了！我也可以把照片放图床里然后继续用Firebase，但是我这个月的下载流量已经超了，就算我马上改，这个月也访问不了我的博客了（。）可恶，一脚踹飞Firebase！
第二个排除的平台是Github Pages，Github Pages很好，本身功能很强大，不过它的定位和Cloudflare Pages重叠了，我在这两个服务之间对比最后选择让Cloudflare Pages晋级决赛圈。主要有以下几点原因：
-
免费版的Github Pages要求我公开博客仓库，虽然我可以新建一个GitHub账号来保持隐私，但是我还是不太想公开博客仓库
-
考虑到我的照片们的存放问题，我可以在GitHub里搭一个图床，但是不仅麻烦，而且免费仓库那5GB的大小限制也让我觉得有点捉襟见肘。Clouflare R2可以提供图床服务，免费额度是10GB，并且最重要的是其他人访问我在里面存储的文件时我不需要付费，那么我就只需要考虑存储图片本身的费用了。
-
Cloudflare Pages的响应速度更快，集成的功能更多。下图是两者在全球范围内的访问速度对比，可以看出亚洲区域访问Github Pages的速度会慢一点。更多其他功能的对比可以查看这个页面。
剩下的这几个平台都差不多…感觉可以随便选！Netlify和Vercel之间最大的区别是Vercel不允许在免费版上进行商业使用或提供商业服务（我们搭博客的这个场景完全不受影响），以及据说Vercel的DNS已经被污染，在墙内无法访问，但Netlify能在国内直连（不确定是不是真的，欢迎大家在评论区反馈）。此外，Netlify提供内置访问分析服务，而Vercel的访问分析需要收费；同时Vercel的免费额度提供更长的构建分钟和更宽松的构建时间限制等等，但两个平台提供的免费额度都远远足够一个静态博客使用（除非你也往博客里放相机原图）。更详细的对比可以查看这篇文章，大家根据自己的需求自行选择就好啦。
最后考虑到我已经决定用Cloudflare R2作为图床，那就顺便选择Cloudflare Pages一起配合使用吧！而且Cloudflare这么大一个平台，不需要担心服务哪天突然挂了，未来也应该不需要再迁移升级了吧（？）
部署博客 #
创建项目 #
先注册好Cloudflare账号，随后进入Dashboard页面，点击「Workers & Pages」（如图）
点击「Pages」，再点击「Import an existing Git repository」。选择这个这是因为我已经有一个GitHub仓库了，如果此时还没建好GitHub仓库的话，还可以选择直接把构建好的博客文件（也就是运行hugo命令后生成的/public文件夹）直接上传到Cloudflare来部署，具体请查看这个页面。
连接GitHub #
进入下图这个页面后，就点击「Connect GitHub」。连接好自己的GitHub账号后，就选择自己的博客仓库。
接下来设置一下基本信息，请看图
配置完就点击下一步，它就会自动拉取最新的博客代码后开始自动构建，等待一会儿就能看到这个页面，说明博客已经成功部署了，是不是特别简单！
如图，现在访问这个网址已经可以访问到我的博客了。
如果没有设置域名和图床的需求，到这一步就可以结束啦！呱唧呱唧鼓掌.jpg
不需要再额外配Github Action什么的，从此以后写博客直接push到GitHub，Cloudflare就会自动做剩下的事情，部署也很快速，体验比Firebase好很多啊啊啊！
设置私人域名（可选） #
在Cloudflare注册自己的域名 #
这一步是必须的，不然在后续给博客/图床设置域名时会失败。由于我的域名已经买好了，所以选择转移域名。
然后选择免费计划，接着就会出现这个页面：
那么我们要回去买域名的地方（Dynadot）去配置一下name server。
点击「Action」按钮后选择「DNS Setting」，再设置基本信息：
配置好了以后就等它生效，可能需要等5-48小时，生效成功会发邮件通知。
给博客配置域名 #
在刚才部署成功的页面里点击「Add Custom Domain」，就会跳转到这个页面。点击「Set up a custom domain」。
输入自己的域名后点击「Continue」。
随后点击「Activate domain」。
在这个页面等一会，可能需要比较长时间，具体看情况。
最后在地址栏输入nanako.icu，就能成功访问到我的博客啦!
此外Cloudflare会自动配置SSL证书，所以现在我的域名也是有安全证书的域名了！
搭建图床 #
创建存储桶 #
进入Cloudflare R2的主页后点击「Get Started」，这时候需要用户配置一个付款方式，配置完才能开始使用。
在Dashboard页面点击「Create bucket」。
按照图上的说明设置好基本信息。
出现这个页面就说明这个存储桶已经建好啦！可以在这里上传自己的图片啦！
给存储桶配置私人域名（可选） #
如果不配置域名，就会自动一个一个很长的公共域名，不是不可以，就是略微有点麻烦。
点击「Setting」，找到「Custom Domains」。
输入自己的新域名后点击「Continue」。注意这里的域名不要完全和博客的一模一样，不然会覆盖掉原来的设置。
接着点击「Connect domain」。
出现如图字样就表示设置成功了！
配置PicGo（可选） #
每次打开Cloudflare上传图片的操作实在是太繁琐了，为了更便捷地上传和管理图片，推荐下载PicGo。从PicGo上传图片到存储桶后，会自动将链接复制到粘贴板里。
安装 #
首先在这个页面里下载自己需要的版本并安装到自己的电脑上。
我的M1系统安装后出现了问题，需要额外进行这个步骤，具体可以查看这个链接。
获取API token #
随后需要获取R2的API令牌，先点击Dashboard里的「R2 Object Storage」，进入到如图所示页面后，点击「API」。
随后点击「Manage API tokens」。
选择「Create User API token」。这两个选项对于我们个人用户没啥区别，但还是选择下面这个吧（感觉安全一点？）
由于需要从PicGo上传图片，所以需要授权读和写功能。以及为了安全考虑，建议每个token都专桶专用！
点击「Create token」后就会跳转到这个页面，记录好红框里的密钥等重要信息。
配置R2图床 #
首先右键点击状态栏，再点击打开主窗口，才能让应用界面展示出来。
接着去插件设置处搜索「s3」，下载插件。
下载好了以后就去图床设置处配置token。
把刚才获得的token和endpoints复制到这里来。
关于「上传文件路径」和「输出URL模板」怎么配置，请查看这个文档。
值得一提的是，如果想在存储桶里做文件夹分类，那么就需要在上传文件路径里设置文件夹前缀，比如我的伦敦游记照片在上传时就把「上传文件路径」设置成了london-trip/{fullName}，这样所有图片都会在london-trip文件夹里。如果在前面的步骤里设置了自定义域名，在「输出URL模板」里也要加入自定义域名，比如我的是https://photos.nanako.icu/london-trip/{fileName} 。下次上传其他图片时再记得去修改这个文件夹前缀！
设置好了后点击「设为默认图床」，就结束了。在使用的时候直接把图片上传到PicGo后，PicGo会把图片自动上传到图床里，并把链接放在剪贴板里供用户直接粘贴使用。
进阶设置 #
为了进一步方便我们写博客，可以把复制出来的链接格式设置为Markdown格式。这样，上传图片后就能直接得到一个Markdown链接可以展示此图片。
如图，选择自定义链接格式。
设置成。
参考链接 #
在这里感谢之前写教程的网友们，提供了很多参考信息！
总结 #
对比了那么久，做了很多功课，最后选择了在cloudflare部署我的博客，一番操作下来也确实感觉部署过程比之前更省心更丝滑了！有点后悔没有一开始就用Cloudflare啊，现在在这里强烈安利大家！