从零拥有个人网站①｜网页做好了，怎么让别人打开？

现在各类 Agent 的存在，让我们做一个个人网站方便了很多

但是做好之后，怎么让别人打开？

这里又会冒出来一堆东西，GitHub、Vercel、Cloudflare、域名、DNS，看着头都大了

所以这篇就用你奶奶都能看懂的大白话给大家把上线的全部流程梳理一遍

（虽然这些操作基本都可以交给 Agent，但我觉得还是得了解整个流程。至少出了问题，你知道大概是哪里出了问题，不至于一直让它改，然后自己也不知道它在改什么。）

如果你已经用 AI 做好了网页，但还没上线，我相信这是一篇非常好上手的入门教学。还没开始做的，也可以看看，会对后面的流程有个大概的框架

整篇文章分为四部分，已经了解的可以直接跳过：

先看懂整个流程，分清这些东西是干什么的，再选平台
用 GitHub + Vercel 上线一次
买域名、做解析，换成自己的网址（自由选择）
以后怎么更新，以及要花哪些钱

一、先看懂流程，再选平台

我先给大家解释一下上线一个网站需要的各种名词，直接看图

这个比喻只是帮助理解，具体到操作的话是下面这几个环节

1. 本地项目：你和 Agent 正在改的东西

Agent 帮你做出来的网站，通常就是电脑里的一个项目文件夹。里面有代码、图片，还有一些配置文件

你改文字、换图片、调布局，改的都是这里面的东西

本地预览的时候，一般会得到一个带 localhost 的地址。这个地址访问的是本机，你自己能看到，别人拿过去访问的是他自己的设备，看不到你电脑里的页面

所以网页做好以后，还需要找个地方把它发布出去

2. GitHub：帮你保存代码和修改记录

GitHub 可以先理解成项目的资料库

如果沿用刚才房子的比喻，这里存的是图纸、材料文件，以及每次改动的记录

你把项目传上去，一方面方便保存和管理，另一方面，后面的部署平台可以从这里读取代码

但注意，把代码传到 GitHub 仓库，不代表网站已经上线了。到这一步，你只是把项目放上去了

3. 托管平台：把网站发布出来，让别人访问

接下来，就需要用到网站托管服务

它会根据项目情况，把代码构建成可以发布的内容，再通过网络提供给访客。对于简单的个人网站，不需要去租什么服务器、从头配置运行环境

前面说的 Vercel，就是可以帮你做这件事的平台

Cloudflare 也提供网站部署服务，比如 Workers 和 Pages。不过 Cloudflare 的业务不只有部署，它也提供 DNS 等服务。所以你会发现，有的教程让你去 Cloudflare 部署网站，有的是让你去那里配置域名解析

这两种用法只是使用的服务不同

还有 GitHub Pages，它是 GitHub 提供的静态网站托管服务。虽然名字都带 GitHub，但“把代码放进仓库”和“用 Pages 发布网站”是两件不同的事

所以，Vercel 或 Cloudflare 的网站托管服务，随你选择（具体推荐在后面

4. 域名：别人用什么地址找到你

网站部署成功以后，托管平台通常会给你一个默认网址

这个网址直接可以拿去分享，所有不是一定要买域名，网站才能上线

只有当你想用自己的名字或者ip，比如我自己的

ansyn.me

，才需要去购买独立域名

这里也分清楚：买域名买的是这个名字的使用权，网站内容还是由托管服务提供。不是买完域名你就能用这个域名打开你的个人网站了

5. DNS：让这个域名找到你的网站

域名买好之后，还需要告诉它，你的网站对应哪个服务

这个过程就会用到 DNS 解析

你可以把 DNS 理解成一个查地址的系统：别人输入域名后，通过它找到对应的服务，再加载网站

具体怎么填，后面带着大家实操。现在先知道，买域名、托管网站、管理 DNS 是不同的事情。有的平台能同时提供几项服务，也可以分别交给不同平台

连起来一张图搞定

以大众好用的方案为例：

你和 Agent 在电脑上修改网站 ↓ 把代码上传到 GitHub ↓ Vercel 读取代码、构建并发布 ↓ 先用默认网址访问 ↓ 想换自己的网址，再绑定域名、配置 DNS

以后更新，也是从本地修改开始，再推送代码，让平台发布新版本

GitHub 并不是所有部署方式都必须用，有的平台也支持直接上传构建好的文件。很多人使用它是为了保存修改记录，并且更新也方便

那到底选哪个平台？

不懂的话直接问ai

这篇我会用 GitHub + Vercel 带大家跑一遍：代码放在 GitHub，由 Vercel 负责构建和发布，后面更新也是同样的流程

你选其他平台也可以，只是接下来的操作界面和配置会有不同

二、先跟着上线一次

准备好 GitHub 和 Vercel 账号，没有的话，先创一个GitHub，然后Vercel可以直接用GitHub账号登录

1. 先让 Agent 检查项目

账号准备好之后，别急着上传。把下面这段发给正在帮你做网站的 Agent，让它看看项目能不能正常部署：

我准备把当前网站部署到 Vercel，请先检查项目：使用的是什么框架？能否静态部署？如果需要后端，具体是哪项功能需要？项目根目录、构建命令和输出目录分别是什么？哪些可以让 Vercel 自动识别？需要哪些环境变量？只列名称和用途，不要输出真实密钥。有没有把密钥写进前端代码，或者放进准备上传的文件？如果项目有构建命令，请运行一次，检查能不能通过。最后告诉我，在 Vercel 导入项目时，各项配置应该怎么填。先检查，不要直接部署。

