← 返回首页ai798LAB Public

vibe-coding-课程-干货集训

01 部署上线

2026年4月18日1. 理想长度在614个字符之间。短域名便于用户记忆和输入。

域名选择的4条黄金法则

简短优先原则

  1. 理想长度在6-14个字符之间。短域名便于用户记忆和输入。
  2. 如 notion.so 就比 notion-productivity-app.com 好很多。

域名后缀选择

  1. 优先选择以下后缀的域名
  2. .com 仍然是全球认可度最高的后缀；
  3. .ai是做AI工具站的首选后缀，因为搜索引擎会天然的把.ai网站视作具有AI性质的网站；
  4. 如果目标市场是特定国家，可考虑国别域名如 .cn、.``co.uk，但对于新手做国际市场，优先抢 .com；
  5. .org 是做公益性质网站的标准后缀，如果你希望让用户认为你的网站纯公益且免费，可以考虑

雷区勿进

  1. 请尽量避免以下雷区
  2. 连字符（-）
  3. 数字
  4. 双写字母（如 pressstart 里的 ss）
  5. 容易拼错的单词

关键词与品牌的微妙融合

  1. 过去"精确匹配域名"（EMD）如 bestrunningshoes.com 有搜索加成，但Google现在更看重内容质量
  2. 建议是：如果关键词能自然融入品牌名（如 canva.com 暗示 canvas），很好；但不要为了塞关键词牺牲品牌感。

域名购买

推荐网站

  1. https://porkbun.com/
  2. 首推，可用支付宝付款
  3. https://www.godaddy.com/
  4. https://www.namecheap.com/

购买流程

  1. 进入Porkbun图片展示的是Porkbun网站的域名搜索页面。页面顶部有网站名称“porkbun”及导航栏，右上角显示账户信息和购物车。中间部分有“SEARCH FOR YOUR NEW DOMAIN NAME”标题，下方有一个搜索框，提示“Find your domain...”，并有“bulk search”下拉选项及搜索图标。页面底部展示了.com和.net域名的起始价格。该图片与文档中“域名购买”部分的“购买流程”步骤1相关，对应进入Porkbun网站后进行域名搜索的操作。
  2. 搜索一个域名，比如cybercat404.com。然后我们点击搜索图片展示的是Porkbun网站的域名搜索页面。页面上方有网站名称“porkbun”及导航栏，中间有“SEARCH FOR YOUR NEW DOMAIN NAME”字样，下方搜索框内已输入“cybercat404.com”，框右侧有“bulk search”和一个红色的放大镜搜索按钮。页面底部有“.com”和“.net”域名标识及价格信息。该图片对应文档中“域名购买”部分，用于说明在Porkbun网站搜索域名的操作步骤。图片展示的是Porkbun网站购买域名的页面。页面上方有导航栏，显示“cybercat404.com”搜索内容。下方列出多个域名选项，如cybercat404.com、cybercat404.net等，每个域名后有价格、续费价格及“+”号标识，部分域名还标注“1st Year Sale”和“At Cost”。页面右上角有“bulk search”按钮和搜索图标。该图片与文档中“域名购买”部分的Porkbun购买流程介绍相关，展示了在Porkbun搜索域名后的页面情况。
  3. 我们选择一个域名，点击「+」，把域名加入购物车。点击「Check Out」，进入结算页面图片展示的是Porkbun网站的域名购买页面。页面上方显示“SAVE 12% on cybercat404.com and cybercat404.co.uk for only $11.08”。下方有“MARKET At Cost $35.53 / year”和“ORG 1 Year Sale! At Cost $10.94 / $6.88 / year”两个选项。中间部分列出多个以“cybercat404”开头的域名，如cybercat404.com、cybercat404.now等，显示价格、年费、续费价格及是否为1年促销等信息，部分域名有红色“+”号标识。该图与上下文介绍的域名购买流程相关，展示了选择域名后的页面情况。图片展示的是Porkbun网站的域名购买页面。页面中列出了多个以“cybercat404”开头的域名，如.com、.now、.inc等，每个域名后显示其价格及续费价格。其中，.org域名以“1st Year Sale!”标识，价格为$6.88/年，续费为$12.76/年。页面右下角有“Checkout”按钮，箭头指向该按钮，提示用户点击进入结算页面。此图与文档中域名购买流程的上下文对应，是购买流程中选择域名并点击“+”加入购物车后，点击“Check Out”进入结算页面的示例。
  4. 在结算页面，点击「Continue to Billing」图片展示的是域名购买流程中Porkbun网站的结算页面。页面显示域名cybercat404.com的隐藏费用为0，总价1.13美元，且无退款/例外情况。下方有“Continue to Billing”蓝色按钮，被红色框突出显示。该图片与上下文紧密相关，对应文档中“在结算页面，点击‘Continue to Billing’”这一步骤，直观呈现了点击该按钮的操作位置，帮助用户明确操作目标。
  5. 接着，我们选择使用Alipay进行结算，即可完成购买图片展示的是Porkbun域名购买流程中的结算页面。页面显示需支付1.13美元，有多种支付方式可选，其中“Alipay”以红色突出显示。下方有“我们接受Alipay！”的提示，以及需勾选同意相关条款的提示框。该图片与上文“在结算页面，点击‘Continue to Billing’，接着选择使用Alipay进行结算，即可完成购买”的内容对应，直观呈现了使用Alipay结算的界面情况。

