这两年 Vibe Coding 越来越火。

很多以前完全没写过代码的人，现在通过 ChatGPT、Claude、Cursor、Codex 等工具，几句话就能做出一个网页。

比如你可能对 AI 说：

帮我做一个个人主页，要有头像、个人介绍、项目展示和联系方式。

过一会儿，AI 就给你生成了一堆代码：

HTML
<!DOCTYPE html>
<html>
<head>
  <title>我的个人主页</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

或者直接给你一个：

Text
index.html

你双击它。

浏览器打开了。

页面也确实显示出来了。

于是新的问题来了：

怎么把这个网页发给别人看？

总不能把 index.html 文件通过微信发给别人，让别人下载之后再打开吧？

这篇文章就专门解决这个问题。

如果你完全不懂服务器、不懂域名、不懂部署，也没关系。

看完之后，你至少会知道：

  • HTML 文件到底是什么
  • 为什么自己电脑能打开，别人却访问不了
  • 什么叫“网页上线”
  • 怎么生成一个真正可以访问的网址
  • 怎么免费把网页放到网上
  • GitHub Pages 是什么
  • Vercel 是什么
  • 域名又是干什么的

一、先搞明白：你现在得到的 HTML 到底是什么？

假设 AI 给你生成了这样一个文件：

Text
index.html

你双击之后，Chrome 打开了：

Text
file:///C:/Users/Levi/Desktop/index.html

页面看起来完全正常。

但注意地址栏。

它不是：

Text
https://xxx.com

而是：

Text
file:///

这意味着：

浏览器读取的是你自己电脑里的文件。

这个页面并没有真正放到互联网。

换句话说，现在的情况是：

Text
你的电脑
   │
   ├── index.html
   │
   └── Chrome
        │
        ▼
      你自己能看

别人电脑里面没有这个文件，所以别人当然访问不了。

二、那怎样才能让别人访问？

其实原理非常简单。

你需要把 HTML 文件放到一台：

别人也可以访问到的电脑上。

这台电脑通常就是我们常说的：

Text
服务器

可以简单理解成：

Text
你自己的电脑
index.html
      │
      │ 上传
      ▼
互联网服务器
index.html
      │
      │
      ├───────────────┐
      ▼               ▼
   你的电脑          朋友的手机
      ▼               ▼
   可以访问          也可以访问

所以所谓：

把网页上线

本质上就是：

把网页文件放到互联网上的一台服务器，然后获得一个网址。

就这么简单。

很多教程一上来就是：

Text
Nginx
Linux
SSH
Docker
DNS
CDN
CI/CD

新手看到这里基本已经关掉网页了。

实际上，如果你只是想把 AI 做出来的小网页放到网上，根本不用一开始学这些。

现在已经有很多平台帮你把这些东西都做好了。

三、最重要的文件：index.html

如果你让 AI 做的是普通网页，通常会看到这样的结构：

Text
my-website/
├── index.html
├── style.css
├── script.js
└── images/
    └── avatar.png

其中最重要的是：

Text
index.html

它通常就是网站首页。

浏览器访问一个网站时，例如：

Text
https://example.com

服务器通常会自动寻找：

Text
index.html

所以新手做网页时，我建议目录尽量简单一点。

例如：

Text
my-page/
├── index.html
├── style.css
├── script.js
└── images/

不要让 AI 一开始就给你生成非常复杂的工程。

如果你的需求只是：

  • 个人主页
  • 产品介绍页
  • 活动页
  • 简历网站
  • 导航页
  • 小工具
  • 作品展示

普通 HTML + CSS + JavaScript 已经可以做很多东西。

四、方法一：GitHub Pages

如果你已经听说过 GitHub，我比较推荐你顺便学一下 GitHub Pages。

因为它：

  • 免费
  • 比较稳定
  • 不需要自己买服务器
  • 支持 HTTPS
  • 可以绑定自己的域名
  • 非常适合静态网页

什么叫静态网页？

简单理解就是：

Text
HTML
CSS
JavaScript
图片

这种网页。

如果你的网站需要数据库、登录、Node.js 后端，那就是另外一个话题了。

第一步：注册 GitHub

打开 GitHub：

Text
https://github.com

注册一个账号。

注册完成之后，点击：

Text
New repository

创建一个仓库。

例如名字叫：

Text
my-homepage

仓库可以选择：

Text
Public

然后创建。

五、把 HTML 上传到 GitHub

进入刚才创建的仓库。

把你的文件上传进去。

最终应该类似：

Text
my-homepage
├── index.html
├── style.css
├── script.js
└── images

这里有一个非常重要的地方：

index.html 最好放在仓库最外层。

不要变成：

Text
my-homepage
└── website
    └── index.html

对于第一次操作的新手，保持简单最好。

六、开启 GitHub Pages