（这里解释一下“构建”，你和 Agent 修改的是开发时的项目文件，部署时，工具通常需要把这些文件处理成适合发布的内容。这个过程就是构建，英文叫 Build，有些简单网站只有几个 HTML 文件，可以直接发布，不一定需要这一步。让 Agent 根据你的项目检查就行，本地预览能打开，不代表构建一定能通过。所以先在这里检查一下，后面就不用折腾了）

2. 创建一个 GitHub 仓库

名字自己起，比如 my-site

想公开源码就选 Public，不想公开就选 Private。这里选的是代码要不要公开，不是网站允不允许别人访问

如果电脑里已经有完整项目，就先创建一个空仓库，不用勾选自动添加 README、.gitignore 等文件

创建完，复制仓库地址，接下来就直接交给 Agent

3. 让 Agent 帮你上传代码

把下面这段发给它：

请把当前网站项目上传到这个 GitHub 仓库： [粘贴仓库地址] 先检查 Git 状态、当前分支和远程仓库配置。如果已经有提交记录，请保留；如果目标地址与现有远程仓库不一致，先告诉我，不要直接覆盖。检查准备提交的文件，排除： node_modules 等依赖目录缓存和不需要提交的构建产物含真实密钥的 .env 文件凭据和个人隐私文件只包含占位值的 .env.example 可以保留。如果敏感文件已经被跟踪或提交，请先指出来，暂停上传。告诉我这次准备提交哪些内容，确认后再提交并推送。不要强制推送。如果需要登录或授权，告诉我具体操作。完成后告诉我上传到了哪个仓库、哪个分支。

按提示完成授权，上传之后，自己刷新一下 GitHub，看看项目文件有没有出现

PS：密钥如果已经泄露，光删文件不够，还需要去对应平台撤销或者更换。不要觉得现在仓库里看不到了就没事了

4. 在 Vercel 导入项目

进入 Vercel，新建项目，找到刚才的 GitHub 仓库，选择导入

如果找不到，先检查一下 Vercel 有没有获得这个仓库的访问权限

接下来会看到一些配置，名字可能是英文，对照第一步 Agent 给你的结果看就行：

Framework Preset：项目使用的框架
Root Directory：网站项目所在的目录
Build Command：构建命令
Output Directory：构建完成后输出文件的位置
Environment Variables：项目需要的环境变量

平台已经识别正确的地方，保留默认就行

不确定怎么填，就把这个页面截图给 Agent，让它结合项目检查。截图里不要带真实密钥

还有，环境变量填在后台，不代表一定保密。如果最后被打包进浏览器代码里，访客仍然能看到。私密密钥不能这样放在前端使用

确认完，点击部署

5. 看看部署有没有成功

接下来平台会读取代码、安装依赖，再构建和发布网站

成功了就继续往下来。如果失败了的话打开构建日志，也就是 Build Logs，找到最早出现的错误，然后把它和前后内容一起发给 Agent

可以这样问：

Vercel 部署失败了，请结合当前项目和下面的日志检查原因。 [粘贴最早出现的错误及前后内容，先删除密钥和隐私信息] 请说明是哪一步出了问题，需要修改哪些文件或平台配置，以及修改后怎么验证。如果需要修改代码，先在本地验证，通过后再告诉我需要提交哪些改动。

如果修改了代码，记得重新提交并推送。只在电脑里改好，Vercel 读取的还是 GitHub 上的旧版本

6. 拿到网址，自己再试一下

部署成功后，平台会给你一个类似

xxx.vercel.app

的网址

先用未登录的浏览器打开，再用手机流量试一下。确保首页、内页、图片和链接等都能看到

并且别人也能正常打开，你的网站就算完成第一次上线了

三、买域名、做解析，换成自己的网址

这一部分自由选择，平台给的默认网址完全够用

想换成自己想要的域名再去买

我觉得第一次买，自己喜欢、好记、续费价格能接受就ok

尤其注意续费价，别只看第一年的促销价

账号也要自己掌握，邮箱、找回方式和续费提醒都检查一下

1. 先在 Vercel 添加域名

买好之后，进入项目的域名设置，添加你购买的域名

比如

ansyn.me

如果也想让别人通过

www.ansyn.me

访问，可以一起添加，再按平台设置选一个作为主要地址，让另一个跳转过去

添加之后，Vercel 会提示你需要配置哪些 DNS 记录

先看它要求什么，再去解析后台填写

2. 找到真正管理 DNS 的后台

这里容易搞混：域名在哪里买，DNS 不一定就在哪里管理

如果你没有改过名称服务器，一般先去购买域名的平台查看。如果已经把 DNS 交给 Cloudflare 管理，就需要去 Cloudflare 操作

不清楚的就把域名的名称服务器设置截图给 Agent，让它帮你确认

3. 按提示填写解析记录

后台一般会让你填记录类型、主机记录和记录值。对照 Vercel 给出的要求，一项项填进去就行

不确定的话，可以这样问Agent

我正在给 Vercel 上的网站绑定域名，请帮我核对 DNS 配置。当前 DNS 服务商： [填写] Vercel 要求添加的记录： [粘贴或截图] 我现在已有的记录： [粘贴相关记录或截图，隐藏无关隐私信息] 请告诉我哪些需要添加、修改，哪些应该保留。不要直接删除其他服务的记录，也不要把需要等待生效的情况误判成配置错误。