从零搭建一个免费稳定的私有短链接服务

前言

因为之前经常要分享自己的博客链接,但原生的博客链接往往又长又复杂,不仅影响美观,还不便于记忆和传播。今年年初,当我第 N 次面对一个长达50多个字符的博客链接时,终于决定要解决这个问题。

起初,我尝试了市面上各种免费的短链接服务,但很快就发现了几个问题:

  1. 服务不稳定,经常无法访问
  2. 部分服务会插入广告或跳转页面
  3. 隐私问题令人担忧

在尝试了多个服务都不满意后,我决定自己动手搭建一个私有化的短链接服务。没想到这个最初只为自用的工具,在知乎分享后竟意外收获了不少用户。今天,我就把这个简单实用的解决方案完整分享给大家。

技术选型

在技术方案的选择上,我主要考虑了以下几个因素:

  • 完全免费:个人项目预算有限
  • 无需服务器运维:避免维护成本
  • 快速部署:简单易上手
  • 稳定可靠:保证服务可用性

最终确定的方案是:

  • 前端部署:Vercel(提供免费的Serverless服务)
  • 数据存储:Supabase(免费的PostgreSQL数据库)
  • 界面:简洁的HTML页面

详细部署指南

准备工作

在开始之前,请确保完成以下准备工作:

  1. 注册GitHub账号github.com/
  2. 注册Vercel账号vercel.com/
  3. Fork项目仓库 :访问 github.com/Alessandro-...,点击右上角的"Fork"按钮

第一步:部署到Vercel

  1. 登录Vercel后,点击左上角菜单,选择"Import Project"
  1. 点击"Continue with GitHub"并授权Vercel访问你的GitHub账号
  1. 如果是首次使用,需要安装Vercel的GitHub应用。点击"Install"完成安装
  1. 安装完成后,在项目列表中找到你fork的"short-link"项目,点击"Import"
  1. 保持默认配置,直接点击"Deploy"开始部署
  1. 等待部署完成,看到如下界面表示前端部署成功

第二步:配置Supabase数据库

虽然前端已经部署完成,但我们的服务还需要数据库支持。按照以下步骤配置:

  1. 在Vercel项目页面,点击"Storage"选项卡

  2. 选择Supabase,点击"Create"

  1. 阅读并接受条款,点击"Accept and Create"
  1. 选择"Free Plan"免费计划,点击"Continue"
  1. 保持默认数据库名称,点击"Create"创建数据库
  1. 创建完成后点击"Connect"连接数据库
  1. 点击"Open in Supabase"进入数据库管理界面

第三步:初始化数据库表结构

  1. 在项目代码的 config 目录中找到 pg.sql 文件,复制全部内容
  1. 在 Supabase 控制台中,选择"SQL Editor"

  2. 点击"+"号,选择"Create a new Snippet"

  3. 粘贴复制的 SQL 代码,点击"Run"执行

第四步:测试使用

现在,你的短链接服务已经准备就绪:

  1. 回到Vercel项目页面,找到项目访问链接
  1. 打开链接,输入任意URL测试生成功能

重要提示: Vercel提供的免费域名在国内可能无法直接访问。解决方案有两种:

  1. 绑定自己的域名(推荐)
  2. 使用科学上网工具访问

常见问题解答

Q:这个服务是完全免费的吗?

A:是的,Vercel 和 Supabase 都有免费套餐,对于个人或小规模使用完全足够。

Q:最多可以生成多少个短链接?

A:Supabase 免费版有 500MB 存储空间,按每条记录约 1KB 计算,理论上可存储约50万条记录。

Q:如何修改短链接的前缀?

A:默认前缀是 /u/,如需修改,需要在代码中进行修改。

Q:服务会收集用户数据吗?

A:不会,所有数据都存储在你自己的 Supabase 数据库中,完全私有化。

结语

通过这个教程,我们只用不到30分钟就搭建了一个完全免费、私有化的短链接服务。这个方案特别适合:个人博客作者、小型团队内部使用、需要频繁分享链接的场景。相比使用第三方服务,自建方案的优势显而易见: 完全掌控自己的数据、可自定义功能、无需担心服务突然关闭、链接永久有效(只要维护服务)。

相关链接

相关推荐
翻滚吧键盘2 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾6 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
重庆小透明11 分钟前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存
超级土豆粉14 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。20 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
博观而约取36 分钟前
Django 数据迁移全解析:makemigrations & migrate 常见错误与解决方案
后端·python·django
乆夨(jiuze)41 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html