部署教程

<file token="BeDnbi7enoyTd0xvUTLcswBAnwe" name="BeDnbi7enoyTd0xvUTLcswBAnwe"/>

部署路线

图片展示了本地项目部署上线的路线图。从左侧“本地项目”开始，箭头指向“Github”，标注“发布到”；再从“Github”箭头指向“Vercel”，标注“关联到”；最后从“Vercel”箭头指向“用户访问”，标注“发布”。该图与文档中“部署路线”内容相关，直观呈现了从本地项目发布到Github，再关联到Vercel，最终用户访问的部署流程。

部署全流程

Step 1 · 把本地项目发布到Github
  1. 我们打开Github，点击「+」，选择「New repository」图片展示了GitHub的Dashboard界面。左侧有“Top repositories”区域，可搜索仓库。右侧中部是“Home”区域，有“Ask anything”和“Add repositories, files, and spaces”等操作选项。右侧右侧栏有“New issue”“New repository”“Import repository”等选项，其中“New repository”被红色框突出显示。该图片对应文档中“Step 1·把本地项目发布到Github”步骤里，用于指导用户在GitHub创建新仓库的操作位置。
  2. 我们在创建项目的页面，输入名称。点击「Create repository」图片展示的是在Github创建仓库的页面。页面上方有“General”和“Configuration”两个部分。在“General”部分，有“Repository name”输入框，提示“cybercat404 is available”，并有“Description”输入框。在“Configuration”部分，有“Choose visibility”下拉菜单，当前选中“Public”，还有“Add README”“Add .gitignore”“Add license”选项，以及“Create repository”绿色按钮。图片与上文“我们在创建项目的页面，输入名称。点击‘Create repository’”的内容对应，展示了点击“Create repository”按钮前的页面状态。
  3. 项目创建完成后，我们能看到底部有几行命令。我们点击Copy按钮，把命令复制一下。图片展示的是在GitHub上操作的界面。画面中突出显示了“...or push an existing repository from the command line”部分，其中包含三条命令：git remote add origin https://github.com/Sin10874/cybercat404.git、git branch -M main、git push -u origin main。这些命令用于将本地仓库推送到GitHub。该图片与文档中“Step 2：Github项目关联Vercel”步骤相关，是让Trae帮我们做好Vercel部署准备后，再次部署到Github时在命令行操作的参考示例。
  4. 我们打开Trae，打开之前开发的项目
  5. 让Trae帮我们发布到Github👇
帮我发布到github