进入仓库之后找到：

Text
Settings

然后找到：

Text
Pages

在部署来源里面选择你的代码分支。

一般就是：

Text
main

保存。

过一会儿 GitHub 就会生成一个网址。

通常类似：

Text
https://你的GitHub用户名.github.io/my-homepage/

例如：

Text
https://levi.github.io/my-homepage/

现在把这个链接发给朋友。

他就可以直接打开了。

到这里，你已经完成了一次真正意义上的：

网站部署。

而且你甚至没有买服务器。

七、为什么我更推荐新手用 Vercel？

GitHub Pages 很适合纯 HTML。

但如果以后开始接触：

Text
Vue
React
Nuxt
Next.js
Vite

我会更推荐了解一下：

Text
Vercel

它的体验对于新手来说非常友好。

整个过程大概就是：

Text
GitHub代码
   │
   ▼
Vercel
   │
   ▼
自动构建
   │
   ▼
生成网址

例如：

Text
https://my-homepage.vercel.app

以后你修改代码，只需要：

Text
git push

Vercel 就会自动重新部署。

八、完全不懂 Git，可以怎么办？

其实也不用害怕。

你甚至可以让 AI 教你。

比如直接问：

Text
我现在有一个 index.html，
我完全不会 Git，
请一步一步教我上传到 GitHub，
每次只告诉我一步。

这种提问方式其实非常适合小白。

不要一上来问：

Text
怎么部署网站？

AI 很可能一下子给你：

Text
Git
GitHub
Vercel
Nginx
Docker
DNS
Cloudflare

看完反而更乱。

你应该把问题拆小。

例如：

Text
第一步怎么创建 GitHub 仓库？

完成之后再问：

Text
怎么把 index.html 上传进去？

然后：

Text
怎么打开 GitHub Pages？

一步一步来。

九、方法二：Vercel

假设你已经把代码上传到 GitHub。

例如：

Text
github.com/xxx/my-homepage

接下来进入 Vercel。

使用 GitHub 登录。

然后选择：

Text
Add New Project

选择刚刚的：

Text
my-homepage

导入。

如果只是普通 HTML 页面，一般不需要改什么复杂配置。

点击部署。

完成后会得到一个：

Text
xxx.vercel.app

的网址。

例如：

Text
my-homepage.vercel.app

这时候：

Text
https://my-homepage.vercel.app

就是一个真正的互联网网址。

你可以直接：

  • 发微信
  • 发朋友圈
  • 放简历
  • 发给客户
  • 做产品 Demo

别人点开就可以访问。

十、方法三：Cloudflare Pages

除了 GitHub Pages 和 Vercel，还有一个非常不错的平台：

Text
Cloudflare Pages

它和 Vercel 的思路其实差不多：

Text
代码
 ↓
GitHub
 ↓
Cloudflare Pages
 ↓
自动部署
 ↓
获得网址

如果只是刚开始学，我建议不要同时研究十个平台。

记住这三个就已经足够：

平台 更适合什么
GitHub Pages 简单 HTML 页面
Vercel HTML、Vue、React、Next、Nuxt
Cloudflare Pages 静态网站、前端项目

第一次的话：

GitHub Pages 或 Vercel 任选一个。

十一、那 Netlify 又是什么？

你可能还会经常看到：

Text
Netlify

它也是类似的平台。

你会发现现在前端网页部署其实有很多选择：

Text
GitHub Pages
Vercel
Netlify
Cloudflare Pages

它们虽然功能不完全一样，但对于一个刚开始做网页的人来说，可以先简单理解成：

帮你免费把前端网页放到网上的平台。

不用纠结哪个最好。

先成功上线一个网站，比研究半天哪个平台更专业重要得多。

十二、那“域名”是什么？

假设 Vercel 给你生成了：

Text
https://my-cool-page.vercel.app

这已经可以正常访问了。

但是以后你可能觉得：

Text
vercel.app

不够像自己的网站。

于是你可以买一个域名。

例如：

Text
xiaoming.com

然后把它绑定到 Vercel。

以后访问：

Text
https://xiaoming.com

实际上访问的还是你刚才部署的网站。

所以可以简单理解：

Text
网页文件
   ↓
服务器
   ↓
Vercel
   ↓
域名
   ↓
xiaoming.com

域名就像网站的：

门牌号。

服务器则更像：

房子。

你的 HTML 文件，就是：

房子里面的东西。

十三、必须买域名吗？

不是。

第一次做网站，完全没必要买。

比如：

Text
xxx.github.io

或者：

Text
xxx.vercel.app

已经足够用了。

等以后真的想长期维护这个网站，再买域名也不迟。

十四、必须买服务器吗？

也不是。

这是很多新手最容易误解的地方。

你可能听别人说：

做网站要买服务器。

其实要看你做什么网站。

如果只是：

