Cursor实践项目-16-用Cursor快速开发社交媒体图片工具：从构思到上线全流程指南(四) — 域名购买+github+vercel+cloudflare->网站线上发布

项目说明

从零到上线：用域名 + GitHub + Vercel + Cloudflare，在 2 小时内把你的网站发布到互联网上。

你将完成：选/绑定域名 → 推代码到 GitHub → Vercel 自动构建发布 → 配好 DNS 与 HTTPS，一条龙搞定。

核心思路：只专注写代码，其它交给自动化流水线；提交即触发部署，更新即上线，出错可一键回滚。

最终结果：用你的专属域名，全球可访问、全站 HTTPS 的在线网站。

预计投入：约 2 小时，零基础也能跟上。

成果展示

网站已上架：pixtoolkits.com

pixtoolkits.com

前置准备

Cursor
- 版本：1.3.9
- cursor rules: https://cursorpractice.com/zh/cursor-tutorials/prompts/system-prompts
- agent: claude-4-sonnet-thinking、GTP-5
- project rules: ./cursorpractice-06-10xUse.md
可选：Gemini CLI
- 安装：npm install -g @gemini-cli/gemini
- 使用：gemini --help

为什么选择这种模式

各组件职责与优势：GitHub（协作与版本）、Vercel（零配置部署与边缘能力）、Cloudflare（全球 DNS 与安全）。
省心省力：写完代码推到 GitHub，网站会自动构建并上线，不用管服务器。
省钱：三者都有免费额度，个人或小团队就能用起来。
打开更快：全球加速，国内外访问都更顺畅。
更安全：全站 HTTPS，基础防护开箱即用。
好协作：多人修改有记录，有预览地址，出问题可一键回滚。
可迁移：域名放在 Cloudflare 管理，后续更换托管平台不受限制。
小提醒：
- 首次绑定域名和证书，通常要等几分钟到数小时生效。
- 图片/页面可以缓存，接口或实时数据不要强制缓存。
- 如果发布后有异常，可以快速回退到上个版本。

整体流程

域名注册；
github 创建仓库
cursor编辑代码，绑定并提交github仓库
vercel注册并初始化项目，绑定github仓库
绑定域名、设置DNS、自动生成https证书
浏览器打开域名，进行访问

项目详细步骤

1) 域名注册

域名服务有好多服务商提供，我选择的是namesilo，网址：www.namesilo.com/
让cursor基于项目的功能，帮你推荐几个域名，然后输入域名去确认是否可以采购
pixtoolkits.com 可以购买，选择并支付

2) github仓库建立

注册github
新创建一个仓库，右上角+下拉选择“New repository”
输入仓库名称，可以和你的域名一致，可以选择公开或者私有，私有就只有你自己可以访问。
然后这里就获取到你仓库的链接地址，点击复制

3) cursor编辑代码，绑定并提交github仓库

如图，git标志那边选择...，下拉选择“远程”->"添加远程存储库"->输入地址、输入仓库名称
可能会提醒你做一次认证，根据需求认证，如果不明白就让cursor来处理
绑定成功后，进行一次代码推送，左边栏上面会显示“提交”，下面会有本地的提交记录和一个橙色的云朵标志，那个就是远程仓库的版本。

4) vercel注册并初始化项目，绑定github仓库

注册vercel
登录vercel，创建项目, “ADD NEW...”->"Project"
与github账号进行绑定，根据提示进行认证，我这边已经是认证状态
在'Import Git repository'这里选择你的git仓库名称，会提示你没有找到该仓库，点击下面'Confiure Github App'。
跳转到github，在 setting-Applications-Repository access-选择你要开放给三方的仓库，开放之后在vercel那边即可选择。
重新回到vercel，这个时候就可以选中仓库，点击'Import'
进入新建项目界面，输入项目名称，点击'Deploy'
部署过程可以查看，可能会有错误
把信息信息截图，贴图给cursor进行修复。
修复完成之后，直接让cursor进行git提交，仓库已经绑定，后续已经可以自动推动，自动部署。修复完成后，vercel提示部署成功。点击进入控制台。

5) 绑定域名、设置DNS、自动生成https证书

下面进行域名的绑定，'Setting'-'Domains'-'ADD Domain'
输入域名,我这边是'pixtoolkits.com'，勾选将pixtoolkits.com转为'www.pixtoolkits.com'。
这边会有红色的警告，是因为没有ssl证书。需要去cloudflare进行设置
转到cloudflare，注册账号之后，进入'Accout Home'-点击'Onboard a domain'
输入域名，选择手动填写DNS设置，点击继续，下一步这边可以看到 nameservers的地址，这里需要将这个地址填写到你的域名服务商那边。
回到namesilo，进入域名管理界面，点击选择你刚注册的域名，填写对应的NameServers。记得删除多余的NameServers 3.
回到cloudflare，过一会就可以看到你的域名旁边显示了一个绿色的'active'，表示DNS已经解析完成。
再次回到vercel，查看刚才的项目，点击红色警告的地方，不要点击edit.复制vervel这边项目部署的ip，准备填写到cloudflare。
回到cloudflare，'DNS'-'Records'-选择域名开始填写-进行填写后进行保存.
填写完成后的效果
过一会，回到vercel就会看到已经没有红色的警告，提示SSL证书正在生成。
最后去cloudflare进行访问模式的修改，'SSL/TLS'-'overview'-'configure'，进行设置，设置为'FULL(Strict)'

6) 浏览器打开域名，进行访问

完成，打开浏览器，输入域名 pixtoolkits.com
后续可以持续更新功能，自动推动代码到git，然后你的网站也可以实时更新。

系列