前言

我们在本地写好一个网页后，通常只能在自己电脑上打开，例如：

C:\Users\xxx\Desktop\index.html

或者通过本地开发服务器访问：

http://localhost:5173
http://127.0.0.1:5500

这些地址只能在自己的电脑上访问，别人是打不开的。
如果想让别人通过一个公网链接访问你的网页，就需要把网页部署到云端。

本文介绍几种常见方法，适合 HTML、CSS、JavaScript 写的静态网页，也适合 Vue、React、Vite 等前端项目打包后的页面。

一、本地网页为什么别人打不开

本地网页常见访问方式有两种。

第一种是直接打开本地文件：

file:///C:/Users/xxx/Desktop/index.html

这种路径只存在于你的电脑上，别人电脑没有这个文件，自然无法访问。

第二种是本地服务：

http://localhost:5173

这里的 localhost 表示“当前这台电脑”。
你电脑上的 localhost 是你的电脑，别人电脑上的 localhost 是别人自己的电脑，所以别人访问不到你的本地项目。

要让别人访问，就必须满足两个条件：

1. 网页文件放在一台公网可访问的服务器或平台上；
2. 平台提供一个公网 URL，例如 https://xxx.com。

二、先判断你的网页属于哪种类型

部署之前，需要先判断网页类型。

1. 普通静态网页

如果你的项目只有这些文件：

index.html
style.css
main.js
images/

这种就是静态网页，可以直接上传到静态托管平台。

2. 前端框架项目

如果你的项目是 Vue、React、Vite、Angular 等，一般会有：

package.json
src/
public/
vite.config.js

这种项目不能直接上传源码给别人访问，需要先打包。

常见打包命令：

npm install
npm run build

打包完成后，通常会生成：

dist/

真正要上传到云端的是 dist 目录里的文件。

三、方案一：使用 GitHub Pages 免费部署静态网页

GitHub Pages 适合个人项目、作品展示、课程作业、前端 Demo。

1. 准备项目文件

假设你的项目目录如下：

my-web/
├── index.html
├── style.css
└── main.js

如果是 Vue、React、Vite 项目，需要先执行：

npm run build

然后把 dist 目录作为最终发布内容。

2. 创建 GitHub 仓库

登录 GitHub 后，新建一个仓库，例如：

my-web-demo

然后把本地项目上传到仓库。

常见命令如下：

git init
git add .
git commit -m "init web project"
git branch -M main
git remote add origin https://github.com/你的用户名/my-web-demo.git
git push -u origin main

3. 开启 GitHub Pages

进入仓库页面：

Settings -> Pages

在 Build and deployment 中选择：

Source: Deploy from a branch
Branch: main
Folder: /root

如果你的网页文件在 docs 目录，也可以选择 /docs。

保存后，等待一会儿，GitHub 会生成访问地址：

https://你的用户名.github.io/my-web-demo/

别人打开这个链接，就可以访问你的网页。

4. GitHub Pages 适合什么场景

适合：

• 个人主页；
• 项目展示；
• 前端练习作品；
• 静态文档；
• 课程作业 Demo。

不适合：

• 需要后端接口的完整系统；
• 需要数据库的系统；
• 需要隐藏源码的商业项目；
• 国内访问速度要求很高的项目。

四、方案二：使用 Gitee Pages 或国内静态托管

如果主要访问者在国内，可以考虑国内平台，例如：

• Gitee Pages；
• Coding Pages；
• 阿里云 OSS 静态网站托管；
• 腾讯云 COS 静态网站托管。

这类平台访问速度通常比 GitHub Pages 更稳定。

基本流程类似：

1. 注册平台账号；
2. 创建代码仓库或对象存储桶；
3. 上传网页文件；
4. 开启静态网站托管；
5. 获取公网访问链接。

如果只是简单展示网页，Gitee Pages 的使用方式比较接近 GitHub Pages。

五、方案三：使用 Vercel 部署前端项目

Vercel 非常适合部署前端项目，尤其是 React、Next.js、Vue、Vite 等项目。

1. 将项目上传到 GitHub

先把代码上传到 GitHub 仓库。

2. 登录 Vercel

进入 Vercel 官网，使用 GitHub 账号登录。

然后选择：

Add New -> Project

导入你的 GitHub 仓库。

3. 配置构建命令

如果是 Vite 项目，一般配置如下：

Build Command: npm run build
Output Directory: dist

如果是 React 项目，可能是：

Build Command: npm run build
Output Directory: build

如果是 Next.js 项目，通常 Vercel 会自动识别。

点击 Deploy 后，等待构建完成，Vercel 会生成一个访问地址：

https://xxx.vercel.app

别人打开该链接即可访问。

六、方案四：使用 Netlify 部署静态网页

Netlify 也很适合部署静态网页。

最简单的方法是拖拽上传。

