Keystatic Cloud

Keystatic Cloud is a service provided by Thinkmill.

Cloud simplifies authentication (GitHub) with your projects. No need to deal with environment variables and a custom GitHub app.

Keystatic Cloud also offers opt-in products such as Cloud Images — an image storage, optimisation and delivery service.

Keystatic Cloud lets you connect to GitHub and authenticate for one or multiple Keystatic projects.

It skips the more complicated process of setting up GitHub mode, while also allowing team members to edit content without needing a GitHub account.

You'll need to create a Keystatic Cloud account to start using this service.

You can setup multiple projects in your Keystatic Cloud account — where each project is connected to a specific GitHub repository.

In your Keystatic config, you'll need to set the storage option to cloud.

You'll also need to add the cloud.project property with the name of the team and project from your Keystatic Cloud account:

import { config } from '@keystatic/core'

export default config({
  storage: {
    kind: 'cloud',
  },
  cloud: {
    project: '[TEAM_NAME]/[PROJECT_NAME]',
  },
  ...
})

Each project in Keystatic Cloud has a settings page where you'll find a ready-to-paste code snippet in your config file.

Cloud Images is an opt-in service from Keystatic Cloud. It's an image storage and delivery service that optimises your images for the web.

Each Keystatic Cloud project can have its own Image Library, where you can upload images and copy the URL to use in your content.

When using Keystatic Cloude image URLs, you can pass the following optional query parameters to drastically improve the performance of your images:

• fit — how the image should be resized to fit the dimensions you specify. Possible values are scale-down, contain, cover and crop.
• format (f) — the image format to use. Possible values are png, avif, webp and jpeg. If no format is provided, Keystatic Cloud will auto-detect browser capabilities and serve the most optimal format.
• quality (q) — the quality of the image. A number between 1 and 100.
• height (h) — the height of the image. A number between 1 and 10240.
• width (w) — the width of the image. A number between 1 and 10240.

You can provide one or both of height and width, which will have a different effect based on the fit.

Here's an example URL with image transform query parameters:

https://[IMAGE_URL]?width=240&height=480&fit=crop

Keystatic provides a cloudImage field, which can be used instead of the regular image field if Keystatic is running in cloud mode, and the Image Library is enabled for the project.

Keystatic also provides a CloudImage component block, which can be used within the flow of a document field.

Again, you'll need Keystatic running in cloud mode, and have the Image Library enabled for the project.