Github提供的command
xxxxxxxxxxx（xxx代表：Github提供的命令）

图片展示了在IDE中发布项目到GitHub的操作界面。左侧是IDE界面，显示了“game.js”和“index.html”文件。中间是网页预览，标题为“小猫跑酷”，提示按空格键开始游戏。右侧是TRAE界面，有用户信息及“帮我就发布到github”字样，下方有“Github命令”内容。该图片对应文档中“Step 1·把本地项目发布到Github”步骤，直观呈现了发布前的IDE及TRAE界面情况。

  1. Trae帮我们发布到Github后，我们打开Github看看实际情况
  2. OK。项目已经发布到Github的项目中

图片展示的是一个名为“cybercat404”的GitHub项目页面。页面左侧有Code、Issues、Pull requests等导航栏，右侧显示了项目代码，包括“game.js”和“index.html”两个文件，均为初始提交，时间是6分钟前。页面右上角有“Pin”“Watch”“Fork”“Star”等操作按钮。右下角有“About”“Activity”“Releases”“Packages”“Languages”等板块，其中“About”板块提示无描述、网站或主题提供。该图片与文档中“Step 1·把本地项目发布到Github”内容相关，展示了已发布到GitHub项目的页面情况。

Step 2：Github项目关联Vercel
  1. 我们让Trae帮我们做好Vercel部署的准备
我的项目想通过Vercel部署，还缺少什么东西？

图片展示了在浏览器中打开的本地项目页面，左侧是项目文件夹，右侧是游戏界面，显示得分186。右上角有“选择部署环境”选项。右侧聊天窗口中，Trae询问“我的项目是否通过Vercel部署，还缺少什么东西？”，下方显示“现在我们先创建一个详细的README.md文件，提供项目说明和Vercel部署指南”。该图片与文档中“Step 2：Github项目关联Vercel”部分相关，用于说明在Vercel部署前的准备情况。

  1. Trae为我们添加Vercel部署需要的代码后，我们让Trae再次部署到Github。
  2. 接下来，我们打开Vercel
  3. 注意 1. 大家一定要使用Github账号登录Vercel
  4. 进入Vercel，点击「Add New」，选择「Project」图片展示的是Vercel平台的界面。界面上方有“Overview”等导航栏，右侧有“Add New...”下拉菜单，其中“Project”选项被红色框突出显示。下方是“Usage”板块，显示了过去30天的CPU、缓存读取等数据。还有“Projects”板块，展示了多个项目缩略图。该图片对应文档中“Step 2：Github项目关联Vercel”步骤里，打开Vercel后，点击“Add New”选择“Project”的操作说明，直观呈现了操作后的界面情况。
  5. 我们可以看到，可以选择Github上已有的项目进行管理部署。点击对应项目的「Import」，进入部署页面，点击「Deploy」，就会自动开始部署图片展示的是Vercel平台的项目导入页面。左侧“Import Git Repository”区域显示了cybercat404仓库，标注了“10m ago”时间，下方有“Import”按钮。右侧“Clone Template”区域展示了多种模板，如“Next.js Boilerplate”“AI Chatbot”等，每个模板都有图片和简要介绍。该图片与文档中部署上线流程的第3步相关，对应步骤3.2，说明在Vercel平台添加新项目时，可选择已有项目进行管理部署，此图展示了选择已有项目后的界面情况。图片展示的是Vercel平台添加新项目界面。上方显示从GitHub导入的项目路径为“/cybercat404” 。中间部分有“Vercel Team”和“Project Name”输入框，当前“Project Name”为“cybercat404”。下方有“Framework Preset”下拉框，当前选中“Other”，“Root Directory”输入框显示“./”。界面底部有“Build and Output Settings”和“Environment Variables”选项，最下方是突出显示的“Deploy”按钮，箭头指向该按钮。此图与文档中部署流程中添加新项目并点击“Deploy”进行部署的内容相关。
  6. 部署成功，我们可以通过「Visit」访问网站看看实际效果图片展示的是Vercel平台的部署页面。页面上方有导航栏，显示“cybercat404”项目。页面中部是“Production Deployment”区域，显示部署状态为“Created”，源代码为“main”，并有“Visit”按钮，箭头指向该按钮。下方有“Deployment Settings”和“Observability”等板块。该图片与文档中部署上线流程的上下文相关，对应Step 5，说明部署成功后可通过“Visit”按钮访问网站查看实际效果。
