一个简单的网站部署方案 • Axi's Blog

前言#

我搭建过很多的网页，想必众读者也十分好奇这类型的网页是如何搭建起来的，所以我可能会进行一系列的博客，来记录一下搭建网页的方法，这一期作为一个最基础的内容，来讲解一下假如说你已经有了一个网页，应该如何部署。

众所周知，常见的一个网页包括了前端以及后端的两部分，而因为本博客的众多读者是深度学习领域的，因此可能对于前后端的语言有所陌生，比如说前端使用的 HTML/CSS/JS 以及后端使用的 Python/C++/Java 等等。假如说没有了解过相关的技术栈，可能会觉得部署一个网页是十分复杂的事情，以及搭建一个效果看上去十分炫酷的网页更是难上加难，但是事实并非如此。

基础知识#

在正式讲解部署方案之前，我们先梳理一下现代网页开发与构建的基本知识，帮助大家理解后续提到的术语和工具到底指什么。

现代前端框架与“三件套”#

如今，越来越多的网站使用如 Vue.js、React.js、Astro 等现代前端框架进行开发。它们提供了更加模块化、工程化的开发体验，可以让开发者以组件的方式构建复杂页面。

虽然你在开发时写的是 .vue、.jsx、.astro 等文件，但这些框架最终会通过构建工具（如 Vite、Webpack、Rollup 等）将你的代码转换为浏览器可以识别的三种核心文件：

HTML：网页的结构骨架
CSS：网页的样式与视觉表现
JavaScript：网页的交互与逻辑

这个构建过程就像“翻译”一样，把开发者写的高层代码翻译成浏览器能“听懂”的语言。

静态网页的概念#

上面提到的 HTML/CSS/JS 产物，构成了一个 静态网页（Static Website）。静态网页的最大特点是：

内容在构建时就已固定，不依赖数据库；
用户访问时直接下载 HTML/CSS/JS 文件，没有动态生成逻辑；
容易缓存、加载速度快，适合 CDN 分发；
部署简单，只要能放文件的地方就能部署。

常见的诸如 Github Pages 或者 Vercel 等平台，都是支持部署静态网页的，因此我们只需要将网页的构建产物上传到这些平台，就可以实现网页的部署。

为什么选择静态网页？#

对于初学者，或者只是想展示一些内容（比如作品集、博客、说明文档等），静态网页是一种非常合适的选择。它具有：

零服务器维护成本
非常低的部署门槛
良好的性能和安全性
适合 CI/CD 自动化部署

静态网页就不需要数据库了吗？#

很多人在刚接触网页开发时，常常会问一个问题：

“我的网站里要展示用户资料 / 留言板 / 相册 / 排行榜……是不是就一定得有数据库和后端？”

其实不一定。

我们可以从内容是否频繁变化这个角度来判断：

内容类型	是否需要数据库	举例
基本不变的内容	否	博客文章、图片展示、介绍页面
偶尔变化、可静态更新的内容	否	活动信息、资料下载、成员列表
需要频繁交互和写入的内容	是	评论系统、用户登录、表单提交、个性化推荐

静态网页可以借助“构建时写死内容”的方式，把很多本来看似需要后端和数据库的内容提前生成好。例如：

一个成员列表页面，可以写个 JSON 文件，构建时加载；
一个排行榜页面，可以定期（比如每日）构建一次，展示最新数据；
一个留言板可以通过集成 GitHub Issue / LeanCloud 等“无服务器方案”间接实现。

当然，我们在后续也会逐一介绍这些技术方案。

只有在你需要用户发起请求并实时修改内容时，才真正需要考虑后端逻辑，比如：

登录验证、表单处理；
数据写入、数据库读写；
个性化响应。

这也是为什么很多静态站点可以“看上去很动态”，实际上却完全没有后端——只要设计得当，静态网页+外部服务就能覆盖绝大多数展示类场景。

Vercel#

在了解了静态网页的基础之后，接下来我们进入正题：如何部署一个网页项目。

很多人第一时间会想到使用 GitHub Pages ↗，因为它免费、简单、集成在 GitHub 上。但是一旦真正使用过，就会发现：

GitHub Pages 的一些限制#

需要自己写构建流程（Workflow） GitHub Pages 仅支持部署 public 目录或特定分支（如 gh-pages），这意味着你使用 Vue、React、Astro 等框架时，必须自己配置一个 GitHub Actions 的 workflow 来执行 npm run build 再把构建产物推送到目标分支。除非框架内置了专门的发布命令，否则手动配置不可避免。
域名挂载较为繁琐 如果你想为 GitHub Pages 设置自定义域名，有两个选择：
- 在仓库根目录的 public/ 文件夹里加一个 CNAME 文件；
- 或者在 GitHub 的仓库设置页中配置域名。
问题在于：第二种方法在你每次重新构建或覆盖 public/ 目录时，GitHub 会重置你的域名配置，除非你把 CNAME 文件固定写在构建产物中。