很久前我写过一篇文章《Media Buy之免费且高速的Landing Page部署方案》
里面介绍了使用GitHub,Cloudflare,Netlify配合,做一个可以静态部署的Landing Page方案,实际上在有了Cloudflare Pages之后,现在我们可以更方便的省去Netlify这一步。
1.购买域名,托管到Cloudflare
首先我们购买好域名,我推荐使用Namecheap,可以长期使用他们的永久优惠码COUPONFCNC
,购买后将域名托管到Cloudflare。步骤如下:
1.在Cloudflare后台点击左侧菜单的网站
,点击右侧的添加域,在弹出的页面中输入你的域名。
2.选择最下方的Free计划,点击继续。
3.然后Cloudflare会扫描你这个域名的DNS记录,点击继续,在弹出的页面中将分配给你的两个Cloudflare名称服务器,分别粘贴到namecheap后台的域名管理名称服务器处,如下图:

记得点击右上角的✅保存。
2.Cloudflare设置
这一步的内容是可选项,只是我个人建议如此设置。
1.点击左侧菜单的安全性
展开,点击设置,将安全级别修改为本质上为关。避免一些Cloudflare误判浪费了我们购买来的流量。
2.点击左侧菜单的SSL/TLS
,在概述中将加密模式修改为灵活。
3.点击左侧菜单的缓存
展开,点击配置,将浏览器缓存 TTL
这一项的时间设置为1年。
3.创建Github仓库

登录GitHub后点击上图中红框部分(两者均可)。

Repository name填写一个仓库名称,选择Private,勾选Add a README file,最后点击Create repository即可创建。
创建成功后,点击Code按钮,再点击Open with Github Desktop,将仓库下载到本地,如下图:

后续我们只需要将LP放到本地仓库中,再提交到GitHub,即可自动部署。
4.Pages创建
回到Cloudflare的帐户主页,在左侧菜单中找到Workers和Pages
,点击创建,然后在弹出的页面中切换到Pages Tab下,如下图:

点击连接到Git,选择你的GitHub帐户和仓库即可连接。
连接成功后切换到自定义域
这个Tab,点击设置自定义域,输入你的域名即可自动添加CNAME记录。
至此,配置部分已经完成。
如何使用
将你处理好的LP放到本地仓库的根目录下,如图:

打开你的GitHub Desktop客户端,你会看到如下图的内容:

我们在1处随意输入一个标题,方便以后你自己分辨即可,我一般以geo-landingpage名称来命名,然后点击2处按钮,此时3处的按钮会变成Push origin,点击即可。
最后我们等待Cloudflare Pages自动拉取GitHub仓库的提交,自动部署即可。
以上!