Keystatic and static site generation

[curioustechizen]

A total noob question: The keystatic+astro docs mention that keystatic needs the astro site to be configured for SSR or hybrid modes.

My question is: why is this required? I was hoping to use keystatic as a GUI frontend to enable non technical people to work with an Astro SSG blog (probably hosted on GitHub pages or the like). Is this simply not possible?

[simonswiss]

Hey!

It's because the API routes in the Keystatic Admin UI are doing some reads/writes on the file system (or GitHub repo), which need to happen on the server.

The frontend itself can totally be all pre-rendered HTML. Perhaps you can deploy the Keystatic Admin UI somewhere else that supports Node.js, and deploy your Astro site on github pages?

https://thinkmill.com.au is an example of an Astro site (running as pre-rendered HTML, SSG) deployed on Vercel, and only the admin UI routes are server-rendered. It's all deployed together to enable folks to update the site without accessing the codebase, and it works great 👍

[curioustechizen]

Thanks for the explanation. That makes sense. I'll look into the approach that you suggested.

[airtonix]

@simonswiss

It's because the API routes in the Keystatic Admin UI are doing some reads/writes on the file system (or GitHub repo), which need to happen on the server.

can you point us to a github repo where you:

1. have this separation into two projects, that also
2. have project A as a static only astro project, and
3. have project B as the keystatic admin, able to manipulate project A content

[airtonix]

The main issue and difference between the astro and nextjs integration is this:

• nextjs i can not include any of the keystatic admin, and the nextjs project can still build fully clientside html + js artifacts.
• astro, no way that i can see to opt out of the admin, therefore i am always forced to use hybrid mode, which means i can never render a set of fully static clientside html+js artifacts?

[tordans]

@airtonix we had a test project set up where one github repo was deployed to (a) netlify and (b) a simple ftp-like server without node. We where then able to use the netlify URL to use the /keystatic admin UI and use the CMS which then commits to github which then deploye both pages again. This way you have (b) as a full static side but still (a) (just for the authoring team) as a dynamic side (with a lot fewer traffic). You can do (b) on a separate node enabled server on your infrastructure as well, which is what we will to. We will then setup netflify as domains (c) only for occasional branch deployments.

[airtonix]

This could have been avoided if keystatic was provided as a separate process without needing to know about nextjs or astro and keystatic admin was entirely clientside.

@curioustechizen you should probably look at using DecapCMS instead since it's admin interface is entirely client side where you can then:

• run astro locally on port A
• choose to be in local mode and your story is solved here, or
• decide that you want github authentication, which means ...
  • spin a separate nodejs server that provides the oauth server backchannel on Port B

I was doing something like this using nextjs and contentlayer (looks like they have a nextjs mdx renderer now) and i was able to publish completely static exports whilst using the decapcms interface.

• decapcms is entirely clientside, but expects to connect to a server, by default it connects to github via the rest (or graphql) api
• but in localdev, you can run a local git proxy that mimics the required api server and bypasses the need for github logic
• in production, you can choose:
  • dont include the admin interface, then you're story ends here
  • if you want the admin interface, then you include it like you do locally, but you'll most likely want github login as well, which means a separate api server that facilitates oauth login.

[YonicDev]

If you're only going to use Keystatic for local development, you can set the Astro configuration like this:

const isDev = process.env.NODE_ENV === "development"

export default defineConfig({
  integrations: [
    /* ... other integrations like react and markdoc ... */
    ... isDev? [keystatic()] : [] // uses the integration conditionally
  ],
  output: isDev? 'hybrid' : 'static' // only set hybrid rendering for dev mode
})

And set Keydocs to local mode.