国内静态网站部署实操：把你的页面挂到公网

国内静态网站部署实操：帽子云 + 艾可秀，把你的页面挂到公网

写一个静态页面很简单，难的是怎么把它「挂出去」，让电脑、手机打开链接就能看到。本文记录两条真实可用的国内部署路径——帽子云与艾可秀，分别覆盖纯 HTML 页面和 vite/vue 构建产物两种形态，全程截图与 GIF 演示，照着做就行。

附两个示例项目的 Gitee 开源地址（可供学习使用）。

一、示例项目与源码

两个项目的线上效果见下文各平台对应小节。

二、帽子云（maozi.io）

2.1 部署纯 HTML

部署前先保证仓库根目录有index.html（服务端默认入口文件）。以下为完整操作过程截图：

部署完成后即可访问：

• 蜘蛛侠观影复习手册：蜘蛛侠观影复习手册 · 从内战到英雄无归

2.2 部署 vite/vue 构建好的前端项目

分两种方式：

方式一：上传 dist 部署包（推荐用于本地已构建项目）

本地执行npm run build构建，产物在dist/目录，将整个部署包上传：

方式二：不上传 dist 部署包（直接在平台侧构建）

两种方式最终效果一致，可访问：

神秘喵星人博客：神秘喵星人博客 · 记录 · 分享 · 成长

三、艾可秀（AxureShow）

3.1 部署纯 HTML

第一步：创建项目

进入「项目管理」，点击「上传新项目」：

第二步：上传 index.html

上传index.html文件——文件名必须是index.html，否则会报错：

第三步：上传成功

上传成功，项目列表即出现该项目，可直接点击打开：

第四步：访问成功

3.2 部署 vite/vue 构建好的前端项目

本地打包好 vite/vue 构建的项目，生成dist部署包后直接上传，方式和上传 HTML 完全一致：

效果预览：

• 蜘蛛侠观影复习手册：spider

• 个人博客：博客

四、部署效果演示

两个项目的最终页面效果，GIF 实录：

五、小结

两条路线均为国内平台，访问速度对国内用户相对友好，适合纯静态页面、个人博客、前端小工具等场景。完整源码与配置放在 Gitee，供学习使用。有更好的部署方案，欢迎交流。