Step 3：上线项目
  1. 接下来，我们把准备好的域名与Vercel的项目进行绑定
  2. 进入Vercel - 对应的项目 - Settings；进入“Domains”页面，点击「Add Domain」开始添加域名图片展示了Vercel平台中cybercat404项目的“Settings”页面。页面上方有导航栏，其中“Settings”标签被红色框突出显示。页面中部是“Production Deployment”区域，显示了部署信息，如部署名称、域名、状态等。下方有“Deployment Settings”和“4 Recommendations”选项。该图片与上下文紧密相关，上下文在介绍将准备好的域名与Vercel项目绑定的操作流程，此图对应操作步骤中“进入Vercel - 对应的项目 - Settings”的环节，直观呈现了进入设置页面的界面情况。图片展示了Vercel平台中cybercat404项目的Settings页面，其中“Domains”选项被红色框线突出显示。页面右上角有“Add Domain”按钮，用于添加域名。下方显示已绑定的域名“cybercat404.vercel.app”，状态为“Production”。该图片与上下文紧密相关，对应文档中“Step 3：上线项目”里“1.1.进入Vercel - 对应的项目 - Settings；进入“Domains”页面，点击「Add Domain」开始添加域名”步骤，直观呈现了操作前的页面状态及关键操作位置。
  3. 添加域名，点击「Save」图片展示的是Vercel项目中“Add Domain”页面。页面提示可添加域名以连接到项目，连接后域名将关联到最近的部署。搜索框内已输入“cybercat404.space”，下方有“Redirect cybercat404.space to www.cybercat404.space (Recommended)”选项，以及“Connect to an environment”和“Redirect to Another Domain”两个连接方式选项，当前选中“Production”环境。底部有“Cancel”和“Save”按钮。该图片与文档中“部署上线”流程中“把准备好的域名与Vercel的项目进行绑定”步骤相关，是添加域名操作的展示。
  4. 我们可以看到域名设置中增加了两个域名，我们分别点击这两个域名的「Learn more」 1. 能看到两条DNS的配置项

图片展示了Vercel项目Settings - Domains页面中域名cybercat404.space和www.cybercat404.space的DNS记录配置情况。页面上方有“Invalid Configuration”提示，下方分别列出A和CNAME类型的DNS记录，其中A记录Type为A，Name为@，Value为216.198.79.1；CNAME记录Type为CNAME，Name为www，Value为0a5cf9e0c1cc4a99.vercel-dns-017.com。该图片与上下文紧密相关，是对上文提到的域名设置中增加域名后，点击“Learn more”查看DNS配置项的直观呈现。

  1. 接下来，我们回到域名购买的网站 1. 我们进入域名管理页面（Domain Management），点击对应域名的「Details」

图片展示的是域名购买网站的域名管理页面。页面中显示了cybercat404.space和www.cybercat404.space两个域名的相关信息，如注册创建日期、联系人信息、SSL状态等。其中，DNS RECORDS区域用红色箭头突出显示，表明已设置4条DNS记录，与上下文提到的在购买域名网站中添加DNS记录后，需回到Vercel项目Settings - Domains进行操作相呼应，直观呈现了操作前的页面状态。

1. 在Details页面，我们点击DNS Record的编辑按钮

