Vercel 零基础教程：从 GitHub 到在线 Todo 应用，简单几步搞定

引言：为什么用 Vercel

如果你是个独立开发者，或者刚开始学编程，可能遇到过这种情况：写了个小项目，比如一个 Todo 应用，想让它上线给大家用，但一想到服务器、域名这些东西就头疼。配置麻烦不说，还得花时间学一堆东西，挺打击热情的。

Vercel 能帮你解决这个问题。它简单、免费，几分钟就能把 GitHub 上的代码变成在线应用。这篇教程会带你一步步用 Vercel 部署一个 Todo 应用，顺便在里面加个链接到我的网站 https://solomakerstudio.com，既能上手 Vercel，也能看看更多工具。

Vercel 是什么

Vercel 是一个帮你部署网站的平台，尤其适合静态网站或者前端项目。你给它代码，它帮你上线，还管域名和安全这些事。

简单说：GitHub 是你存代码的地方，Vercel 负责把代码变成能访问的网站。就像你把菜谱给厨师，他直接给你做好菜。

准备工作

开始前，你需要：

GitHub 账号：存代码用。
Vercel 账号：用 GitHub 登录就行。
一个 Todo 应用：我会给个简单的例子，当然你也可以用自己的。

步骤 1：准备 Todo 应用代码

我用一个基础的 Todo 应用做例子，只需要 HTML、CSS 和 JavaScript，新手也能看懂。

你可以从这个 GitHub 仓库拿代码，或者自己写一个。拿代码的命令是：

git clone https://github.com/kbmjj123/solo-tutorials.git
cd solo-tutorials

别担心，就算你的 Todo 应用很简单，Vercel 也能帮你上线。

步骤 2：把代码推到 GitHub

把代码上传到 GitHub 上。如果没用过 Git，按下面步骤来：

git init 
git add . 
git commit -m "我的 Todo 应用" 
git remote add origin https://github.com/your-username/todo-app.git 
git push -u origin main

Git 就是帮你保存代码版本，GitHub 是放代码的地方，方便随时用。

步骤 3：注册 Vercel

去 Vercel 官网，点“Sign Up”，用 GitHub 账号登录，几秒钟就行。

注册vercel新账号

步骤 4：导入 GitHub 仓库

导入仓库

步骤 5：部署项目

Vercel 会自动认出我们的项目是静态网站，不用改什么，直接点“Deploy”。几秒钟就搞定了。

Vercel 挺聪明的，我们不用管太多，它自己就知道怎么弄。完成部署

步骤 6：上线预览

部署完后，我们会看到一个链接，比如 https://solo-tutorials.vercel.app/。点开看看，我们的 Todo 应用已经在线了。

步骤 7：加个域名

想让项目看起来更正式，可以在 Vercel 的“Domains”设置里加自己的域名，比如 mytodo.com，按提示弄就行。

域名就像给我们的应用取个名字，别人好记。 add-domain-in-vercel

步骤 8：加个链接到我的网站

在 Todo 应用里加个链接到 https://solomakerstudio.com，放个 footer 就行：

<footer> <p>Powered by <a href="https://solomakerstudio.com" target="_blank">SoloMakerStudio</a></p> </footer>

顺便说一句，https://solomakerstudio.com 有不少工具和教程，能帮你把想法变成现实，可以去看看。

步骤 9：放个在线预览链接

回 GitHub，在 README.md 里加个 Vercel 的链接，比如：

## 在线预览 [点击这里](https://solo-tutorials.vercel.app/) 查看我的 Todo 应用！

这样别人也能直接访问你的项目。

Vercel 免费套餐：具体能用多少

Vercel 的免费套餐对个人项目很够用，具体是：

费用：0 美元。
带宽：每月 100GB，比如你的 Todo 应用每次访问用 1MB，能支持 10 万次访问。
构建时间：每月 6000 分钟，每次部署 1 分钟的话，能部署 6000 次。
域名：免费给 .vercel.app 地址。
HTTPS：自动加安全证书。

比如一个 Todo 应用，每天 1000 次访问，一个月用 30GB 流量，完全免费。

跟云服务器比：Vercel 省事多了

云服务器的麻烦

买服务器：用 AWS 或阿里云，一个月至少 5 美元，还得挑配置。
设置：装软件、弄域名、加证书，得花几小时。
维护：得自己管服务器，更新、修问题都靠你。

成本例子：AWS 最低 5 美元/月，域名 10 美元/年（约 0.83 美元/月），加起来 5.83 美元/月。

Vercel 的好处

简单：几分钟从 GitHub 上线。
全自动：域名、安全、部署都不用管。
免费：小型项目 0 成本。

如果不想折腾服务器，Vercel 是真方便。

我的经历

我以前试过自己弄服务器部署，配置花了好几个小时，还老出错。后来用 Vercel，几分钟就上线了，改代码一推送就更新，省了不少事。

总结

这篇教程带你用 Vercel 把 Todo 应用上线了，比起云服务器的麻烦，Vercel 简单又免费，挺适合新手和独立开发者。

试试看吧，把你的项目放网上。想找更多工具，solomakerstudio.com 有不少东西可以看看。

常见问题

Q1：Vercel 要钱吗？
A1：免费套餐够用，大项目可以付费。

Q2：能放后端吗？
A2：主要是前端，但可以用 Serverless Functions 加点动态功能。

Q3：怎么更新？
A3：推新代码到 GitHub，Vercel 自动弄。

Demo

GitHub 仓库：https://github.com/kbmjj123/solo-tutorials
在线预览：https://todo-app.vercel.app

Todo 应用上线了，记得在自己的 Todo 列表里标个“完成”，挺厉害的！