Docs / Set up

Set up on Netlify

EditStatic runs as an Edge Function on a branch deploy of your site. Production gets the same file but none of the settings, so it does nothing there.

1. Add the files

On your staging branch:

npx github:jefvandegraaf/edit-static init --host netlify --branch staging
git add netlify/edge-functions/editstatic.js .github/workflows/editstatic.yml editstatic.config.json
git commit -m "Add EditStatic"
git push

If your netlify.toml sets a different edge functions folder, move the file there.

2. Turn on the staging branch deploy

In Netlify, open Project configuration, Build & deploy, Continuous deployment, Branches and deploy contexts. Under Branch deploys choose Let me add individual branches and add staging. It's served at https://staging--<your-site>.netlify.app.

3. Add the settings

Open Project configuration, Environment variables, Add a variable. For each one choose Different value for each deploy context and fill in only Branch deploys. Leave Production empty.

Name	Value
`EDIT_PASSWORD`	A long password you choose. Keep it secret.
`GITHUB_TOKEN`	The token from GitHub: this one repo, Contents read and write. Keep it secret.
`GITHUB_REPO`	Your repo as `owner/name`, for example `you/your-site`
`GITHUB_BRANCH`	`staging`, or whichever branch the editing deployment builds from
`EDIT_HOST`	The staging address without `https://`, for example `staging--your-site.netlify.app`

If your plan shows scopes, include Functions: edge functions only see variables with that scope. Variables written in netlify.toml aren't visible to functions, so use the dashboard.

4. Let the Action push

In the repo on GitHub: Settings, Actions, General, Workflow permissions, Read and write permissions, Save.

5. Redeploy and open

Trigger a new deploy of staging, because settings apply to new deploys. Then check /__es/api/health on the staging address and open it with ?edit.

Good to know

A save first commits a small file to .editstatic/pending/. Its commit message includes [skip netlify], so it doesn't start a build. The Action's commit with your edit does.
Single-page apps need the usual /* /index.html 200 rule in public/_redirects. The Edge Function runs before it.
Server-rendered sites work too: the Edge Function runs in front of them.
To update EditStatic, run init again and commit the changed files.