On day 11, I will deploy all the demos to Github Page, because Github Page is free and manual deployment is also easy for me.
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,
plugins: [
base: '/fundamental-vue3/',
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/fundamental-vue3/. Otherwise, the URL is https://railsstudent.github.io/fundamental-vue3/.
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/fundamental-vue3.
- 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)
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.
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.
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 running.
- SvelteKit application
Install new dev dependencies
npm i --save-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: '/fundamental_svelte'
}
}
};
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: '/fundamental_svelte'
})
}
- 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)
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: ./build # 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 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 19 application
Angular provides a schematic to facilitate deployment to Gihub Pages
ng add angular-cli-ghpages
The schematic installs new dev dependencies to the project.
In angular.json, a new deployment builder is specified in the deploy property.
"deploy": {
"builder": "angular-cli-ghpages:deploy"
}
Open a new terminal and run ng deploy to automatically deploy the application to the Github Pages.
Go to https://github.com///settings/pages and click the live site to verify it is running.
We have successfully deployed the shopping cart application to the Github Pages.
Resources
- Vue 3 Deployment: https://dev.to/ishmam_abir/publish-a-vuejs-3vite-project-on-github-pages-2a0b
- Svelte Deployment: https://svelte.dev/docs/kit/adapter-static#GitHub-Pages
- Angular Deployment: https://angular.dev/tools/cli/deployment
Github Repos
- https://github.com/railsstudent/fundamental-vue3
- https://github.com/railsstudent/fundamental-angular
- https://github.com/railsstudent/fundamental-svelte