图片展示的是Vercel项目Settings - Domains页面中添加域名DNS记录的界面。上方提示可在此配置自定义DNS记录。Type下拉框选中A - Address record，Host输入框内显示.cybercat404.space，Value输入框显示216.198.79.1，TTL输入框为600。界面右下角有Cancel和Add按钮。该图片与上下文紧密相关，是上文提到的在域名购买网站添加DNS记录后，回到Vercel项目Settings - Domains中配置DNS记录操作的展示。

  1. 接下来，我们配置域名的DNS记录 1. 以我们的演示项目为例
    1. 域名：cybercat404.space
  1. 信息
  2. Type：A
  3. Name：@ 1. Name对应域名购买页面中的'Host'
  4. Value：216.198.79.1
  5. 全部复制填入后，点击「Save」

图片展示的是Vercel项目Settings - Domains页面中“Manage DNS Records”界面。界面中Type下拉框选中“A - Address record”，Host输入框内为“@.cybercat404.space”，Answer / Value输入框内是“216.198.79.1”，TTL输入框为“600”。界面右下角有“Cancel”和“Add”按钮，箭头指向“Add”按钮。该图片与上下文关系紧密，是配置域名DNS记录操作步骤中，将配置好的DNS记录信息填入并点击“Add”按钮的展示。

  2. 域名：www.cybercat404.space
  1. 信息
  2. Type：CNAME
  3. Name：www
  4. Value：0a5cf9e0c1cc4a99.vercel-dns-017.com.

图片展示了Vercel项目Settings - Domains页面中添加域名DNS记录的界面。上方提示可在此配置自定义DNS记录。Type下拉框选中CNAME - Canonical name record，Host输入框内为www.cybercat404.space，Answer / Value输入框内是0a5cf9e0c1cc4a99.vercel-dns-017.com，TTL输入框为600。界面右下角有Cancel和Add按钮。该图片与上下文紧密相关，是配置域名DNS记录操作步骤中的一个关键展示，用于指导用户在Vercel端进行DNS记录配置。

