Static site delivery automation with Eleventy & Buddy

June 9, 2022

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

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:

Repository configurationRepository configuration

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.

It's a good practice to create separate pipelines for staging and production environments.

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:

Pipeline configurationPipeline configuration

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.

npm install
npm run build
$$

Node.js action detailsNode.js action details

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':

Deployment action detailsDeployment action details

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.

We also recommend using the 'Check for string' option to see if the site has been properly rendered.

Monitor website action detailsMonitor website action details

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:

Conditional tabsConditional tabs

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:

Notification action detailsNotification action details

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:

Pipeline overview – primary actionsPipeline overview – primary actions

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:

Pipeline overview – on failure actionsPipeline overview – on failure actions

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!

Maciek Palmowski

Maciek Palmowski

WordPress & PHP Developer

Maciek is a WordPress Ambassador working at Buddy. An active participant in the Open Source world, he spends most of his free time trying to find interesting news for WP Owls newsletter or cycling.

With Buddy even the most complicated CI/CD workflows take minutes to create

Sign up for Buddy CI/CD

Start a free trial

Trusted by customers from 170+ countries