60 words
1 minute
Automatically Deploy Angular Pages with GitHub Actions
angular.json
projects > {your-project-name} > architect > build > options > outputPath
If the default static webpage is generated under the browser, remember to modify/add the property
"baseHref": "/browser/",Install angular-cli-ghpages
ng add angular-cli-ghpagesCreate a workflow in .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 }}Remember to generate a token on GitHub to access the repo, and add it to the action’s environment variables.
https://github.com/${your_name}/${your_repo}/settings/secrets/actions
Push to the monitored branch
Modify the GitHub Pages configuration, and set the Pages branch to gh-pages
Share
If this article helped you, please share it with others!
Automatically Deploy Angular Pages with GitHub Actions
https://dreaife.tokyo/en/posts/github-action-angular/ Some information may be outdated
Related Posts Smart
1
Angular-based Anime Showcase Website + Login/Registration (Cognito)
FRONTEND This project is an Angular-based web application for displaying and searching anime on Bangumi, with Cognito for user authentication. It supports automatic deployment to GitHub Pages using GitHub Actions for automated build and deployment. The main tech stack includes Angular 16, TypeScript, HTML, and CSS, and the project includes features such as login, registration, search, and an anime calendar.
2
Blog Migration - Mizuki Configuration Records
infra A record of the migration from NotionNext to Mizuki, mainly due to NotionNext's limitations. Mizuki was chosen for its lightweight nature and good balance of features, supporting diaries and project showcases. The configuration process is simple, with content controlled via md and ts files, and it also connects to the Bangumi API. The plan is to synchronize Notion content via CI, implement multilingual support, and address the issue of image links expiring.
3
Uploading Large Files to GitHub
infra To upload large files to GitHub, you need to install Git Large File Storage (LFS) and configure it in the local Git repository. The process includes installing LFS, setting up pointers to track large files, and uploading the files with the corresponding commands. After completing these steps, large files can be uploaded to GitHub successfully.
4
Getting Started with Docker
infra Docker is a technology for solving microservice deployment problems by packaging applications and their dependencies into isolated containers, avoiding inconsistent environments and dependency conflicts. Compared with virtual machines, Docker starts faster and uses fewer resources. Its architecture includes images and containers, and users can share and obtain images through Docker Hub. Basic operations include creating and managing images and containers and using volumes for data persistence and host-container decoupling. Docker Compose can simplify distributed application deployment.
5
Using SVN
infra SVN is a centralized file management/version control tool that supports fine-grained file access management. Before use, a repository must be created, and graphical clients such as TortoiseSVN are recommended. Common commands include checkout, commit, update, add, delete, log, diff, revert, and ignore, and the article also covers branch management and help commands. Detailed command usage is listed to help users get started quickly.