Deploy Eleventy to Netlify using GitHub actions

The other day I talked about how easy Zapier was to automatically deploy my Eleventy website.

As a reference, I needed a deployment every morning to deploy my articles whilst I might be on a trip or whatever the case is.

I got some feedback from Waylon and Nacho stating GitHub's actions were maybe a better way to go.

https://twitter.com/DailyDevTips1/status/1347184697391124485?ref_src=twsrc%5Etfw

To be honest I completely forgot that GitHub Action had the option of scheduling!!

But they do, so a couple of hours later and I was working on getting my website build using GitHub actions!

Setting up a new action

On your GitHub repo click the Actions button and you'll get to the following screen.

GitHub actions

On here you see some already made actions that you can pick, I choose to build my own action, however.

Click the button and you will get to the action workflow screen

It will look like this:

GitHub Workflow details

It has some detailed structure, but I'll guide you through what we will be building and using in the following steps.

Building an Eleventy website using GitHub actions

The first step of an Action is defining what it should be called, in my case that is Deploy website:

name: 🍃 Deploy website

The next step is to control when the action should run, we want it to build every time we push to our master branch so let's add that piece:

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ master ]

Then we get to the job section:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
            # All our steps

The jobs define all the things our action will do, and what it runs on, here we run a ubuntu server.

Now let's create the steps.

The first step is to check out the workspace

# Steps represent a sequence of tasks that will be executed as part of the job
steps:
  # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
  - uses: actions/checkout@v2

Then we want to set up Node as a step

# Set up node version 12
- name: Set up Node
    uses: actions/setup-node@v1
    with:
      node-version: "12.x"

Once Node is installed we can go ahead and run npm install which will install all the dependencies.

- name: NPM Install
  run: npm install

Then for Eleventy, we need to run npm run production

- name: Build 11ty
  run: npm run production

This created our dist folder, so let's store the dist folder in a specific branch

- name: Deploy to Netlify branch
    uses: crazy-max/ghaction-github-pages@v2
    with:
      target_branch: netlify
      build_dir: dist
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

This is normally used to build GitHub pages, but we can use this to extract only the dist folder from our build and deploy it to a branch called netlify

You can now go ahead and save this workflow, it will then run. You should now see a new branch if it succeeds.

Deployment center

GitHub branch

Then we can head over to Netlify and change our deployment to be based on this netlify branch with no specific command!

This saved our Netlify build minutes since those are limited to 300. Whereas GitHub private repos gives us 2000 build minutes!

Adding a schedule of GitHub actions

You might be wondering, but where is this schedule, since that was the whole goal for you?

Well on the workflow we can add the following on:

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ master ]
  schedule:
    - cron:  '0 4 * * *'

This runs every day at 04:00 UTC.

There you go, we automated our Eleventy build by using GitHub actions and were even able to schedule these.

I also made a screencast of me building this Action, if you like video explanations better, check it out.

https://www.youtube.com/embed/DEN7DB3mKlc

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Deploy Eleventy to Netlify using GitHub actions

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Setting up a new action

Building an Eleventy website using GitHub actions

Adding a schedule of GitHub actions

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Setting up a new action

Building an Eleventy website using GitHub actions

Adding a schedule of GitHub actions

Thank you for reading, and let's connect!