手把手教你0成本无服务器搭建个人纯静态名片

手把手教你0成本无服务器搭建个人纯静态名片

好朋友 @万小忆 之前分享了一个个人纯静态名片,个人觉得非常好看:

图片[1]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

于是乎打算自己也做一个。在研究了一段时间以后,我找到了一个绝佳方案,这个方案甚至可以不需要服务器,如果你不在乎甚至可以不需要自备域名。

创作不易,麻烦各位读者注册/登录本站awa  废话不多说,下面就开始今天这期教程吧。

第一步(可选):注册Github Student Pack获得免费域名

如果你已经拥有域名了,就可以跳过,或者你不想购买域名,也可以跳过的。

注册Github学生认证请自行bing搜索,本文不再赘述。

已经通过验证的朋友可以访问这个网址:https://education.github.com/pack/offers

然后找到这一个:

图片[2]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

点击Get access by connecting your Github account on .TECH

进入网站后,随便输入你想要的一个域名,然后点击右侧的按钮,就会显示如下内容:

图片[3]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

如果显示的是available,则代表可用,如果显示unavailable(如下图),那就是被别人用着了,不行就换,换到可以为止。

图片[4]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

然后点击右侧的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
图片[6]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

有多的留空就好,点击Update Name Servers,在Cloudflare那里确认一下。

接下来就是等了。运气好差不多烧个水就完成了,运气不好得等第二天,Cloudflare会发邮箱给你,此时在Cloudflare仪表板显示“活动”。

第三步:创建Cloudflare Pages

Cloudflare的Pages和Workers已经合并了。现在点击Cloudflare主页(不是你域名那页)的Workers 和 Pages,点击创建,再点击Pages,点击上传项目,然后起个名字点击创建项目。然后它会提示你上传文件,我们先把他的示例下载下来:

图片[7]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

你可以根据其中html与css做改动,然后保存并压缩,然后上传。过一会就会提示上传成功。点击确定,等一小会即可。

然后访问它给你的三级域名:

图片[8]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

就能正常显示界面。

第四步(可选):将域名解析到网页

知道为什么要把域名解析到Cloudflare上吗?因为解析到上面好处太多了,你可以白嫖Cloudflare的CDN(国内用反而更慢,但是高防),WAF,Under Attack……甚至很多在Cloudflare的操作都是自动化的。

回到正题,点击自定义域按钮:

图片[9]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

然后点击设置自定义域:

图片[10]-手把手教你0成本无服务器搭建个人纯静态名片 - 于小丘 Blog-于小丘 Blog

然后点击继续,DNS解析按照流程来就OK。

还能一次性设置多个,比如访问i.heyfun.tech和i.yuxiaoqiu.cn也是一样的。

域名备案完以后也可以这么做,记得在底下加上ICP备案号和公安联网备案号。

© 版权声明
THE END
喜欢就点个赞支持一下吧
点赞0 分享