Back

Github pages action

A simple and minimal file for building your static Github pages website via Github actions.

This file is intented to work with a node/npm based build step.

name: Build And Deploy
on:
    push:
        branches: [main]
jobs:
    bd:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: 16
            - run: npm install
            - run: npm run build
            - uses: peaceiris/actions-gh-pages@v3
              if: ${{ github.ref == 'refs/heads/main' }}
              with:
                  github_token: ${{ secrets.GITHUB_TOKEN }}
                  publish_dir: ./build

If you can understand everything that's going on here is no need to keep reading, otherwise here's a short summary of what this file does:

  • bd : Job name I chose, you can choose whatever you want.
  • actions/checkout@v3 : This is an official Github action. It will checkout our repository so that it can be used by the other steps. Here's the repo .
  • peaceiris/actions-gh-pages@v3 : This is an unofficial action that will allow us to deploy static files to the gh-pages branch. Here's the repo .
  • if : Checking that we are on main branch in this case. If you are on another branch, you can modify refs/heads/main or just remove the if condition.
  • github_token : This is a token that created by the action to authenticate in the workflow.
  • publish_dir : The directory that contains the static files after the build step. It takes a relative path from where your package.json is located.

Most of the other syntax is self-explanatory and the workflow syntax doc does a much better job of explaining it.

Create a .github/workflows/[whatever].yaml inside your repository, copy the content of this file,make the appropriate changes if your build step differs, and on the next push command your website will be automatically built and deployed.