这是一个使用 GitHub 和 Cloudflare 进行 Vue 站点部署的记录。这一过程中完全免费，不需要自备服务器或域名，甚至可以将一切操作都使用浏览器在云端完成。
这不是一个 step-by-step 的教程。这篇文章会记录整个操作过程，但是不会详细到把每一步的具体操作（点哪个按钮？）都写出来。如果你想要按照同样的方法进行操作，请发挥一些主观能动性。
这篇文章会记录一些不太容易发现和搜到解决方法的坑。
开始以前
你需要准备的
- GitHub 账号和 Cloudflare 账号。本文不会教你注册。
- Visual Studio Code（可选）。与 GitHub 无缝对接，不过也可以直接在线使用网页版。
你不需要准备的
- GitHub Enterprise 之类的任何付费服务。完全免费！
- Node.js、npm 等工具。虽然我们会用到这些工具，但是云服务器会自动为你配置好。等着喂饭就行了。
GitHub：从 Codespace 到仓库
如果你在本地已经有了一个 Vue 站点或者其他类似框架的应用，那么将它上传到 GitHub 的仓库里就可以了。但是如果你要从头开始创建——你不需要自己在本地配置环境和创建新仓库。
你可以使用 GitHub Codespace 从云端构建。
在 GitHub 上创建一个空仓库，作为你的项目仓库。然后在仓库的 Code 选项中创建一个 Codespace。这会自动为你分配一个云服务器，其中包含你的项目仓库。在默认情况下，这会在浏览器里启动一个在线的 Visual Studio Code 编辑器。你也可以设置从本地的 Visual Studio Code 启动。
接下来，你可以直接在这个云服务器里创建和修改项目并直接 push 到仓库里。
按照 Vue 文档中的方法创建项目。打开终端，在根目录中使用命令：
npm create vue@latest下载和安装 Vue 脚手架工具。就像前面说过的，你完全不需要自行安装 npm 和 Node.js，因为 Codespace 提供的服务器里会预制这些工具。
接下来，Vue 项目会开始创建。在这里会遇到第一个问题：创建项目的目录是什么？
? Project name: › vue-project在这里输入的 Project name 会作为目录名存放 Vue 所需的文件。你可以输入 . 作为“目录名称”，这样就可以直接在仓库根目录下创建项目。这样在使用命令进行构建时会稍微方便一些。
不过，这样会导致创建的目录被清空。所以，如果有什么 License 或者 Readme 文档需要放在仓库中，请创建项目后再添加。
如果你可以接受多敲一行命令，你也可以按照正常的创建流程，正经命名一个新目录来创建项目。这样的话，在创建完成之后，你需要切换到项目文件夹来进行操作：
cd your-project-name接下来使用 npm 安装依赖。完成这一步，你的 Vue 应用就已经部署好了。
npm install安装完成以后，你只要使用 npm run dev 就可以运行你的 Vue 应用服务了。服务器会开放在 5173 端口，而 Visual Studio Code 会自动将远程服务器上的本地端口转发到你本地的端口上。也就是说，你可以保持与 Codespace 连接，然后直接在本地访问 http://localhost:5173/ 来预览你的项目。事实上，Visual Studio Code 会直接弹出选项引导你在浏览器中访问这个地址。
对网站的具体设计在此略去。假设你已经制作完成了你的 Vue 网页应用，你可以直接在 Visual Studio Code 左侧的 Git 功能菜单里进行操作，并提交到 GitHub 仓库。这不需要任何命令行操作，而且还比 GitHub Desktop 用起来方便多了。
（但是，push 时记得填写摘要。这个 Git 功能不会像 GitHub Desktop 那样提醒或自动生成摘要。）
Cloudflare：从仓库到 Pages
当你准备好将你的 Vue 应用公开发布时，你可以使用 Cloudflare Pages。
在 Cloudflare 仪表板中找到 Workers & Pages 页面，然后创建一个应用程序，并在接下来的 Pages 选项中选择连接到 Git。这需要授权你的 GitHub 账号，然后选择库。
在接下来的 “设置构建和部署” 页面中，进行构建设置。好消息是，在 “框架预设” 中就有 Vue 的预设，你可以直接选择。这会自动填充这样的内容：
- 构建命令：
npm run build - 构建输出内容：/
dist
注意，不要直接点击部署了！如果你在上面创建项目时，是在新目录中创建项目（而不是在根目录 . 中），你应该填写下面的根目录路径为你的应用目录：
- 路径：/
your-project-name
如果你是在根目录中创建了项目，那么此处应该留空。
最后有一项环境变量。如果你需要指定特定的 Node.js 版本，你可以在这里设置。例如，指定安装 Node.js 的 18.16.1 版本：
| 变量名称 | 值 |
|---|---|
NODE_VERSION |
18.16.1 |
部署以后，Cloudflare Pages 会自动跟踪仓库的最新版本。也就是说，你在 Codespace 中每次同步仓库的新版本时，最新修改都会立刻发布到你部署的站点中。
另外，你的每次自动部署都会被保存在 Pages 的仪表板设置里，你可以随时回滚到旧版本。