2. 在购买域名的网站中添加了DNS记录后，我们回到Vercel - 项目 - Settings - Domains 中。我们尝试刷新一下域名的状态
  1. 点击「Refresh」![图片展示的是Vercel平台中cybercat404.space项目的Domains设置页面。页面显示了cybercat404.space和www.cybercat404.space两个域名的DNS记录信息，其中www.cybercat404.space的DNS记录状态为“Invalid Configuration”。页面右侧有“Refresh”按钮，用于刷新域名状态。该图片与上下文紧密相关，上下文提到在域名购买网站添加DNS记录后，需回到Vercel项目Settings - Domains页面，点击“Refresh”按钮刷新域名状态，以验证绑定是否成功。](https://ai798-zopc-content.oss-cn-beijing.aliyuncs.com/kb-assets/lab/KOCydxMq8olzZXx756xcS60Rnie/AAYwbx0j1oO5g8xhOnjc3m9RnPg.png)
  2. 变为这种状态，我们就绑定成功了！![图片展示的是Vercel项目设置中“Domains”页面。页面左侧有导航栏，选中“Domains”。右侧显示域名列表，其中“cybercat404.space”和“www.cybercat404.space”状态为“Valid Configuration”，且“Production”标识为蓝色，表明已成功绑定。下方还有“cybercat404.vercel.app”域名，状态同样为“Valid Configuration”。页面右上角有“Add Domain”按钮。该图片与文档中“部署上线”流程中“上线项目”步骤相关，用于展示域名绑定成功后的状态。](https://ai798-zopc-content.oss-cn-beijing.aliyuncs.com/kb-assets/lab/KOCydxMq8olzZXx756xcS60Rnie/GTu4bF1RUoDI1zxbdiAcBCO6nch.png)
Step 4：提交Google收录
  1. 这是关键一步
  2. 让Google成功收录后，谷歌才会在用户的搜索结果中展示你的网站。你的网站才能开始在搜索引擎获取流量
  3. 我们访问Google Console（即Google的收录后台）
  4. 登陆后，如果没有任何项目，会出现配置域名的弹窗 1. 输入域名，点击下一步

图片展示的是Google Search Console的登录界面。界面上方有Google Search Console的标志。中间弹窗显示“欢迎使用Google Search Console，要开始使用，请先选择资源类型”，并有“网址域”和“网址前缀”两个选项。其中“网址域”选项被红色框线突出显示，下方输入框内显示域名“cybercat404.space”，下方有“继续”按钮，该按钮也被红色箭头指向。此图对应文档中部署上线步骤里，登陆Google Search Console后，若无项目出现配置域名弹窗时的操作说明。

  1. 我们看到Google给的提示，让我们去增加DNS记录图片展示的是Google Search Console中通过DNS记录验证域名所有权的界面。界面提示选择记录类型为TXT（推荐），登录域名提供商网站，将TXT记录复制到DNS配置中，按指示验证。下方有“无法通过域名提供商进行验证？”的提示，可尝试其他验证方法。底部有“移除资源”“稍后验证”“验证”按钮。该图片与文档中“提交Google收录”步骤相关，对应步骤2.4，即记录增加后返回Google Console点击“验证”这一步骤。
  2. 我们回到购买域名的网站，按照Google给的信息，增加DNS记录图片展示的是Google Console中配置自定义DNS记录的界面。上方提示可在此配置域名的自定义DNS记录。Type下拉框选中“TXT - Text record”，Host栏留空，Answer / Value栏显示google-site-verification=cAd47PpYqxw3eHQ3c1qFz3dclcUS_5yye3tdBhfrjRoRg，TTL为600，Priority栏为空，Notes栏提示仅供个人使用且不影响DNS。界面右下角有Cancel和Add按钮。该图与文档中“增加DNS记录”步骤相关，用于指导用户在购买域名网站按Google给出的信息增加DNS记录。
  3. 记录增加后，我们返回Google Console，点击「验证」图片展示的是Google Search Console中通过DNS记录验证域名所有权的界面。界面中提示选择记录类型为TXT（推荐），并登录域名提供商网站，将TXT记录复制到DNS配置中。下方有“复制”按钮，以及“稍后验证”和“验证”按钮。还有一条灰色提示框，说明无法通过域名提供商进行验证，若想使用其他验证方法可尝试改为选择网址前缀资源。该图片与文档中“Step 4：提交Google收录”流程中“记录增加后，返回Google Console，点击‘验证’”的步骤对应，用于指导用户进行验证操作。
  4. 验证成功，我们前往项目的页面图片展示的是Google Search Console的欢迎界面。界面上方显示“欢迎使用Google Search Console”，并提示“要开始使用，请先选择资源类型”。下方有一个绿色的“已完成所有权验证”区域，显示验证方法为域名提供商，还有一条建议保持已成功验证状态的提示。右下角有“前往资源页面”按钮。该图片与文档中“提交Google收录”步骤相关，对应步骤2.6.1，即进入编制索引 - 网页后，需检查网站是否被收录成功，此图展示了完成所有权验证后的界面。
  5. 然后我们检查一下，网站有没有被收录成功 1. 进入编制索引 - 网页。输入域名，点击Enter查询图片展示的是Google Search Console的网页索引编制页面。页面左上角显示“cybercat404.space”域名，左侧有多个功能选项。中间搜索框内输入了“cybercat404 space”。下方提示“正在处理数据，请过1天左右再来看”。底部有“网页未被编入索引的原因”板块，列出原因、来源、验证、组织、网页等信息。该图片对应文档中“Step 4：提交Google收录”步骤里，检查网站是否被收录成功的操作，用于展示查询结果页面。 2. 收录成功，则会出现这样的结果图片展示的是Google Search Console中网址检查页面。页面显示网址“https://cybercat404.space/”已收到Google收录，网页已编入索引，且采用HTTPS协议。页面左侧有多个导航选项，当前选中“网址检查”。右侧上方有“网址已收到到Google”及“网页已编入索引”等提示信息，下方有“查看被抓取的网页”“更改了网页？”“请求编入索引”等操作选项。该图片与文档中提交Google收录后检查网站是否被收录成功的内容对应，直观呈现了成功收录后的页面状态。