Edgio
Edgio

Astro

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

Example

Create your Astro site

If you don’t have an existing Astro site, you can create one by running:

Terminal
# Make a new project directory, and navigate directly into it
mkdir my-astro-project && cd $_

# prepare for liftoff...
npm init astro

# install dependencies
npm install

# start developing!
npm run dev

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

Add Layer0

Terminal
# First, globally install the Layer0 CLI:
npm i -g @layer0/cli # yarn global add @layer0/cli

# Then, add Layer0 to your Astro site:
0 init

Update your Layer0 Router

Paste the following into routes.js or routes.ts, depending on the results of the 0 init command:

JavaScript
import { Router } from '@layer0/core'

export default new Router()
  .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
module.exports = {}

Deploy to Layer0

To deploy your site to Layer0, run:

Terminal
# Create a production build of your astro site
npm run build

# Deploy it to Layer0
0 deploy