83 字
1 分钟
github action自动部署angular页面
angular.json
projects > {your-project-name} > architect > build > options > outputPath
如果默认生成静态网页在browser下，记得修改/添加属性
"baseHref": "/browser/",安装angular-cli-ghpages
ng add angular-cli-ghpages.github/workflows下创建工作流
name: Deploy to GitHub Pages
on: push: branches: - master # 或者你要监控的分支名称
jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3
- name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '20' # 请根据项目需求修改 Node.js 版本
- name: Install dependencies run: npm install
- name: Build project run: npm run build
- name: Deploy to GitHub Pages uses: JamesIves/github-pages-deploy-action@v4 with: folder: dist/my-angular-project/browser # 请根据实际输出路径填写 token: ${{ secrets.TOKEN }}
env: GITHUB_TOKEN: ${{ secrets.TOKEN }}记得在github中生成token用于访问repo，并在action的环境变量中添加。
https://github.com/${your_name}/${your_repo}/settings/secrets/actions
推送到监控的分支
修改github page配置，设置page分支为gh-pages
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
github action自动部署angular页面
https://dreaife.tokyo/github-action-angular/ 部分信息可能已经过时
相关文章 智能推荐
1
基于Angular的动画展示网站+登录注册（cognito）
开荒 使用 Angular 16 与 AWS Cognito 构建 Bangumi 动画展示网站，涵盖登录注册、动画搜索与日历，并通过 GitHub Actions 自动部署到 GitHub Pages。
2
博客迁移-Mizuki配置记录
开荒 从 NotionNext 迁移到 Astro 博客 Mizuki 的配置记录，涵盖内容结构、Bangumi 接入、自托管 CI 的 Notion 同步、R2 图片持久化与 LLM 多语言生成。
3
svn使用
研习 SVN 入门指南：理解集中式版本控制与仓库结构，掌握 checkout、update、commit、diff、revert、ignore、分支管理及 TortoiseSVN 基础用法。
4
docker初识
研习 Docker 入门指南：理解容器与虚拟机的差异，掌握镜像、容器、Docker Hub、数据卷和 Docker Compose 的基础操作与部署流程。
5
ubuntu安装ohMyZsh及其组件
踩坑 在 Ubuntu 安装并配置 Oh My Zsh，涵盖 Zsh、Git、Powerlevel10k、常用插件与 .zshrc 设置，完成主题和命令行增强环境。