Automating Eleventy Fetching, Building and Publishing

Scope: #

Automating the publishing of eleventy static blog

How: #

You will need:

linux vm (I've used Debian 11)
git repo
eleventy docker image (I've used https://github.com/femtopixel/docker-eleventy)
web server or service of your choice to host your static site
script to check git repo and start the build if there are any changes

Pros and cons: #

Pros:

Automatic
simple to manage
difficult to break
allows to choose when to deploy with "deploy.YES" file

Cons:

Very simple site
If you want to force a deploy you have to interact with the vm in charge of building the blog
I've not implemented any warning if something goes wrong, I can only see if it works once the site is published
I don't leverage the ability of eleventy to serve the static site locally before deploying.
the built site is not on the git repo since it will be built by a remote machine

Prerequisites: #

git
docker
rsync

Instructions: #

first of all install docker (that's your task) and pull the image we are gonna use:

docker pull femtopixel/eleventy

check that we have the image:

#docker images
REPOSITORY            TAG       IMAGE ID       CREATED       SIZE
femtopixel/eleventy   latest    6c68eb8fdb99   13 days ago   301MB

I'm keeping my eleventy work folder in sync on a git repository,
my script is in charge of checking the repo and rebuilding the site:

(every 5min via cronjob) checks if the repo has been modified, if yes:
pulls repo
checks if the file "deploy.YES: is present, if yes:
launches the container rebuilding the static site
rsyncs the static site's files to the web vm

You have to manually create the file "deploy.YES" in your elventy root folder

the script:

#!/usr/bin/env bash

#variables:
ssh_key="/root/.ssh/id_rsa"
git_repo="git@somegitserver.net:YourUser/YouRepo.git"
folder_dest="/data/blog"
blog_folder="/data/blog"
deploy_file="deploy.YES"
rsync_source="/_site/"
rsync_user="rsyncuser"
rsync_host="web_vm"
rsync_dest="/var/www/vhosts/my_blog/"
logfile="/data/blog/autoupdate_script.log"

#wake up ssh:
eval `ssh-agent`
ssh-add $ssh_key

#update the status of the repo (without pulling or modifing):
git -C $folder_dest fetch

#store the status of the repo:
git_before=$(git -C $folder_dest rev-parse HEAD)
git_after=$(git -C $folder_dest rev-parse @{u})

#compare the status before and after the fetch, if it is different it means there are change in the repo. so we will need to pull it and update the files:
if [ "$git_before" != "$git_after" ]; then
	echo "$(date +"%Y-%m-%d_%H:%M:%S") - INFO - the repo has been modified, doing my thing" | tee -a $logfile
    git -C $folder_dest reset --hard
	git -C $folder_dest pull --ff-only
	if [ -f "$folder_dest/$deploy_file" ]; then
	  echo "$(date +"%Y-%m-%d_%H:%M:%S") - INFO - deploy file is present, doing my thing" | tee -a $logfile
	  rm -rf $blog_folder/_site/*
	  echo "$folder_dest/$deploy_file exists, deploying"
	  docker run --rm -v $blog_folder:/app --name eleventy femtopixel/eleventy --output=/app/_site/
	  rsync -avhz --progress $blog_folder$rsync_source -e "ssh -i $ssh_key" $rsync_user@$rsync_host:$rsync_dest
	else
	  echo "$(date +"%Y-%m-%d_%H:%M:%S") - INFO - deploy file is NOT present, NOTE DEPLOYING" | tee -a $logfile
	  :
	fi
else
	echo "$(date +"%Y-%m-%d_%H:%M:%S") - INFO - the repo is the same as before, staying put 5 more minutes" | tee -a $logfile
	:
fi

echo "- - -" | tee -a $logfile

eval "$(ssh-agent -k)"

obviously:

chmod +x /data/autoupdate_script.sh

cron:

*/5 *	* * *	root	bash /data/autoupdate_script.sh > /dev/null

deploy.YES: #

using the file "deploy.YES" we can choose when to deploy,
the script is built so if the file is found the build and sync with the webserver take place,
otherwise the site won't be built.
This way we can continue to work on the repo and sync it, maybe working on multiple devices without publishing the site until we are ready.

Git: #

I've added the ssh key used to pull the git repo under the "Deploy keys" of the single repo,
these keys are read-only by default, so we know the only action can be a non-write one.

Web server: #

I'm using a simple apache server, it's a static site!

Conclusions: #

the site you are reading right now has been built with this flow,
so it look like it works!