Deploying Nuxt.js app to GitHub pages

Seyed Hossein Mirhosseini — Wed, 27 Nov 2024 20:29:21 +0000

In this brief tutorial, I'll guide you through the process of deploying your project on GitHub Pages. I'm assuming that your project is complete and ready for deployment.
Now, let's follow these instructions step by step:

1. Creating your Repository

To start, create a new public repository on GitHub. If you already have one, feel free to skip this step.

2. Connect your repo with your app

You can use commands below for this:

git remote add origin https://github.com/{username}/{your_repo_name}.git

then create a branch and name it to main by this:

git branch -M main

After this step, you have to push your code on GitHub. Maybe need this:

git push --set-upstream origin main

3. Create your Action And Deploy it

In this step you should go to the Settings tab and then Pages section.

Next, in the Branch section, select the main branch and click the save button next to it.

After that, the page reload and in Build and deployment section you should open the menu in the Source section and choose GitHub Actions option.

Now you see that GitHub make a URL for your repo that you can see the content in there, but we still have some work to do.

You should now see a display similar to this. In this section, you can set up your deployment process using GitHub Action workflows. As shown in the image, GitHub typically identifies your repository workflow automatically. If it doesn't, don't worry, there's an easier way to manage it.
Now you should click on the Configure button as you see above. Then copy the below content and paste it in the editor you can see in the next page.

# https://github.com/actions/deploy-pages#usage
name: Deploy to GitHub Pages
on:
  workflow_dispatch:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: corepack enable
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
      # Pick your own package manager and build script
      - run: npm install
      - run: npx nuxt build --preset github_pages
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./.output/public
  # Deployment job
  deploy:
    # Add a dependency to the build job
    needs: build
    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source
    # Deploy to the github_pages environment
    environment:
      name: github_pages
      url: ${{ steps.deployment.outputs.page_url }}
    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Now almost done, you should click on the Commit changes... button and commit your changes.

In the pop-up windows, you have the option to include additional content for your commit. If you choose not to, there's no negative consequence.

Once you've committed your changes, navigate to the Actions tab. There, you'll see an indication that your workflow has begun its job. You will need to wait for it to complete:

After a few minutes, the yellow flag next to your workflow name will change to green, indicating everything has been successfully completed.

Then, if you click on the name of your workflow, you can see this:

If you click the link generated by GitHub, you'll be able to see the results. To me, the outcome is as follows:

Congratulations, you did it👏.

4. Updating your project

To make changes to your project, such as adding a section to a page, simply commit your modifications and push them to GitHub, it manages other stuff with your workflow that we add it earlier.

After pushing your changes and go to your GitHub page, you see something like this:

After a couple of minutes of waiting, the yellow sign turns green, and then your page has been successfully updated!. For me turn in to this:

Conclusions

You have now learned how to automatically deploy your Nuxt.js app using the GitHub Pages workflow system, and you understand how to update it with ease.