Deploy to Github Pages

Author: jojozhuang

.github/workflows/main_github_pages.yml

@@ -0,0 +1,31 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Angular app
+        run: npm run build:pages
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: dist/browser

README.md

@@ -25,6 +25,7 @@ Three available demos:
 * `Live Demo on Netlify:` <a href="https://text-compare.netlify.app/" target="\_blank">https://text-compare.netlify.app/</a>
 * `Live Demo on Render:` <a href="https://text-compare.onrender.com/" target="\_blank">https://text-compare.onrender.com/</a>
 * `Live Demo on Azure:` <a href="https://text-compare.azurewebsites.net/" target="\_blank">https://text-compare.azurewebsites.net/</a>
+* `Live Demo on GitHub Page:` <a href="https://bit-developer.github.io/text-compare-angular/" target="\_blank">https://bit-developer.github.io/text-compare-angular/</a>
 
 *Note: The demo websites may be slow when you access them for the first time. Be patient!*
 

angular.json

@@ -99,6 +99,25 @@
                 }
               ]
             },
+            "pages": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.pages.ts"
+                }
+              ]
+            },
             "nas": {
               "budgets": [
                 {
@@ -156,6 +175,9 @@
             "render": {
               "buildTarget": "text-compare-angular:build:render"
             },
+            "pages": {
+              "buildTarget": "text-compare-angular:build:pages"
+            },
             "nas": {
               "buildTarget": "text-compare-angular:build:nas"
             },

package.json

@@ -9,12 +9,17 @@
   "scripts": {
     "start": "ng serve",
     "start:prod": "ng serve --configuration production",
+    "start:azure": "ng serve --configuration azure",
+    "start:netlify": "ng serve --configuration netlify",
+    "start:render": "ng serve --configuration render",
+    "start:pages": "ng serve --configuration pages",
     "start:nas": "ng serve --configuration nas",
     "start:mock": "node server.js",
     "build": "ng build --configuration production",
     "build:azure": "ng build --configuration azure",
     "build:netlify": "ng build --configuration netlify",
     "build:render": "ng build --configuration render",
+    "build:pages": "ng build --configuration pages --base-href 'https://bit-developer.github.io/text-compare-angular/'",
     "build:nas": "ng build --configuration nas",
     "build:cross:env": "rimraf dist compiled && cross-env SOURCE_MAP=0 ng build --configuration production",
     "test": "ng test",

src/environments/environment.pages.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  env_name: 'GitHub Pages'
+};