Sink 短链网站部署图文教程
10分钟教你拥有一个属于自己的网站,不用写一行代码(Cloudflare)
前言
起因是在 GitHub 上看到一个开源项目👇🏻
作者对该开源网站的简单介绍,简单来说,这是一个基于 Cloudflare 的带访问数据统计的短链系统,也可以自定义链接有效期。
为什么需要一个短链系统?
有的时候要复制的网页链接太长了,影响观感,且不知所云,比如:zIU1fUJJ4IeFgtIIXgQRrg,对于这个链接我们只知道这是一篇微信公众号文章,除此以外,你什么也不知道,有了短链系统,除了可以精简链接以外,还可以带上自己公众号的名称、这篇文章的名称,也就是所谓的你个人的品牌信息
另一点,通过这个系统生成的链接,你都可以在后台看到记录,它是在哪里被访问的,微信公众号?朋友圈?知乎?即刻?或是其他网站,你也可以通过后台看到访问你分享出去的链接的用户,来自哪些国家,使用的什么类型设备。具体演示图如下:
有的人可能会问,搭建这么一个短链系统的成本要多少?你只需要域名的成本,其他无任何费用,而域名的费用基本上一年不会超过 100-300 块人民币,像我买的 wr.do 域名,首年 ¥244,续费同价。
网站的具体搭建流程如下:
一、购买域名
wr.do
首先到 https://www.namesilo.com?rid=50fae21ln 或 https://midominio.do 购买一个域名
如果你是第一次访问 namesilo,先注册一个账号,可以用谷歌邮箱📮
那你可能会说,我不知道我要买什么域名啊,很简单,可以直接问 ChatGPT:
提示词我直接给你:
有哪些英语短语或单词可以形容”短链“,请按字母个数由少到多严格排序后给我 20 个结果
如果没有你想要的词,可以再多问几次,然后去 https://www.namesilo.com/?rid=50fae21ln 搜索看能不能购买,可以购买的话还需要注意下价格,什么意思呢?
因为 namesilo 上有的域名首年很便宜,1.88 美元,但是续费价格很贵,直接 20 多美元
如果你通过我的链接注册并购买域名的话(我会获得一点佣金),新用户可以使用 1 美元的优惠券,折扣码:wrdo
https://www.namesilo.com/?rid=50fae21ln
二、GitHub 项目
如果你还没有 GitHub 账号,请先注册一个,然后点击 https://github.com/ccbikai/Sink 进入到 Sink 项目的 GitHub 页面,然后点击 Fork 按钮,
把这个项目 fork 到你自己的 GitHub 账号下,后面会用到,
三、在 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
-
首先,点击 Create Token 按钮
-
然后选择自定义 token Custom token,点击 Get Started 按钮
-
填写基本信息,注意权限 Permissions 那里需要 Account.Account Analytics Read 权限,然后点击 Continue to summary 按钮
-
点击 Create Token 按钮,
-
然后你的 API token 就生成了,可以用网页上给你的 CURL 命令测试 token 是否 work,
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,在你绑定 Analytics 变量前,这一步会先让你开启,跟着提示照做就好,
3.7 重新部署网站
回到 Deployment 下面,点击 Retry deployment 按钮,等待部署完成,
部署完成后,就可以点击 Visit site 访问你的网站了,
但是这个时候你网站的域名不是你刚刚在 namesilo 上购买的域名,而是 Cloudflare 给你分配的,我们需要绑定自己的域名。
3.8 绑定自定义域名
点击 Custom domains, 然后点击 Set up a custom domain 按钮,
输入自己的域名,如:wr.do,点击 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 页面,可以看到 wr.do (mini-url.top),
进入后可以看到右侧有一个 DNS Records,
添加一条你自己的 DNS 记录
举例,假如你的域名是 ABC.com,那么你需要添加一条这样的记录:
Type 为 CNAME
Name 为 ABC.com
content 为 ABC.pages.dev
然后等个一两分钟左右,我们的自定义状态就变成 Active 了,
4 一个属于自己的网站就创建完成了
在浏览器地址栏输入 wr.do,可以看到,已经可以正常访问了,
进入 Dashboard 页面需要输入 Site Token,即密码,这个在是在我们添加 NUXT_SITE_TOKEN环境变量的时候设置好了的。
是不是没有想象的那么难?不过看再多不如自己动手试一试,成本不高,但这种从零到一的实践经验很重要
原文转自 链接