Skip to main content

Automate webp image github action

so i find myself doing this repeatedly everytime i write a content, because i pushed for using webp images on my blog.

automate-webp

hence when i write something on here, i need to convert the images to webp version too, so any browser that supports webp.

the users sees webp version of the image, and webp is know for its speed and good quality too, here is the manual process How to bulk convert images to webp

so this time i moved the automation to github, since at the end of the day, i use github to build and push to netlify, why not automate it there too.

so here is the workflow

.github/workflows/deploy-on-push.yml

name: generate and push webp image version
on:

push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
# Checkout repo
- uses: actions/[email protected]

- name: Check if there are any changes made in bgimg
id: changed-files-specific
uses: tj-actions/changed-[email protected]
with:
files: |
static/bgimg/*

- name: Setup cwebp
if: steps.changed-files-specific.outputs.any_changed == 'true'
run: |
pwd
sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.2.4-linux-x86-64.tar.gz
tar xzvf libwebp-1.2.4-linux-x86-64.tar.gz
cd libwebp-1.2.4-linux-x86-64/bin
mv cwebp ${{ github.workspace }}
cd ../..
rm -rf libwebp-1.2.4-linux-x86-64
rm -rf libwebp-1.2.4-linux-x86-64.tar.gz
sudo mv cwebp /bin
ls

- name: bash file to create the webp version of the images
if: steps.changed-files-specific.outputs.any_changed == 'true'
run: |
bash webp.sh /static/bgimg/

- name: push the webp images to the folder
if: steps.changed-files-specific.outputs.any_changed == 'true'
env:
CI_COMMIT_MESSAGE: CI to buid webp version of the image
CI_COMMIT_AUTHOR: Webp Image CI Bot
run: |
git config --global user.name "${{ env.CI_COMMIT_AUTHOR }}"
git config --global user.email "[email protected]"
git add .
git commit -m "${{ env.CI_COMMIT_MESSAGE }}"
git push

the line which says Check if there are any changes made in bgimg is where i check if there is any changes in my image folders to make decision on wheather i should run the workflow or note.

that way i avoid unneccesary build.

will update this soon to optimize for having to re download the cwebp tool

thats all for now