3. Deploy on GitHub Pages

When we deploy the project on GitHub Pages we need to create a gh-pages branch, we don’t need to create this branch manually!

Here are the steps we host the project on GitHub pages.

  1. Set up the base route for generate project, because we want to deploy the project on https://github.com/<USERNAME>/<REPO>. So we need to config our project base route with our REPO name in nuxt.config.js.

 1const routerBase =
 2process.env.DEPLOY_ENV === "GH_PAGES"
 3    ? {
 4        router: {
 5        base: "/<your REPO>/",
 6        },
 7    }
 8    : {};
 9export default {
10    ...routerBase
11}

  1. Set the target and generate in nuxt.config.js

 1export default {
 2    target: "static",
 3    ...routerBase,
 4    generate: {
 5        dir: "build",
 6        routes: [
 7        "/model-heart",
 8        "/attack-healthy",
 9        "/attack-minor",
10        "/attack-severe",
11        "/electricity-healthy",
12        "/electricity-fibrillation",
13        "/failure-healthy",
14        "/failure-compensated",
15        "/failure-decompensated",
16        ],
17    },
18}

  1. Set the package command in package.json

 1{
 2    "scripts": {
 3        "dev": "nuxt",
 4        "build": "nuxt build",
 5        "start": "nuxt start",
 6        "generate": "nuxt generate",
 7        "build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build",
 8        "generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate"
 9    },
10}

  1. Modify the code when finished

1yarn generate:gh-pages
2git add .
3git commit -m "Ready to host on a GitHub pages"
4git push origin main

  1. After you merge your local code to your main branch, we need to generating gh-pages branches

1git subtree push --prefix=build origin gh-pages

  1. Then the project will be automatically host on your GitHub pages. Go settings -> pages to see the link.

  2. Option 2: Deploy the APP in GitHub Pages via GitHub Actions:

    Step 1: same steps by follow above steps from 1 to 4, but don’t need to run yarn generate:gh-pages.

    Step 2: under root folder create a .github/workflows/deploy.yml file.

    Step 3: In your Github account settings/Developer settings/ Personal access tokens/Tokens(Classic) -> click Generate new token.

    Step 4: Select the Personal access tokens (classic), then select workflow and select the Expiration date.

    Step 5: Copy the token, then go to your App repo’s settings/Secrets and variables/ Actions -> click New repository secret -> then paste your token there and give a name for the secret.

    Step 6: Copy the secret name for paste in Step 7.

    Step 7: then modify below script to yours.
     1name: Deploy App via Github action
 2on:
 3  release:
 4    types: [created]
 5
 6jobs:
 7  build:
 8    runs-on: ubuntu-latest
 9
10    steps:
11      - uses: actions/checkout@v3
12      - uses: actions/setup-node@v3
13        with:
14          node-version: 16
15      - run: cd frontend && yarn install && yarn generate:gh-pages
16      - run: ls
17
18      - uses: peaceiris/actions-gh-pages@v3
19        with:
20          github_token: ${{secrets.Your_secret_name}}
21          publish_dir: "./frontend/build"

    Step 8: everytime when you push your code to Github, after merge it, you can create a release, Then github actions will automatically run the script and deploy the app in Github Pages.