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

前言

因为之前经常要分享自己的博客链接,但原生的博客链接往往又长又复杂,不仅影响美观,还不便于记忆和传播。今年年初,当我第 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分钟就搭建了一个完全免费、私有化的短链接服务。这个方案特别适合:个人博客作者、小型团队内部使用、需要频繁分享链接的场景。相比使用第三方服务,自建方案的优势显而易见: 完全掌控自己的数据、可自定义功能、无需担心服务突然关闭、链接永久有效(只要维护服务)。

相关链接

相关推荐
华洛3 分钟前
聊聊我们公司的AI应用工程师每天都干啥?
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
JavaScript篇:你以为事件循环都一样?浏览器和Node的差别让我栽了跟头!
前端·javascript·面试
技术小丁6 分钟前
使用 HTML +JavaScript 从零构建视频帧提取器
javascript·html·音视频
gyx_这个杀手不太冷静6 分钟前
Vue3 响应式系统探秘:watch 如何成为你的数据侦探
前端·vue.js·架构
晴殇i12 分钟前
🌐 CDN跨域原理深度解析:浏览器安全策略的智慧设计
前端·面试·程序员
风象南15 分钟前
SpringBoot实现简易直播
java·spring boot·后端
漫谈网络24 分钟前
TypeScript 编译 ES6+ 语法到兼容的 JavaScript介绍
javascript·typescript·es6
这里有鱼汤24 分钟前
有人说10日低点买入法,赢率高达95%?我不信,于是亲自回测了下…
后端·python
Uyker38 分钟前
空间利用率提升90%!小程序侧边导航设计与高级交互实现
前端·微信小程序·小程序
bin91531 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的日历(Calendar),日历_天气预报日历示例(CalendarView01_18)
前端·javascript·vue.js·ecmascript·deepseek