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 💨
What is 11ty, and why would you want to put it on Compute@Edge?
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
- 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 firstname.lastname@example.org: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
./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. ✨
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!