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 Pageson:push:branches:- master  # 或者你要监控的分支名称jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v3- name: Setup Node.jsuses: actions/setup-node@v3with:node-version: '20'  # 请根据项目需求修改 Node.js 版本- name: Install dependenciesrun: npm install- name: Build projectrun: npm run build- name: Deploy to GitHub Pagesuses: JamesIves/github-pages-deploy-action@v4with: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