【详细图文教程】10分钟教你拥有一个属于自己的网站，不用写一行代码
同步来源：树洞剪藏 源站剪藏 ID：73 原文地址：https://mp.weixin.qq.com/s?__biz=MzU2OTYyNjY3OQ==&mid=2247486377&idx=1&sn=5a8348717546174e424e2e7fc505044f&chksm=fcfa92f1cb8d1be7a3d4b4591635d2e9ccc3e0b44252571957cd372737a549972442ac2fa459#rd
【详细图文教程】10分钟教你拥有一个属于自己的网站，不用写一行代码
【详细图文教程】10分钟教你拥有一个属于自己的网站，不用写一行代码
原创
tibidaboooo
我的 Beta 世界
2024年06月11日 17:41 浙江
蛤蟆先生
读完需要 20 分钟 速读仅需 7 分钟 / 一、背景 / 起因是在 GitHub 上看到一个开源项目👇🏻
作者对该开源网站的简单介绍，简单来说，这是一个基于 Cloudflare 的带访问数据统计的短链系统，也可以自定义链接有效期。
为什么需要一个短链系统？
有的时候要复制的网页链接太长了，影响观感，且不知所云，比如： https://mp.weixin.qq.com/s/zIU1fUJJ4IeFgtIIXgQRrg ，对于这个链接我们只知道这是一篇微信公众号文章，除此以外，你什么也不知道，有了短链系统，除了可以精简链接以外，还可以带上自己公众号的名称、这篇文章的名称，也就是所谓的你个人的品牌信息
另一点，通过这个系统生成的链接，你都可以在后台看到记录，它是在哪里被访问的，微信公众号？朋友圈？知乎？即刻？或是其他网站，你也可以通过后台看到访问你分享出去的链接的用户，来自哪些国家，使用的什么类型设备。具体演示图如下： 有的人可能会问，搭建这么一个短链系统的成本要多少？ 你只需要域名的成本 ，其他无任何费用，而域名的费用基本上一年不会超过 100 块人民币，像我买的 mini-url.top 域名，首年 $1.88（等于￥13.74），后面续费是 $4.88（不到 ￥36）。 网站的具体搭建流程如下： / 二、搭建网站全流程（不用写代码） / 1
购买域名 mini-url.top 首先到 namesilo ( https://mini-url.top/namesilo ) 买一个域名，你看我这里就用 mini-url.top 创建了一个链接，原链接如下：https://www.namesilo.com/?rid=7e8ea72va ( https://www.namesilo.com/?rid=7e8ea72va ) 如果你是第一次访问 namesilo，先注册一个账号，可以用谷歌邮箱📮
那你可能会说，我不知道我要买什么域名啊，很简单，可以直接问 ChatGPT： 提示词我直接给你： 有哪些英语短语或单词可以形容”短链“，请按字母个数由少到多严格排序后给我 20 个结果
如果没有你想要的词，可以再多问几次，然后去 namesilo ( https://mini-url.top/namesilo ) 搜索看能不能购买，可以购买的话还需要注意下价格，什么意思呢？ 因为 namesilo 上有的域名首年很便宜，1.88 美元，但是续费价格很贵，直接 20 多美元，看下图， mini-url.buzz 这个域名，首年 $1.59，续费价格是 $27.99。 如果你通过我的链接注册并购买域名的话（我会获得一点佣金），新用户可以使用 1 美元的优惠券，折扣码： frog1off https://www.namesilo.com/?rid=7e8ea72va ( https://www.namesilo.com/?rid=7e8ea72va ) 2
GitHub 项目 如果你还没有 GitHub 账号，请先注册一个，然后点击 https://github.com/ccbikai/Sink ( https://github.com/ccbikai/Sink ) 进入到 Sink 项目的 GitHub 页面，然后点击 Fork 按钮， 把这个项目 fork 到你自己的 GitHub 账号下，后面会用到， 3
在 Cloudflare 上进行信息的设置和部署 3.1
首先打开 Cloudflare ( https://www.cloudflare.com/zh-cn/ ) 页面进行注册，注册过的话，跳过这步 然后点击 Workers 和 Pages ，点击 Create 3.2
选择 Pages ， 然后点击 Connect to Git ，
3.3
关联你自己的 GitHub 账户，然后选择前面 fork 到自己账号下的 Sink 项目，点击 Begin Setup
3.4
Framework preset 选择 Nuxt.js
3.5
然后添加以下三个环境变量 NUXT_SITE_TOKEN 至少 8 位，且最好是大小写英文和数字结合，这个就是你后面搭建好的网站的登录密码，设置完后记得保存好， NUXT_CF_ACCOUNT_ID Account ID 如何获取呢？
登录 Cloudflare dashboard ( https://dash.cloudflare.com/login )
点击 Workers & Pages
账号详情里就有你的 Account ID 信息，点击复制按钮即可 或者也可以到你域名的 overview 页面，右下角也能找到 Account ID 信息， NUXT_CF_API_TOKEN 这一步我们要创建一个 Cloudflare API token ( https://developers.cloudflare.com/fundamentals/api/get-started/create-token/ )
首先，点击 Create Token 按钮
然后选择自定义 token Custom token ，点击 Get Started 按钮
填写基本信息，注意权限 Permissions 那里需要 Account.Account Analytics Read 权限，然后点击 Continue to summary 按钮
点击 Create Token 按钮，
然后你的 API token 就生成了，可以用网页上给你的 CURL 命令测试 token 是否 work， 出现以下内容则说明正常：
{ "result": { "id": "具体的id", "status": "active" }, "success": true, "errors": [ ], "messages": [ { "code": 10000, "message": "This API Token is valid and active", "type": null } ] }
3.6
绑定变量并部署 添加完上面三个环境变量后，点击 Save and Deploy 按钮开始进行部署， 注意，部署的时候记得取消部署 ，我这边因为已经取消过了，所以按钮显示的是 Retry Deployment。 然后点击左上角返回到项目首页，依次点击 Settings -> Functions，然后绑定变量 KV 到 KV namespace： 先创建一个名叫 KV 的 namespace，然后添加一个叫 KV 的变量，将其绑定到刚刚创建的 KV namespace， 往下滑，绑定变量 AI 到 Workers AI Catalog ，这一步是可选项，可绑定也可不绑定， 绑定 Analytics Engine，把变量名 ANALYTICS 绑定到 sink 数据集里， 然后为你的账户打开 Cloudflare Analytics Engine beta ( https://developers.cloudflare.com/analytics/analytics-engine/get-started/ )，在你绑定 Analytics 变量前，这一步会先让你开启，跟着提示照做就好， 3.7
重新部署网站 回到 Deployment 下面，点击 Retry deployment 按钮，等待部署完成， 部署完成后，就可以点击 Visit site 访问你的网站了， 但是这个时候你网站的域名不是你刚刚在 namesilo 上购买的域名，而是 Cloudflare 给你分配的，我们需要绑定自己的域名。 3.8
绑定自定义域名 点击 Custom domains ， 然后点击 Set up a custom domain 按钮， 输入自己的域名，如： mini-url.top ，点击 Begin DNS transfer 按钮， 因为我们的域名是在 namesilo 上买的，但我们网站是在 Cloudflare 上部署的，所以我们需要在 namesilo 里把网站的 DNS 修改成 Cloudflare 给我们的， 然后去 namesilo 里把 namesilo 给我们分配的默认 NameServer 改成上面👆🏻 Cloudflare 的，注意，namesilo 会给我们分配 3 个 NameServer，我们只需要改前两个，然后把另外一个删掉即可。 继续输入我们的域名： mini-url.top ，点击 Continue 按钮， 选择 Free 套餐，点击 Confirm plan ， 点击 Start quick scan 按钮， 点击 Continue ， 点击 Continue to mini-url.top overview ， 3.9
添加 DNS Records 回到 Websites ( https://dash.cloudflare.com/fc2f4521ece03536e1cab6e95d6c32cf ) 页面，可以看到 mini-url.top ， 进入后可以看到右侧有一个 DNS Records ， 添加一条你自己的 DNS 记录 举例，假如你的域名是 ABC.com，那么你需要添加一条这样的记录：
Type 为 CNAME
Name 为 ABC.com
content 为 ABC.pages.dev 然后等个一两分钟左右，我们的自定义状态就变成 Active 了， 4
一个属于自己的网站就创建完成了 在浏览器地址栏输入 mini-url.top ，可以看到，已经可以正常访问了， 进入 Dashboard 页面需要输入 Site Token，即密码，这个在是在我们添加 NUXT_SITE_TOKEN 环境变量的时候设置好了的。 是不是没有想象的那么难？不过看再多不如自己动手试一试，成本不高，但这种从零到一的实践经验很重要。
预览时标签不可点
看世界 99 有趣的内容 8
看世界 · 目录
上一篇 最可用的 Web 端侧 AI 来了！Chrome 127 版本内置 Gemini Nano 端侧模型 下一篇 基于 Cloudflare Pages 搭建你的专属开源图床 ，无限图片储存数量，无需服务器，无需域名
个人观点，仅供参考
关闭
更多
小程序 广告
搜索「undefined」网络结果
微信扫一扫 关注该公众号
当前内容可能存在未经审核的第三方商业营销信息，请确认是否继续访问。
继续访问 取消 微信公众平台广告规范指引
： ， 。
视频 小程序 赞 ，轻点两下取消赞 在看 ，轻点两下取消在看 分享 留言 收藏