家庭数据中心系列 使用github+cloudflare pages为www导航页搭建新家
本文最后更新于 195 天前,其中的信息可能已经有所发展或是发生改变,如有失效可到评论区留言。

前言

由于有了博客被攻击一事,我的忧患意识开始冒头了,这次虽然cloudflare抗下了绝大部分,但是也还是有20多万攻击打进了我的家庭数据中心内部,有一就有二,这次是博客,下次是哪个就不好说了(连我这小破站都能攻击的无聊人士,其他更无聊的事未必干不出来)。所以我想了下,除了必须部署在家庭数据中心内部的应用,比如wordpress、魔兽世界的注册网站(要连内网数据库)和其他直接以docker方式部署的应用,剩下的静态页面类型的站点,统统转移到能免费蹭的网页托管服务上去,首当其冲的就是www.tangwudi.com对应的导航页了。

接下来的问题是搬到哪里,本来是想直接使用github pages,但是一来github pages要求仓库必须是public,虽然我这也没啥保密的东西,但是也没有必要非要public;其次,我就算网站用github pages架设了,但是最终还是要使用www.tangwudi.com的独立域名接入cloudflare,那我还不如直接使用cloudflare pages关联github的仓库(且仓库还能设置为private)来进行架设,并且cloudlflare pages关联github仓库作为源时的CI/CD也非常流畅,在本地修改了页面,commit并push到github对应的仓库后,cloudflare几秒后就能开始部署,用不了几分钟就能完成更改,这不香吗?

所以最终确定,只是使用github作为仓库进行网站页面的版本管理,而网站就部署在cloudflare pages上。

将网站文件上传到github对应的仓库中

首先在github上先创建存放www网站文件的仓库:

image.png

接下来看大家的环境,如果没有图形界面就在终端下面用git相关命令进行操作,还要配置SSH等,比较麻烦,因为我这是在macmini上,所以直接使用的mac版的github desktop。
首先把新建的www仓库clone到本地的文件夹:

image.png

将网站相关文件直接拷贝进这个上面的目录中,然后在下图中依次点击"Commit to main" 和 "Publish branch":
image.png

Publish成功后,github上对应仓库的code里就可以看到网站文件了:
image.png

使用cloudflare page部署网站

关联github账号以及选择网站对应的仓库

在"Workers 和 Pages"-"概述"-"创建应用程序":

image.png

image.png

image.png

image.png

image.png

构建和部署

image.png

image.png

还没完,继续:
image.png

这时候,其实已经可以通过自动分配的三级域名"xxx.pages.dev"进行访问了,但是我需要直接用www.tangwudi.com进行访问的,所以还没完,继续:

image.png

image.png

image.png

image.png

image.png

大功告成,并且明显访问速度比以前快了(当然,也是因为以前我压根没有对www的站点的访问进行过优化)。

后话

其实,github pages和cloudflare pages本身提供的静态功能相对简单,更适合个人用户相对简单的需求。对于web端的开发者而言,需要更全面和更专业的周边配套功能,那么Netlify和Vercel更加适合,不过目前我这种入门级的需求,github pages和cloudflare pages就已经绰绰有余了。

另:cloudflare pages最大的限制,那就是每个月只能构建500次,嗯,我怀疑我能不用到5次。

博客内容均系原创,转载请注明出处!更多博客文章,可以移步至网站地图了解。博客的RSS地址为:https://blog.tangwudi.com/feed,欢迎订阅;如有需要,可以加入Telegram群一起讨论问题。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
       

本站已禁用鼠标右键和各种快捷键,代码块内容可以直接在右上角点击复制按钮进行复制

zh_CN