1. 打包项目

如果是普通 HTML 网页，直接准备好网页文件即可。

如果是前端框架项目，先执行：

npm run build

得到 dist 或 build 目录。

2. 拖拽上传

登录 Netlify 后，找到部署入口，将 dist 或 build 文件夹拖进去。

部署完成后，Netlify 会生成类似下面的地址：

https://xxx.netlify.app

这个方式非常适合快速分享 Demo。

七、方案五：购买云服务器自行部署

如果你的项目不只是静态网页，还包含后端、数据库、登录系统等功能，就需要使用云服务器。

常见云服务器包括：

• 阿里云 ECS；
• 腾讯云 CVM；
• 华为云 ECS；
• AWS EC2；
• Azure VM。

基本流程如下：

1. 购买云服务器；
2. 安装 Web 服务器，例如 Nginx；
3. 将网页文件上传到服务器；
4. 配置 Nginx 指向网页目录；
5. 开放安全组端口；
6. 绑定域名；
7. 配置 HTTPS 证书。

Nginx 简单示例

假设网页文件放在：

/var/www/my-web

Nginx 配置可以写成：

server {
    listen 80;
    server_name example.com;

    root /var/www/my-web;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

然后重启 Nginx：

sudo systemctl restart nginx

如果域名解析和端口都配置正确，就可以通过：

http://example.com

访问网页。

八、如果只是临时给别人看，可以用内网穿透

如果你只是临时想让别人访问本地网页，不想正式部署，也可以使用内网穿透工具。

常见工具包括：

• ngrok；
• cpolar；
• 花生壳；
• frp。

例如本地项目运行在：

http://localhost:5173

使用内网穿透后，工具会生成一个公网地址：

https://xxxx.ngrok-free.app

别人访问这个公网地址时，请求会转发到你电脑上的本地服务。

这种方式适合临时演示，不适合长期正式上线。因为它依赖你的电脑一直开机，而且免费地址可能会变化。

九、不同方案对比

方案	是否免费	适合场景	优点	缺点
GitHub Pages	免费	静态网页、项目展示	简单、稳定、适合开源项目	国内访问可能不稳定
Gitee Pages	部分免费	国内静态网页	国内访问较方便	功能和限制取决于平台政策
Vercel	免费额度	前端框架项目	自动构建、体验好	国内访问可能受网络影响
Netlify	免费额度	静态网页、前端 Demo	拖拽部署方便	国内访问可能受网络影响
云服务器	付费	完整网站、后端服务	自由度最高	需要运维能力
内网穿透	部分免费	临时演示	不需要上传文件	不适合长期上线

十、常见问题

1. 为什么我上传后页面空白

常见原因：

• 没有上传 index.html；
• CSS、JS 路径写错；
• 前端项目没有执行 npm run build；
• Vue 或 React 项目的基础路径配置错误；
• 浏览器控制台有资源 404。

解决方法是打开浏览器开发者工具，查看 Console 和 Network 面板。

2. 为什么本地能打开，部署后图片不显示

通常是图片路径问题。

不推荐写成本地绝对路径：

<img src="C:\Users\xxx\Desktop\a.png">

应该使用相对路径：

<img src="./images/a.png">

并确保 images/a.png 已经一起上传。

3. 为什么别人打开链接显示 404

可能原因：

• 部署还没有完成；
• 访问地址写错；
• 仓库或平台没有开启 Pages；
• 单页应用刷新路径时没有配置回退到 index.html；
• 云服务器安全组没有开放 80 或 443 端口。

4. 是否必须买域名

不是必须。

GitHub Pages、Vercel、Netlify 等平台都会提供免费二级域名。
如果希望地址更专业，例如：

https://www.example.com

再购买自己的域名并绑定即可。

十一、推荐选择

如果你是初学者，只想把 HTML 网页发给别人看，推荐：

GitHub Pages 或 Netlify

如果你是 Vue、React、Vite 项目，推荐：

Vercel 或 Netlify

如果访问者主要在国内，推荐：

Gitee Pages、阿里云 OSS、腾讯云 COS

如果你的网站包含后端接口和数据库，推荐：

云服务器 + Nginx + 域名 + HTTPS

如果只是临时演示，推荐：

内网穿透

总结

本地网页之所以别人打不开，是因为它只存在于自己的电脑上，或者只运行在本机的 localhost。
要让别人访问，就需要把网页部署到公网可访问的平台。

最常见的选择是：

• 静态网页：GitHub Pages、Gitee Pages、Netlify；
• 前端项目：Vercel、Netlify；
• 完整网站：云服务器；
• 临时演示：内网穿透。

实际选择时，可以根据项目复杂度、访问人群、是否需要后端、是否长期上线来决定。对于大多数前端 Demo 来说，使用 GitHub Pages、Vercel 或 Netlify 就已经足够。