如何在 GitHub Pages 上部署你的 Angular 网站
Source: Dev.to
Angular 与 GitHub Pages
幸运的是，部署 Angular Web 应用到 GitHub Pages 有一种或多或少“官方”的方法。虽然它是第三方脚本，angular-cli-ghpages （GitHub repo）已被正式认可为最佳且推荐的做法。它对我立刻就起作用了，所以我直接使用了它。
我通常更倾向于使用内置方案，以免依赖外部库，但在这种情况下我破例了。这也是因为我计划以后进一步转向 Flutter，而该脚本已经涵盖了我所有需要的功能（包括自定义域名支持）。
我不得不更改发布策略——从仅使用 GitHub Actions 的流程改为使用 gh-pages 分支，同时仍保留 GitHub Actions。理想情况下，我本可以把所有内容保持在同一分支上以避免混淆，但目前 gh-pages 分支运行良好。
什么，什么不，以及他妈的到底是啥
我选择 Angular 有三个原因：
- 我在工作中也在使用它。
- 我发现了一些有趣的项目，将它与 Rust 通过 WebAssembly 结合。
- 它可以轻松集成到 Antigravity 中。
这并不是因为 Angular 是“最佳”框架；我仍然认为应该根据具体需求来选择框架。
如果要根据当前需求来挑选框架，我会选 React + Next.js，我相信我也能找到使用它们的方法。对于个人作品集，任何现代框架都可以胜任。
我曾多年不使用框架来构建站点。我个人网站最长久的结构是 WordPress。它仍然存在，但还有人会把它用于这个目的吗？说实话，我希望不会——不是因为它是个坏产品，而是因为 它的时代已经过去，尽管 PHP 正在有一点复苏。
将 Angular 部署到 GitHub Pages
有两种方式可以添加部署步骤：
- 手动 安装
angular-cli-ghpages包。 - 通过 Angular CLI，它还会在
angular.json中添加一个deploy条目。
我选择了后者。运行：
ng add angular-cli-ghpages假设：你已经全局安装了 Angular CLI。
接下来，更新你的发布设置（将 GitHub‑Pages 源更改为 gh-pages 分支）。在 angular.json 中添加以下 deploy 配置：
{
"deploy": {
"builder": "angular-cli-ghpages:deploy",
"options": {
"name": "John Doe",
"email": "john.doe@foo.bar",
"cname": "foo.bar"
}
}
}将 name、email 和 cname 替换为你自己的 GitHub 凭据和自定义域名（如果使用自定义域名，则需要 cname 键）。
运行 ng deploy 现在会将构建好的站点推送到 gh-pages 分支（如果不存在会自动创建）。接下来我们使用 GitHub Actions 来自动化此过程。
Source: …
使用 GitHub Actions 自动部署
如果没有特殊需求，唯一需要额外完成的步骤是从 Developer Settings 中创建一个 经典个人访问令牌（PAT），并勾选 repo 和 user 权限范围。将该令牌保存为仓库的 secret，名称为 GH_TOKEN。
创建工作流文件（例如 .github/workflows/deploy.yml），内容如下：
name: Deploy to GitHub Pages
on:
push:
branches: ['main']
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: '24.x'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
run: npm run deploy
env:
CI: true
GH_TOKEN: ${{ secrets.GH_TOKEN }}- 如果你已经熟悉 GitHub Actions，这一步应该很直观。
- 最后三个命令（
npm install、npm run build、npm run deploy）可以合并为一行，因为angular-cli-ghpages会自动检测 Angular 配置——只需确保使用的是较新版本的框架，以免出现问题。
注意事项
- 生成令牌 – 从个人设置页面创建一个新的 PAT，并将其存储为仓库的 secret（
GH_TOKEN）。你可以随意命名该 secret，只需相应地调整secrets.GH_TOKEN引用即可。 - 工作流文件位置 – 文件必须放在仓库根目录的
.github/workflows文件夹中，并使用.yml（或.yaml）扩展名。我的文件名为deploy.yml，但文件名并不重要。 gh-pages分支 – 我不喜欢维护单独的gh-pages分支；这感觉像是老旧的做法。不过当前的第三方包需要它，所以暂时我会保留它。希望能尽快找到更简洁的方案。
就这样！你的 Angular 站点现在应该会在每次推送到 main 时自动构建并部署到 GitHub Pages。
它就能正常工作，这就是我想要的。