# On the edge with Astro

Published: 2022-10-27

Did you know you can easily serve static sites from the Edge with [Fastly](https://fastly.com)? Here’s how to get a [Astro](https://astro.build/) site published on Fastly’s [Compute@Edge](https://developer.fastly.com/learning/compute/) for free in less than 2 minutes 💨

## Table of contents

## Quick background

What is Astro, and why would you want to put it on Compute@Edge?

Astro is a UI-agnostic, open source framework that allows you to quickly create content-focused websites. There are a number of pros to Astro 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 Astro 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, in your terminal, run `npm create astro@latest`. This will take you into an interactive prompt with options to specify a folder to create, which template to use, choose your TypeScript configuration, etc.

![npx create astro@latest](https://speek.dev/images/astro-create.webp)

Next, navigate into your newly minted project by running `cd [your-project-name]`. For my example, I can run `cd astro-on-compute`. (I won’t go over the specifics of Astro, but if you’re interested in learning more about how Astro works, check out their [tutorial](https://docs.astro.build/en/getting-started/#learn-astro).)

Now that you’re in your project’s directory, go ahead and build the site by running `npm run build`. This will produce a `./dist` 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=./dist --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=./dist`. 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.toml file](https://speek.dev/images/astro-toml.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.

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://primarily-charmed-honeybee.edgecompute.app/). 👀