Text
HTML
CSS
JavaScript
Vue
React

这种纯前端页面，很多情况下：

Text
GitHub Pages
Vercel
Cloudflare Pages
Netlify

就够了。

甚至可以一直免费用。

真正需要考虑购买服务器，通常是你开始做：

  • Node.js 后端
  • Java 后端
  • PHP
  • Python
  • MySQL
  • Redis
  • 文件上传
  • 用户系统
  • 数据库
  • 自建 API

这些东西的时候。

所以不要一开始就折腾服务器。

十五、我只收到了一段 HTML 代码，没有文件怎么办？

这个问题也非常常见。

AI 可能直接给你：

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

你不知道该怎么办。

很简单。

打开：

Text
记事本

或者：

Text
VS Code

新建文件。

把代码复制进去。

然后保存为：

Text
index.html

注意。

不要保存成：

Text
index.html.txt

一定是：

Text
index.html

然后双击这个文件。

浏览器就可以打开。

十六、推荐安装 VS Code

如果你准备继续玩 Vibe Coding，我还是建议安装一个代码编辑器。

最常见的是：

Text
Visual Studio Code

简称：

Text
VS Code

以后你的目录可能就是：

Text
my-homepage
├── index.html
├── style.css
├── script.js
└── images

直接用 VS Code 打开这个文件夹。

修改起来会比记事本方便很多。

十七、图片为什么到了线上不显示？

这是新手上线网页之后最常遇到的问题之一。

本地：

Text
正常

上传之后：

Text
图片全部裂了

通常是路径问题。

比如你的目录：

Text
website/
├── index.html
└── images/
    └── cat.png

HTML 里面应该写：

HTML
<img src="./images/cat.png">

不要写你电脑上的地址：

HTML
<img src="C:\Users\Levi\Desktop\cat.png">

因为：

Text
C:\Users\...

只存在于你自己的电脑。

别人电脑没有这个文件。

十八、为什么 CSS 上线之后失效？

同样检查路径。

假设：

Text
website/
├── index.html
├── style.css
└── script.js

HTML：

HTML
<link rel="stylesheet" href="./style.css">

JavaScript：

HTML
<script src="./script.js"></script>

尽量使用这种相对路径。

十九、文件名大小写也要注意

例如文件实际叫：

Text
Avatar.png

代码写的是：

HTML
<img src="./avatar.png">

你在 Windows 上测试的时候可能发现：

Text
居然还能显示。

但上传到服务器后可能直接失效。

因为很多服务器系统会严格区分：

Text
Avatar.png

和：

Text
avatar.png

这是两个文件。

所以建议统一使用：

Text
小写英文

例如：

Text
avatar.png
background.jpg
logo.svg

尽量不要使用：

Text
头像图片最终版2.png

虽然有时候也能用，但以后很容易给自己找麻烦。

二十、文件名尽量不要有空格

不推荐：

Text
my photo.png

推荐：

Text
my-photo.png

或者：

Text
my_photo.png

网站项目里面，我个人更习惯：

Text
my-photo.png

看起来也比较清楚。

二十一、AI 做的网站一定可以直接上线吗？

不一定。

这是现在 Vibe Coding 非常容易踩的坑。

AI 给你的代码“看起来完整”，不代表一定可以直接部署。

例如 AI 可能引用了：

Text
本地图片

可能依赖：

Text
某个不存在的 API

也可能写：

JavaScript
fetch('http://localhost:3000/api/user')

这里的：

Text
localhost

意思其实是：

当前这台电脑。

你本地运行的时候可能正常。

上传到网站以后：

Text
localhost

就完全不是你想象中的那个地址了。

所以一定要分清楚：

Text
页面能打开

和：

Text
网站真的完整可用

这是两回事。

二十二、什么是 localhost？

以后你一定会经常看到：

Text
localhost

例如：

Text
http://localhost:3000

它可以简单理解为：

我的电脑。

也就是说：

Text
localhost:3000

其实是在访问你当前电脑上的某个程序。

所以朋友打开：

Text
localhost:3000

访问的不是你的电脑。

而是：

他自己的电脑。

这也是为什么开发环境的网址不能直接发给别人。

二十三、什么叫“部署”？

现在应该比较容易理解了。

所谓：

Text
部署

并不是什么特别神秘的事情。

可以简单理解为：

Text
把项目放到服务器
+
让服务器运行
+
让互联网可以访问

纯 HTML 项目尤其简单：

Text
上传文件
→
获得网址
→
完成

Vue、React、Nuxt 这些项目会多一步：

Text
构建

例如：

Text
npm run build

但核心逻辑其实还是一样。

二十四、Vibe Coding 小白建议先学哪几个东西？

如果你完全不会代码，但是现在经常让 AI 帮你开发，我建议先把下面几个概念弄明白。

