Edgio

Astro

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

Example

Example SSR Site

This Astro example app uses server-side rendering.

Prerequisites

Setup requires:

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/applications/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