Building and Deploying an Eleventy site with Git

Finding a New Deployment Strategy

I recently decided to host this site myself instead of using Github pages. I also made the switch from Github to Gitea. Unfortunately Gitea doesn't have the equivalent of Github pages and I started looking into deployment options

When you look up deployment options along with Gitea one of the first results that will come up is Drone. After spending countless hours trying to setup a docker compose file for Drone with Traefik and Gitea I scrapped my work and tried to look for a simpler way to handle my deployments.

One day I may try to get Drone working again since I'm sure I'll have a use for it. But for now it seemed liked overkill to use Drone to deploy my site.

Deploying with Git

Turns out that git has some very handy webhooks that you can use for very simple deployments.

1. Install Git on the server

sudo apt-get update
sudo apt-get install git

3. Initialize a git repository on the server

This creates a bare repository. Think of a bare repository as just the .git subfolder. This repository will only contain the revision history for the Eleventy site.

mkdir -p /var/www/example.git
cd /var/www/example.git/
git init --bare

4. Create a folder for the working tree of the repository

This folder will contain the source code for the Eleventy site. There is no need to put anything in this folder since Git will be managing it.

mkdir -p /var/www/example.com

5. Create a post-receive hook

cd hooks
nano post-receive

6. Edit post-receive

This is where all of the magic happens for building the site. The second line tells git where the working tree directory is and where to find the bare repository. It also checkouts the latest code from the repository into the working tree.

After that we need to build dependencies and build the eleventy site.

Finally the built html site is copied over to the web directory that the site is served from.

#!/bin/sh
git --work-tree=/var/www/git-staging --git-dir=/var/www/example.git checkout -f
cd /var/www/git-staging
npm install
npx eleventy
cp -a _site/. /var/www/example.com/html

7. Make post-receive executable

chmod +x post-receive

8. Create a folder to serve the site

In my case I'm using Nginx so I also setup a server block to serve pages from this directory.

cd /var/www
mkdir example.com

9. Deploy code to the server

If the Eleventy site is not already initialized as a git repository then:

git init

Add the remote

git remote add production ssh://<user>@<ip address>:/var/www/example.git

Push code to the remote git repository

git push production master

You should now see your Eleventy site deployed to your server!

• Next: Thoughts on Digital Minimalism
• Previous: Self-hosting my bookmarks