Github Actions to rescue

After creating my website with Hugo and Github Pages I found that every time I wanted to make a change on the website and build the website I had to generate the static website running hugo command. So I’ve been thinking How could I automate this process?

I’ve been thinking to use something like CI, so I’ve been looking for different CI tools to helping me to solve it, and finally, I decided to make use of Github Actions for building the website. I created a workflow for building the static website and running it each day at the end of the day. It will get the last changes committed during the day and it’ll build the website.

Creating a new workflow for Github Actions

We need a folder to save our workflows. Let’s create it:

mkdir .github/workflows

Create our hugo_build.yml file for bulding our website:

name: Hugo Build & Deploy - Private to Public

# Everytime a push it's executed on master branch it
# will execute this hugo build action
on:
  schedule:
  - cron: "0 0 * * *" # At the end of everyday
  
  workflow_dispatch:  

  # Workflow
jobs:
  # This workflow contains a single job called "build"
  build:
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Check Out Repository
    - name: Checkout
      uses: actions/checkout@v2.3.1 
      with:
        persist-credentials: false
    # Setup Hugo
    - name: Hugo setup
      uses: peaceiris/actions-hugo@v2.4.12
      env:
        ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
      with:
        hugo-version: 'latest'
        extended: false
    # Clean docs directory before deploy web with last changes
    - name: Clean site
      run: |
        if [ -d "docs" ]; then
        rm -rf docs/*
        fi

    # Runs Hugo to build the static Site
    - name: Run Hugo
      run: hugo

    # Commiting changes to repo
    - name: Deploying    
      run: |
        git config user.name "${GITHUB_ACTOR}"
        git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
        git add .
        git commit -am "Deployed with ${GITHUB_WORKFLOW}"
        git push --all -f https://${{ secrets.ACCESS_TOKEN }}@YOUR_REPOSITORY.git

Breaking file step by step

First we need a name for our building and in this case, and configure when it will be executed.I decided to run this workflow at the end of everyday.

name: Hugo Build & Deploy - Private to Public

on:
  schedule:
  - cron: "0 0 * * *" # At the end of everyday

workflow_dispatch:  ## It allows us to run it on the website.

Configure the job:

# Workflow
jobs:
  # This workflow contains a single job called "build"
  build:
    runs-on: ubuntu-latest

And add the steps that our workflow has to do until deploying the website:

Checkout the repository:

 # Check Out Repository
    - name: Checkout
      uses: actions/checkout@v2.3.1 
      with:
        persist-credentials: false

Setting up Hugo with the latest version available:

# Setup Hugo
    - name: Hugo setup
      uses: peaceiris/actions-hugo@v2.4.12
      env:
        ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
      with:
        hugo-version: 'latest'
        extended: false

Removing the old static website locate at our docs folder:

# Clean docs directory before deploy web with last changes
    - name: Clean site
      run: |
        if [ -d "docs" ]; then
        rm -rf docs/*
        fi

Executing Hugo to build the static website:

# Runs Hugo to build the static Site
    - name: Run Hugo
      run: hugo

Finally adding and committing our changes and pushing our docs folder updated

# Commiting changes to repo
    - name: Deploying    
      run: |
        git config user.name "${GITHUB_ACTOR}"
        git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
        git add .
        git commit -am "Deployed with ${GITHUB_WORKFLOW}"
        git push --all -f https://${{ secrets.ACCESS_TOKEN }}@YOUR_REPOSITORY.git

PD: Recipe of today: Spaghetti Carbonara