Day 21 - Deploy the Github Profile Project to Github Pages

#angular #svelte #vue #webdev

On day 21, I will deploy all the demos to Github Page, because Github Page is free and can be automated by Github Actions.

When an Angular application does not contain sensitive environment variables such as secret keys, ng deploy is more convenient than Github Actions. When it has sensitive environment variables, I can only build the Angular application with the secret keys in Github Actions.

Github Actions to Github Pages

Vue 3 application

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  base: '/vue-github-profile/',
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Build the application

In vite.config.ts, add a new base property to the object of the defineConfig function. In local environment, the URL is http://localhost:4173/vue-github-profile/. Otherwise, the URL is https://railsstudent.github.io/vue-github-profile/.

Open a terminal and run npm run build to build the application in dist/. Then, run npm run preview to preview and test the application at http://localhost:4173/vue-github-profile.

Deploy to Github Pages by Github Actions

Create a .github/workflows/main.yml to run the necessary commands to build the files and deploy to Github Pages

The application has a VITE_GITHUB_TOKEN environment variable, it must be provided during the build step.

Next, use the touch command to create an empty .nojekyll file.

Copy the index.html to 404.html. When users accesses a non-existent resource, 404.html is rendered on browser.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch:  # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment: 
      name: github-pages   # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        env:
          VITE_GITHUB_TOKEN: ${{ secrets.VITE_GITHUB_TOKEN }}
        run: npm run build # or your build command

      - name: Add .nojekyll file
        run: touch dist/.nojekyll

      - name: Add 404.html file
        run: cp dist/index.html dist/404.html

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Commit the yaml file to the main branch to automate the deployment process.

It should fail because secrets.VITE_GITHUB_TOKEN has not been created yet.

Navigate to https://github.com/<repo uers>/<repo name>/settings/environment, verify github-pages environment is created. Click the environment name and verify the deployment branches and tags. Verify main is added and only this branch can deploy to Github Pages.

In Environment secrets, click the Add environment secret button to add the VITE_GITHUB_TOKEN variable.

Make changes to the code, commit the changed files to create a new job to start the redeployment.

Navigate to https://github.com/<repo uers>/<repo name>/settings/pages, choose Github Action as the source of Build and deployment.

Click the live site to verify it is up and running.

SvelteKit application

Install new dev dependencies

npm i --sav-exact --save-dev @sveltejs/adapter-static

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://svelte.dev/docs/kit/integrations
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
         adapter: adapter({
            fallback: '404.html'
        }),
        paths: {
            base: '/svelte-github-profile'
        }
    }
};

export default config;

Modify svelte.config.ts to import the adapter from @sveltejs/adapter-static.

Update adapter and add paths to the kit property.

kit: { 
    adapter: adapter({
        fallback: '404.html'
    }),
    paths: {
        base: '/svelte-github-profile'
    }
}

Deploy to Github Pages by Github Actions

Create a .github/workflows/main.yml to run the necessary commands to build the files and deploy to Github Pages

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch:  # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment: 
      name: github-pages   # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        env:
          VITE_GITHUB_TOKEN: ${{ secrets.VITE_GITHUB_TOKEN }}
        run: npm run build # or your build command

      - name: Add .nojekyll file
        run: touch build/.nojekyll

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

The main.yml is similar except Svelte creates 404.html automatically. Moreover, Svelte compiled and copied the JavaScript files to the build folder.

Commit the yaml file to the main branch to automate the deployment process.

Verify the same settings on the repository. The live site should run successfully.

Angular 20 application

I use Github Actions instead of ng deploy because ng deploy accepts a configuration only. However, I cannot add the Github personal access token to angular.json and commit the file to a Github public repository.

Update the angular.json configuration

"outputPath": {
  "base": "dist",
  "browser": ""
}

Add outputPath under architect -> build -> options, so that npm run build compiles the JavaScript file to dist/.

Deploy to Github Pages by Github Actions

Create a .github/workflows/main.yml to run the necessary commands to build the files and deploy to Github Pages.

"scripts": {
    "ng": "ng",
    "build": "ng build",
}

In package.json, the npm run build script calls ng build to build the Angular application. These option flags are specified:

define - replaces the SECRET_GITHUB_TOKEN environment variable with secrets.SECRET_GITHUB_TOKEN
base-href - set the base url of the deployed application. The base url is https://railsstudent.github.io/angular-github-profile/ in this example.

Next, use the touch command to create an empty .nojekyll file.

Copy the index.html to 404.html. When users accesses a non-existent resource, 404.html is rendered on browser.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch:  # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment: 
      name: github-pages   # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        run: npm run build -- --define SECRET_GITHUB_TOKEN=\'${{ secrets.SECRET_GITHUB_TOKEN }}\' --base-href=https://railsstudent.github.io/angular-github-profile/  # or your build command

      - name: Add .nojekyll file
        run: touch dist/.nojekyll

      - name: Add 404.html file
        run: cp dist/index.html dist/404.html

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4