好朋友 @万小忆
之前分享了一个个人纯静态名片,个人觉得非常好看:
![图片[1]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/d0217a244d9cabfaee0461087e5d428c.webp)
于是乎打算自己也做一个。在研究了一段时间以后,我找到了一个绝佳方案,这个方案甚至可以不需要服务器,如果你不在乎甚至可以不需要自备域名。
创作不易,麻烦各位读者注册/登录本站awa 废话不多说,下面就开始今天这期教程吧。
第一步(可选):注册Github Student Pack获得免费域名
如果你已经拥有域名了,就可以跳过,或者你不想购买域名,也可以跳过的。
注册Github学生认证请自行bing搜索,本文不再赘述。
已经通过验证的朋友可以访问这个网址:https://education.github.com/pack/offers
然后找到这一个:
![图片[2]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/36b735ca3c76be8d2ed514d5795cbd6c.webp)
点击Get access by connecting your Github account on .TECH
进入网站后,随便输入你想要的一个域名,然后点击右侧的按钮,就会显示如下内容:
![图片[3]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/f53e436eb4eeeb7afba8b208a4a0c505.webp)
如果显示的是available
,则代表可用,如果显示unavailable
(如下图),那就是被别人用着了,不行就换,换到可以为止。
![图片[4]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/af1ac831bd05285682ca7232f7b1efbb.webp)
然后点击右侧的Proceed。
随后选择注册,然后选择Github,这时候登录那个带有学生认证的Github账户,跟着流程走,然后就可以获得这个域名了。
先别着急,这时候这个域名的所有权还不在你手上,你需要在邮箱里确认。
打开你注册.tech的邮箱,然后找到这封邮件:
IMPORTANT! Verify your contact information for example.tech
点击里面的http://controlpanel.tech/linkhandler/servlet/ValidateRAAServlet?id=114514&token=kfcvme50
这种格式的链接进行确认。然后你就获得这个域名了。
然后你就又会收到一封以Success开头的邮件。这时候点击里面的Control Panel
,进入管理面板。
第二步:将域名名称服务器(DNS)解析到Cloudflare
其他域名厂商的本人不做赘述,本文仅讲述从上文获取到的tech域名的解析方法。
首先注册cloudflare账号:https://dash.cloudflare.com/login?lang=zh-Hans-CN
然后点击网站-添加网站,输入你刚才获得的域名。
然后选择计划,选择下方的Free计划。
随后会给你两个DNS地址。把这两个地址填入到上文说的仪表板的name server
中:
![图片[5]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/285bc225bc05763f9e11b777a3dd4408.webp)
![图片[6]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/7fbfa8e5fcb195f6423b4085f859e238.webp)
有多的留空就好,点击Update Name Servers,在Cloudflare那里确认一下。
接下来就是等了。运气好差不多烧个水就完成了,运气不好得等第二天,Cloudflare会发邮箱给你,此时在Cloudflare仪表板显示“活动”。
第三步:创建Cloudflare Pages
Cloudflare的Pages和Workers已经合并了。现在点击Cloudflare主页(不是你域名那页)的Workers 和 Pages
,点击创建,再点击Pages,点击上传项目,然后起个名字点击创建项目。然后它会提示你上传文件,我们先把他的示例下载下来:
![图片[7]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/e5171ebd723ad86fd16c14c400877fe2.webp)
你可以根据其中html与css做改动,然后保存并压缩,然后上传。过一会就会提示上传成功。点击确定,等一小会即可。
然后访问它给你的三级域名:
![图片[8]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/9c3a7c57ef6565c504b0daac2af528ed.webp)
就能正常显示界面。
第四步(可选):将域名解析到网页
知道为什么要把域名解析到Cloudflare上吗?因为解析到上面好处太多了,你可以白嫖Cloudflare的CDN(国内用反而更慢,但是高防),WAF,Under Attack……甚至很多在Cloudflare的操作都是自动化的。
回到正题,点击自定义域按钮:
![图片[9]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/4a61f088f5bbd7a6c1b0c850e03afb02.webp)
然后点击设置自定义域:
![图片[10]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog](https://www.yxqi.cn/wp-content/uploads/2025/01/f8298fae5570702e6d718df831eadab9.webp)
然后点击继续,DNS解析按照流程来就OK。
还能一次性设置多个,比如访问i.heyfun.tech和i.yuxiaoqiu.cn也是一样的。
域名备案完以后也可以这么做,记得在底下加上ICP备案号和公安联网备案号。