Introducing Edgio Applications v7Find out what's new.

Serving Static Sites

This guide shows you how to serve generic static sites to Edgio.


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.
1npm i -g @edgio/cli@latest

Getting Started

To prepare your static app for deployment on Edgio, run the following command in your project’s root directory:
1edgio init --edgioVersion latest
This will automatically add all of the required dependencies and files to your project. These include:
  • The @edgio/core package - Allows you to declare routes and deploy your application on Edgio
  • The @edgio/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
  • edgio.config.js - The main configuration file for Edgio.
  • routes.js - A default routes file that sends all requests to Next.js. Update this file to add caching or proxy some URLs to a different origin.
  • sw/service-worker.js A service worker implemented using Workbox.

Generate Static Resources

If you’re building an app that bundles static resources, you will want to generate those files before contuining. Typically, this is handled using a build script such as npm run build. This may differ depending on your framework.
The built version of your app will typically reside in a /build or /dist directory.

Router Configuration

The Edgio router is used for configuring where the static resources reside and how to serve them. Using the example above, let’s assume your site is bundled under the /build directory and has the following structure:
  • /build/index.html
  • /build/static/css/main.css
  • /build/static/js/main.js
You can use the router’s static method to serve everything in the build directory:
1import { Router } from '@edgio/core/router';
3export default new Router().static('build')
If your site does not use a bundler for generating a build output, you can still serve the assets using serveStatic and reference the relative path to the resources. Any resource referenced using serveStatic or appShell will automatically be included in the Edgio deployment. An example of serving assets from your src directory:
1import { Router } from '@edgio/core/router';
3export defaultnew Router()
4 // Assets (Hashed and Cached on Edge and in the Browser)
5 .get('/css/:path*', ({ serveStatic }) => serveStatic('assets/css/:path*'))
6 .get('/js/:path*', ({ serveStatic }) => serveStatic('assets/js/:path*'))
8 // Path(s) that do not have a "." as well as "/" to serve the fallback page
9 .get('/:path*/:file([^\\.]+|)', ({ serveStatic }) => serveStatic('index.html'))
11 // All other paths to be served from the src directory
12 .get('/:path*', ({ serveStatic }) => serveStatic('src/:path*'))


Deploy your app to the Sites by running the following command in your project’s root directory:
1edgio deploy
Your initial CDN-as-code deployment will generate system-defined origin configurations along with those defined within your edgio.config.js. Learn more about system-defined origins.
Learn more about deployments.