What is automated deployment?

As taken from DX.io, "automated deployment is a practise that allows you to ship code fully or semi-automatically across several stages of the development process".

In our case, we'll be setting up GitHub Actions to automatically deploy our Abell website to GitHub pages

Creating and setting up our Node.js GitHub action

There's a GitHub Pages deployment extension on GitHub Actions Marketplace,

Go into your website's repository, and navigate over to the "actions" tab.

You should see some popular workflows under the tab of "Workflows made for your JavaScript repository"

Select the "Node.js" workflow by GitHub Actions, and click "Setup this workflow"

It should create a new file in the directory .github/workflows/node.js.yml with the boilerplate code.

Head down to strategy > matrix > node-version and set the correct version of Node.js which this project uses

In my case, I'll set this to 16.x

Next, we'll need to change the steps for it to suit our Abell app.

I'm using yarn for this project, but if you're using NPM, make sure to adjust the steps accordingly.

steps:
  with:
    # cache: 'npm'
    cache: 'yarn'
  # run: rm -rf node_modules && npm ci
  - run: rm -rf node_modules && yarn install --frozen-lockfile
  # run: npm run build
  - run: yarn build

Deploying our app to GitHub pages

To deploy our output to GitHub pages, we'll use the Deploy to GitHub Pages action.

In your jobs, below the steps, we can start setting up our action

- name: Deploy
  uses: JamesIves/github-pages-deploy-action@4.1.4
  with:
    branch: gh-pages
    folder: dist

By default, all Abell projects use dist for their output directory, though this can be customised in the Abell config.

Now commit this file to your master branch.

Setting Up GitHub Pages

Now that we're done setting up our workflow, let's make sure GitHub pages works properly.

Go into your repo > settings > pages.

Select gh-pages as your branch, and hit save.

Wait for the action to run, and your website should now be live!

Now, when you commit to your master branch, the files will automatically be built and deployed to your GitHub pages. Cool!