Did you know you can easily serve static sites from the Edge with Fastly? Here’s how to get a 11ty site published on Fastly’s Compute@Edge for free in less than 2 minutes 💨
Quick background
What is 11ty, and why would you want to put it on Compute@Edge?
11ty is a super flexible static site generator that lets you work with multiple template languages, comes with zero boilerplate client-side JavaScript, and offers a fantastic developer experience. There are a number of pros to 11ty and the Jamstack approach in general, including performance, scalability, and security.
Compute@Edge allows you to deploy and run logic for any application or backend service on Fastly’s Edge platform. That means you get the benefits of serverless computing being delivered even closer to the end-user, with no cold starts or roundtrip delays — it’s super fast.
By deploying an 11ty site (or any site) to Compute@Edge, you can create fantastic end-user experiences, like providing instant language localization, serving localized content, and much more – all without having to manage the underlying infrastructure!
Let's get started
Prerequisites
- Have at least Node 16 with NPM installed on your machine
- Create a free Fastly account
- Install the Fastly CLI and set yourself up with a valid auth token
On to the good stuff
First, we’ll start with the eleventy-base-blog, which gives us a basic blog website in Eleventy. If using Git, you can clone the repo and name it one command by running git clone git@github.com:11ty/eleventy-base-blog.git [your-name-here]. This will pull-down the template to your local machine and name the directory accordingly, in my case it’ll be 11ty-on-compute. If you’re looking for an 11ty blog starter with a little more flair, check out the official Glitch starter app. 👀
Next, navigate into your newly minted project by running cd [your-project-name]. For my example, I can run cd 11ty-on-compute. (I won’t go over the specifics of 11ty, but if you’re interested in learning more about how 11ty works, check out their tutorials.)
Now that you’re in your project’s directory, go ahead and install the dependencies and build the site by running npm i && npx @11ty/eleventy. This will produce a ./_site folder with all of your built static files (like HTML, CSS, vanilla JS, and images).
Now that we have our project’s build complete, run npx @fastly/compute-js-static-publish --public-dir=./_site --service-id="". This uses Fastly’s Static Publisher for JavaScript to generate a Compute@Edge application in a new directory that can be found in ./compute-js. It also points to your build by using the —public-dir=./\_site. If you look in your new fastly.toml file that was created, you’ll see that service_id is set to "". If you already have a Compute service you want to use, you can fill in the ID here. Otherwise, leave it as an empty string and the Fastly CLI will create a new service for you and fill it in like magic. ✨
Next, let’s cd ./compute-js and run fastly compute publish. This will run the build and then provide an interactive prompt helping you create a new service, allow you to change the default random domain, and add a backend (if needed). With Static Publisher, we don’t need to use or configure a backend, so we can just accept the defaults here.
Once it’s done creating the service and domain, uploading the package, and activating the version – you’re up and running! You can view the newly created service or manage it with the links provided. See this one LIVE here. 👀
Want to publish to Compute@Edge using other frontend frameworks? Stay tuned for even more upcoming articles!