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/cn/github-action-angular/ 部分信息可能已经过时
相关文章 智能推荐
1
基于Angular的动画展示网站+登录注册（cognito）
FRONTEND 该项目是基于Angular的Web应用，用于展示和搜索Bangumi上的动画，使用Cognito进行用户认证。项目包含自动部署到GitHub Pages的功能，使用GitHub Actions进行自动化构建和部署。主要技术栈包括Angular 16、TypeScript、HTML和CSS，项目结构清晰，包含用户登录、注册、搜索和动画日历等功能。
2
博客迁移-Mizuki配置记录
infra 从notionNext迁移到mizuki的过程记录，主要原因是notionNext的限制。选择mizuki是因为其轻量级和良好的功能平衡，支持日记和项目展示。配置过程简单，内容通过md和ts文件控制，同时实现了与bangumi API的连接。计划通过CI同步notion内容，并进行多语言适配，解决了图片链接过期的问题。
3
github上传大文件
infra 要在GitHub上上传大文件，需要安装Git Large File Storage（LFS），并在本地Git仓库中进行配置。具体步骤包括安装LFS、配置跟踪大文件的指针，并通过相应的命令上传文件。完成这些步骤后，即可成功上传大文件至GitHub。
4
svn使用
infra svn是一种集中式文件管理工具，支持细粒度的文件安全管理。使用前需建立仓库，推荐使用图形化客户端如tortoiseSVN。常用命令包括checkout、commit、update、add、delete、log、diff、revert和ignore，此外还涉及分支管理和帮助命令。具体命令用法详尽列出，适合用户快速上手。
5
docker初识
infra Docker是一种解决微服务部署问题的技术，通过将应用及其依赖打包到隔离的容器中，避免了环境不一致和依赖冲突。Docker与虚拟机的主要区别在于性能和资源占用，Docker启动速度快且占用空间小。Docker架构包括镜像和容器，用户可以通过DockerHub共享和获取镜像。基本操作包括镜像和容器的创建、管理以及数据卷的使用，以实现数据的持久化和容器与宿主机的解耦。Docker Compose可以简化分布式应用的部署过程。