Astro

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

This Astro example app uses server-side rendering.

Try the Astro SSR Example Site

View the Code

System Requirements

Install Node.js 14.19.0

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.

With npm:

1npm i -g @layer0/cli

With yarn:

Bash
1yarn global add @layer0/cli

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:

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()
// Prevent search engine bot(s) from indexing
// Read more on: https://docs.layer0.co/guides/cookbook#blocking-search-engine-crawlers
.noIndexPermalink()
.get('/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)', ({ cache, serveStatic }) => {
  cache({
    browser: {
      // cache js, css, and images in the browser for one hour...
      maxAgeSeconds: 60 * 60,
    },
    edge: {
      // ... and at the edge for one year
      maxAgeSeconds: 60 * 60 * 24 * 365,
    },
  })
  serveStatic('dist/:path*/:file.:ext')
})
.match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
  cache({
    // prevent the browser from caching html...
    browser: false,
    edge: {
      // ...cache html at the edge for one year
      maxAgeSeconds: 60 * 60 * 24 * 365,
    },
  })
  setResponseHeader('content-type', 'text/html; charset=UTF-8')
  serveStatic('dist/:path*')
})

You can remove the origin backend from layer0.config.js:

JavaScript
1module.exports = {}

Deploy to Edgio

Deploy your app to the App Platform 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