不用深入学习。

先知道它们是什么就够了。

HTML

网页的结构。

例如：

Text
标题
按钮
图片
表格
输入框

CSS

网页长什么样。

例如：

Text
颜色
间距
字体
圆角
动画
布局

JavaScript

网页怎么动。

例如：

Text
点击按钮
弹窗
切换页面
请求数据

Git

记录代码变化的工具。

GitHub

放代码的网站。

Vercel

把代码变成网站的平台。

域名

网站的网址。

例如：

Text
google.com
github.com

服务器

一直开着，并且可以让别人访问的电脑。

先理解这些，已经能解决绝大部分最基础的问题。

二十五、一个最简单的 Vibe Coding 流程

如果今天让我推荐一个完全不懂代码的人开始 Vibe Coding，我会建议这样做：

Text
第一步
让 AI 生成网页

↓

第二步
在自己电脑运行

↓

第三步
确认网页没问题

↓

第四步
上传 GitHub

↓

第五步
Vercel 部署

↓

第六步
获得公网网址

↓

第七步
分享给别人

以后熟悉之后，再慢慢研究：

Text
域名
DNS
服务器
数据库
后端
Docker
Nginx
CI/CD

千万不要反过来。

二十六、举一个真实一点的例子

假设你想做：

Text
我的个人主页

你让 AI 生成：

Text
index.html
style.css
script.js

首先本地测试：

Text
双击 index.html

确认页面正常。

然后创建 GitHub 仓库：

Text
my-homepage

上传：

Text
index.html
style.css
script.js
images/

接下来连接 Vercel。

部署。

得到：

Text
https://my-homepage.vercel.app

然后你就可以把它发给朋友：

Text
这是我刚做的个人主页：
https://my-homepage.vercel.app

整个流程就结束了。

二十七、以后修改网站怎么办？

这也是 GitHub + Vercel 比较方便的地方。

假设你修改了：

Text
index.html

重新提交到 GitHub。

Vercel 检测到代码发生变化之后，会自动：

Text
拉取最新代码
↓
重新部署
↓
更新网站

网址不会改变。

还是：

Text
https://my-homepage.vercel.app

这就是所谓的：

Text
自动部署

也是现在开发网站非常常见的一种工作方式。

二十八、网站上线后，电脑关机还能访问吗？

可以。

这是新手经常问的问题。

因为网站已经放在：

Text
GitHub Pages

或者：

Text
Vercel

的服务器上。

不是运行在你的电脑。

所以：

Text
你关电脑
↓
朋友访问网站
↓
仍然正常

如果某个教程要求：

Text
npm run dev

然后告诉你打开：

Text
localhost:3000

那只是开发环境。

电脑一关，当然就没了。

二十九、手机可以访问吗？

当然可以。

只要你最终获得的是：

Text
https://xxxxx

这样的公网地址。

电脑、手机、平板都可以访问。

但这里还有一个问题：

手机能打开，不代表手机显示一定好看。

网页还需要做：

Text
响应式布局

也就是让它同时适配：

Text
电脑
平板
手机

你在让 AI 写网页的时候，可以直接加一句：

Text
页面需要做好响应式适配，
保证电脑端和手机端都能正常显示。

一般效果会好很多。

三十、最后说一点

AI 确实把写代码这件事的门槛降低了很多。

以前想做一个网页，你可能需要先学：

Text
HTML
CSS
JavaScript

学很久之后，才敢真正开始做东西。

现在完全可以反过来。

先让 AI 帮你把东西做出来。

遇到问题，再去理解问题。

比如今天你可能只学会了一件事：

Text
怎么把 HTML 放到网上。

下次可能又遇到：

Text
为什么图片不显示？

再过几天可能遇到：

Text
怎么绑定自己的域名？

然后：

Text
怎么保存用户提交的数据？

慢慢地，你就会开始接触：

Text
前端
后端
数据库
服务器
部署

不用试图一天把这些东西全部学完。

尤其是在 AI 时代，会不会把所有代码背下来已经没有那么重要了。

但有一件事依然很重要：

你至少要知道自己正在做什么。

AI 可以帮你写：

Text
index.html

但你最好知道：

Text
index.html 是什么。

AI 可以帮你部署 Vercel。

但你最好知道：

Text
部署是什么意思。

AI 可以帮你连接 GitHub。

但你最好知道：

Text
GitHub 为什么会出现在这个流程里。

当这些最基础的概念慢慢串起来之后，你会发现：

所谓“做一个网站”，其实没有一开始想象得那么神秘。

如果你现在手里正好有一份 AI 生成的 HTML。

那就从：

Text
index.html
→ GitHub
→ Vercel
→ 一个真正可以访问的网址

开始吧。

先让自己的第一个网页真正上线。

比继续收藏十篇教程有用得多。

阅读进度 0%