You are reading Edgio Applications v4 docs. Check out our latest docs for Edgio Applications v7.
Edgio
Edgio

Astro

Astro is a modern static site builder. This guide walks you through deploying Astro sites to Edgio.

Example

Try the Astro Site Example
View the Code

Example SSR Site

This Astro example app uses server-side rendering.
Try the Astro SSR Site Example
View the Code

Prerequisites

Before proceeding, you will need an Edgio property. Create one now if you do not already have one.
Learn how to create a property.

System Requirements

Sign up for Edgio

Deploying requires an account on Edgio. Sign up here for free.

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @layer0/cli@latest

Create your Astro site

If you don’t have an existing Astro site, you can create one by running:
Bash
1# Make a new project directory, and navigate directly into it
2mkdir my-astro-project && cd $_
3

4# prepare for liftoff...
5npm init astro
6

7# install dependencies
8npm install
9

10# start developing!
11npm run dev
12

13# when you're ready: build your static site to `dist/`
14npm run build

Initializing your Project

Initialize your project for use with Edgio by running the following command in your project’s root directory:
Bash
10 init

Update your Edgio Router

Paste the following into routes.js or routes.ts, depending on the results of the 0 init command:
JavaScript
1import { Router } from '@layer0/core'
2

3export default new Router()
4  // Prevent search engine bot(s) from indexing
5  // Read more on: https://docs.layer0.co/guides/cookbook#blocking-search-engine-crawlers
6  .noIndexPermalink()
7  .get('/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)', ({ cache, serveStatic }) => {
8    cache({
9      browser: {
10        // cache js, css, and images in the browser for one hour...
11        maxAgeSeconds: 60 * 60,
12      },
13      edge: {
14        // ... and at the edge for one year
15        maxAgeSeconds: 60 * 60 * 24 * 365,
16      },
17    })
18    serveStatic('dist/:path*/:file.:ext')
19  })
20  .match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
21    cache({
22      // prevent the browser from caching html...
23      browser: false,
24      edge: {
25        // ...cache html at the edge for one year
26        maxAgeSeconds: 60 * 60 * 24 * 365,
27      },
28    })
29    setResponseHeader('content-type', 'text/html; charset=UTF-8')
30    serveStatic('dist/:path*')
31  })
You can remove the origin backend from layer0.config.js:
JavaScript
1module.exports = {}

Deploy to Edgio

Deploy your app to the Sites by running the following commands in your project’s root directory:
Bash
1# Create a production build of your astro site
2npm run build
3

4# Deploy it to Edgio
50 deploy