# On the edge with 11ty

Published: 2022-11-14

Did you know you can easily serve static sites from the Edge with [Fastly](https://fastly.com)? Here’s how to get a [11ty](https://11ty.dev/) site published on Fastly’s [Compute@Edge](https://developer.fastly.com/learning/compute/) 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](https://jamstack.org/) 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](https://www.fastly.com/edge-cloud-network/). That means you get the benefits of [serverless computing](https://en.wikipedia.org/wiki/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](https://www.fastly.com/products/edge-compute/use-cases) – all without having to manage the underlying infrastructure!

## Let's get started

**Prerequisites**

- Have at least [Node 16](https://nodejs.org/en/) with [NPM](https://www.npmjs.com/) installed on your machine
- Create a free [Fastly account](https://www.fastly.com/signup/)
- [Install the Fastly CLI](https://developer.fastly.com/learning/tools/cli/#installing) and set yourself up with a valid [auth token](https://docs.fastly.com/en/guides/using-api-tokens#creating-api-tokens)

## On to the good stuff

First, we’ll start with the [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog), which gives us a basic blog website in Eleventy. If using [Git](https://git-scm.com/), 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](https://glitch-hello-eleventy.glitch.me/). 👀

![git clone git@github.com:11ty/eleventy-base-blog.git 11ty-on-compute](https://speek.dev/images/11ty-1.webp)

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](https://www.11ty.dev/docs/tutorials/).)

![npm i && npx @11ty/eleventy](https://speek.dev/images/11ty-2.webp)

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).

![npx @fastly/compute-js-static-publish --public-dir=./_site --service-id=""](https://speek.dev/images/11ty-3.webp)

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](https://github.com/fastly/compute-js-static-publish) 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. ✨

![fastly compute serve](https://speek.dev/images/11ty-4.webp)

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.

![fastly compute publish](https://speek.dev/images/11ty-5.webp)

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](https://thankfully-first-drum.edgecompute.app/). 👀

Want to publish to Compute@Edge using other frontend frameworks? Stay tuned for even more upcoming articles!