导语
Cloudflare是一个“终极白嫖平台”,而作为一级域名,如果就给了博客,不免有些浪费。
那么,不妨在一级域名上部署一个免费的个人主页吧 ~
利用 Cloudflare 的全球网络和算力,让你的个人主页在全球部署!
ps:一个静态页面好像也不怎么需要算力......
成果展示
几点说明:
1. 我把天气的api改为固定的了,所以无论你在哪,都显示“台北市”。
为什么呢,因为高德的api免费限制5000个请求,而我又是一个爱网站测速的人。
若是给我自己刷爆了就不好玩了。
2. 我也把一言api删除了(同样是固定的)
为什么呢?因为一言api限制短期请求数,我又爱刷新,于是一直提示一言获取失败,看了很烦,干脆直接固定了。
3. 音乐api是我自己搭建的,当然是用 Vercel 一键部署的。
因为原本的音乐api好像不能请求了,自己搭建一个也有掌控权。
提前准备
1. Cloudflare 的后台:https://dash.cloudflare.com/
要想使用 Cloudflare Pages 服务,你肯定是要有一个 Cloudflare 账号了。
当然,最好在你账号里绑定一个域名,这样子 Pages 就可以使用你自己的域名啦。
2. Github 仓库地址:https://github.com/imsyy/home
要想用 Cloudflare Pages 搭建一个网站,当然要有网站源码了。
而我们要使用的源码,就在这个 Github 仓库里。
当然,我对 Github 不是很了解,这里也不用多说了。
但是,你首先要有一个 Github 账号呀!
搭建
1. Fork Github 仓库
首先,打开 Github 仓库地址:https://github.com/imsyy/home
但这个源码,现在在别人的仓库里,自然不是你的,你又要如何修改呢?
所以,先在别人的 Github 仓库里,把仓库给 Fork 下来,就到你的仓库里了。
(由于我已经 Fork 过了就不再展示,但是 Fork 键 你肯定知道在哪,对吧!)
很好,被你发现了。
所以你一顿操作猛如虎就到你仓库里啦。
2. 在 Cloudflare Workers => Workers 和 Pages 里创建 一个 Pages
首先,这个 计算 Workers 的入口不是在域名里,而是在Cloudflare控制台的首页 => 右边的边栏里。
切换到 Pages 那栏里,点击 导入现有 Git 存储库 的 开始使用。
在这里,自然是要授权 Github 账户啦。
授权完成后,选择你 Github 的那个存储库,一般来说就是home
,然后点击开始设置。
3. 设置构建和部署
这是非常重要的,因为不知道为什么 Cloudflare 这么傻,不会帮你自动填写 构建命令 和 构建输出目录。
当然,框架预设是不用选择的。
构建命令:pnpm build
构建输出目录:dist
如果你不填这些,Cloudflare 依然会构建成功。
可是当你满怀欣喜地打开你的网站,却发现什么都没有,不免落空。
4. 将信息变为你的
因为这里是 Fork 别人的仓库,信息自然不是我们的。
那要如何填入自己的信息呢?
其实官方文档已经写得很清楚啦。
不过这里还是再点一下吧。
1. 主要信息
打开你的 Github 仓库,点击根目录下的 .env.example 文件并进入,再点击右上角编辑图标。
此时,上方的名称就可以更改啦。
自然,是把.env.example
重命名为.env
,再把相关信息改为你的。
最后,点击右上角那个绿绿的键,一顿点击就可以啦。
这时,你打开 Cloudflare Pages 的后台,就会发现它正在自动部署啦。
如此,你每次在 Github 仓库 所做的更改,Cloudflare 都会察觉并自动帮你部署啦。
当然,每次部署都会有一个专属链接,这个链接往往是你的 Pages 域名前再加上一些数字字母。
通过这些专属链接,你可以实时查看你的更改,避免缓存的影响。
但是在实际使用时,依旧是要用自己的域名啦。
2. 其他信息
说实话我已经不想再写了,请打开你的 Github 仓库,查看官方的文档把。
但是,你要注意,把站点链接和联系方式都改掉哦。
注意事项
绑定域名
在 Cloudflare Pages 的设置里哦。
我修改了信息,Cloudflare 也自动部署了,怎么没有变化呢?
这是因为缓存,有可能是浏览器的缓存,也可能是 Cloudflare 的缓存。
若要立马查看,请使用新部署的专属链接。
当然,打开浏览器的无痕模式用你的域名也是可以的啦。
结尾
天哪写得乱七八糟的,不过应该无人看,很好。
如果有不会的当然可以问我啦,说不定我也不会。
每次写这种教程类的文章都好累,而且也很难把握的住尺度。
究竟是详细一点好还是简单一点好呢?
大佬不屑于看,小白又看不懂,嘤嘤嘤。