Static site delivery automation with Eleventy & Buddy

Eleventy is a static site generator that does not require users to load any client-side JS bundles which makes it exceptionally lightweight and reliable – a perfect match for Buddy's intuitive design and lightning-fast deployments.

Prerequsisites

• Official Eleventy Starter
• A Git repository with your Eleventy project
• An account on Buddy CI/CD

Process details

In this guide, we'll configure a pipeline that will automate the following tasks:

1. Install dependencies and build the website
2. Deploy code using SFTP
3. Check if the website is working after deployment
4. Send a notification if something goes wrong

Creating a new project

Create a new project in Buddy and synchronize it with your Eleventy repository:

Image loading...

Pipeline configuration

Now it's time to configure a pipeline. A pipeline is a series of actions run in the context of the repository that determine the delivery process.

Add a new pipeline and configure its details. Pipelines can be run manually, recurrently (on time interval), or on every push to the repository. This time, we'll set it to manual mode and assign it to the 'master' branch:

Image loading...

Actions

Build website

The first action to add should be Node.js. The action launches an isolated container with Node in the selected version and runs commands defined by the user – just like you do locally. Enter these commands to download dependencies and build your website.

bash
npm install
npm run build$$

Image loading...

Deploy to server

With the website built, we now need to deploy it to the server. Buddy lets you deploy code to a number of cloud services, or your own server with FTP, SFTP, or rsync upload actions. For the purpose of this guide, we'll use the SFTP action. Select Pipeline Filesystem as your source and fill in all required credentials.

In our case, we only want to deploy the _site folder. You can specify this by setting the 'Source path':

Image loading...

Post-deployment check

It's a good practice to check your website's health after deploying the code. For this we can use the Monitor website action that will check if the site is returning status 200.

Image loading...

Notification

The last action will send a notification in case something goes wrong. Switch to the On failure section of the pipeline and add a notification action of your choice:

Image loading...

Although Slack and MS Teams have dominated messaging services worldwide in the recent years, in this example we'll go for the good old email:

Image loading...

Overview

After just a couple of minutes of configuration we get a fully functional pipeline that builds, deploys, and checks your Elevenety project for errors:

Image loading...

Image loading...

Click the Run button and watch Buddy perform the tasks in real-time. If you configured everything properly, you shall get a properly rendered website running on the server:

Image loading...

Summary

The workflow above is just a snippet of what Buddy can do. For example, you can duplicate the pipeline and set it to run on every push to speed up development, set extra conditions to run on specific events, or preview the website directly in Buddy with our Sandboxes. In short: if you need something automated, Buddy got you covered!