Cloudflare

分析sbti网站，我发现了很多好玩的事情。 比方说，你在必应搜索的时候，你会看到很多复刻的版本。 全是模仿李逵的李鬼。 大家都在自己的网站上，挂这个东西，来增加自己网站的流量。 （sbti.unun.dev ，这个才是原作者的网站） 域名要从后往前读，最后面的，级别最高，范围最大。 去掉最左侧的前缀（也就是子域名sbti），我们甚至可以访问到原作者的博客。 本文不谈原作者网站，我们以其中一个“李鬼”做一下赏析。 0、网页设计 这个网站的网页设计比较简单，给我的感觉就是 ai 味很浓。 可以看到，它的这个大标题设计、小标题、还有卡片的设计，都是 ai 设计网页的一个常见套路。 人物插画的设计，我觉得是个亮点，有种呆萌呆萌的感觉，情绪给的很到位。当然了，这是原作者的功劳。 这里使用了格林威治时间，因为这个网站全球都可以访问，如果大家都按自己的当地时间提交记录的话，那就会造成混乱。 你是早上八点提交的，过了两个小时，另外一个地方的人，也是早上八点，这就乱了。 （这个地方，网站略做了改动，跟我上午看到的完全不一样，已经改为北京时间了） 这里我还看到了 google 广告的脚本。 4月9日这个 sbti 梗开始火的。然后，今天10号，就准备挂广告了？！这变现速度真够快的。 但是，页面上没有显示任何广告，我猜测应该是 google 还在审核吧，而且，我觉得大概率是很难审核通过的，毕竟这不是原创的网站。 1、开发架构 这个网站的开发框架，用的是 nextjs 。 nextjs 是建立在 react 上的一个全栈框架，而 react 是一个前端开发库。 通过，chrome 插件我们可以一窥究竟。 这里有提交记录和排行榜，那么在整体架构中肯定会有数据库，至于用的什么数据库就不太清楚了。 数据库的话，也有免费的平台，例如 Supabase、PlanetScale、Neon、Vercel Postgres。 这些平台虽然免费，但是免费额度有限，可以用在项目的初始阶段，做个 mvp （Minimum Viable Product，最小可行产品） 。 如果项目火了之后，再考虑付费扩容。 排行榜，这里它用了一个缓存设计，目的是提高网页的响应速度。 因为，如果都从数据库拿数据的话，这个数据库就吃不消了。 网站作者把数据存在了用户本地。 这里我觉得做得很不好。 时间和排名都放在了本地。 刷新页面的时候，你会发现，时间不是实时的，排名就更不是了。 时间至少可以做一个实时的吧，排名可以做一个服务端的缓存，而不是把这一堆数据放在用户本地。 2、部署 vercel 通过解析响应头，我们可以看到这个网站它是用 vercel 进行的部署。 ...

本文通过实战案例，跟大家分享两个免费托管静态页面的平台。 简单来说，你可以在这些平台上免费发布你的个人简历、个人网站、博客等内容，超级方便。 1、Github Github 配置静态页面的步骤最为简单。 1.1 创建一个仓库 点击 new ，填写完配置信息后，即可创建一个个人仓库。 1.2 提交代码 将你的静态网页代码提交上去，一定一定要注意：必须要有 index.html。另外，这个项目的访问权限一定要配置成public（默认的）。 简单解释一下：index.html 相当于一个入口。不然的话，平台不知道从哪个页面开始解析。 我这里已经写好并开源了一个简历模板——个人简历模板，有需要的朋友可以参考一下。 1.3 配置页面 在仓库主页面，找到setting，找到page，找到main，选中之后，点击save。 稍作等待，你的网站就上线了！！就这么简单！！！！ 2、CloudFlare（以下简称CF） CF 托管静态页面，有两种方式： 方法一：关联git仓库 进入CF平台的账户界面，在 workers and pages 这里，创建一个应用。 点击 GitHub 这个选项，连接你的 Git 仓库。 对仓库进行授权。 点击 deploy 进行部署，无需填写任何东西。 稍作等待，你的个人简历网站，就发布成功了！！！ 方法二：上传静态文件 在这里创建一个新的应用。 点击这里，选择上传文件。 将刚才的简历项目打包，然后，上传至CF平台。请务必上传压缩包。上传文件夹以及其它形式都不太方便。 点击deploy，稍等一会，你的简历网站就发布成功了！！！ 关于 CF 的这两种部署方式，我想说一点，就是我更推荐第一种方式。 因为只要你提交代码到git仓库，它就可以自动更新页面（读者请自行尝试一下）。 而第二种方式很麻烦，需要你手动提交，也就是把网页代码重新打包，再上传到CF上。 以上就是本期分享，感谢阅读。最后想说一点，就是 CloudFlare 有很多免费好玩的用法，后面会继续更新文章探讨这些问题。再次感谢阅读。