In this course, you'll create a blog that runs without a database. You'll be able to edit your content from your local file system or from GitHub.

You'll deploy your blog to Vercel and set up real-time previews with Next.js' draft mode!



In this lesson, you'll set up a fresh new Next.js 14 project with the Keystatic CLI. We'll take a quick tour of what's been generated for us, and play around with Keystatic's two-way content editing capabilities!

Create a New Next.js Project With the Keystatic CLI

In this lesson, you'll learn about the `path` configuration for Keystatic collections and singletons. It gives you a lot of flexibility over where your content should be stored on your file system.

react

Define where Keystatic should store your content

In this lesson, you'll create a new `authors` collection in Keystatic. For now, it will only have one field: an author `name`. You'll define the collection label, output path, slug field and schema. Instead of Markdoc, you will save this collection as JSON files on your file system.

Create a new collection in Keystatic

In this lesson, you'll add an image field to our `authors` collection. You'll learn how you can customize where to store the image, and how to construct the `publicPath` to reference that image in your front end.

egghead

Add an image field to a collection schema in Keystatic

In this lesson, you'll create a relationship reference between posts and authors. You'll relate each post to an existing author, and see how you can edit these relationships from the Admin UI or from the code directly.

Create a single relationship reference between collection entries in Keystatic

In this lesson, you'll turn your single-author relationship into a multi-author relationship by leveraging the `array` field in Keystatic, which lets you create "repeatable" items. By wrapping the `relationship` field inside an `array` field, you can effectively create a multi-author picker.

Support multiple relationships with the Array field in Keystatic

In this lesson, you'll create a "blocks builder" which powers a set of repeatable blocks with individual field schemas. You can think of it as a page builder with a predefined set of choices.

Create Repeatable Blocks With Multiple Field Schemas in Keystatic

In this lesson, you'll use the Keystatic Reader API to retrieve data from the file system. We're doing this server side, so we use Next.js 14 server components to get this data.

Retrieve Content With The Keystatic Reader API

In this lesson, you'll take the authors' data obtained from the Keystatic Reader API, and display it below the blog post.

Display Keystatic data in Next js

In this video, you'll learn how to use Next.js' "Route Groups" to prevent global styles from leaking into the Keystatic Admin UI.

Prevent Global Styles from Leaking Into Keystatic

In this video, you'll learn how to render content from the Blocks field type in Keystatic. You'll use the discriminant property as a way to determine what markup to render for each block in the content array.

Render Block Field Data in Keystatic

In this video, you'll learn how to get a list of posts that were written by a specific author. 

Because the author entry does not have any data about posts, you need to work out this ("has many") relationship from the other side ("belongs to"), in the post entries.

Retrieve 'Has Many' Related Entries In Keystatic

In this video, you'll use Keystatic's Entry type to avoid re-creating types for your frontend components.

An added benefit of doing this is that if the Keystatic schema changes, your types will be updated accordingly.

Use Keystatic-Generated Types In The Front End

In this video, you'll add a custom component block to the document field. You'll re-use the ShowcaseYouTubeVideo component created earlier to display the video embed inside the document editor.

Add Component Blocks To The Document Field In Keystatic

In this video, you'll render the custom YouTube video block with Keystatic's DocumentRenderer.

Render Custom Component Blocks With The DocumentRenderer In Keystatic

In this video, you'll discover how you can switch the Keystatic Admin UI to a "zen mode" content-focused layout for a given collection or singleton, by setting the Entry Layout option to "content".

Switch To a Content-Focused Layout In Keystatic

In this video, you'll create a Keystatic Singleton to store social media links for the site's footer.

You'll also render these links in the root layout of the Next.js site.

Creating One-Off Datasets with Singletons in Keystatic

In this video, you'll customise the Keystatic Admin UI Navigation Sidebar and Dashboard by using the User Interface options in the config file.

Customise the Keystatic Admin UI Navigation Sidebar And Dashboard

In this video, you'll change the logo and site title for the Keystatic Admin UI, by using the brand options in the User Interface settings of the config file.

Change The Site Title and Logo In The Keystatic Admin UI

In this video, you'll deploy the Keystatic project to Vercel. You'll find out that not everything is working properly — and there are two different ways (both covered in the next videos) we can improve the situation.

Deploy a Keystatic Project To Vercel

In this video, you'll add a generateStaticParams function in the individual author page, so that a static HTML page is generated at build time, so we can access those on Vercel.

Generate Static Pages From Keystatic Entries With generateStaticParams in Next.js 14

In this video, you'll connect your project with Keystatic Cloud, so that content can be created and edited directly from the deployed URL.

No need to touch the codebase — the changes integrate directly with the GitHub repository!

Setup GitHub Collaboration With Keystatic Cloud

In this video, you'll learn how to manually configure Keystatic to work in GitHub mode. 

You'll walk through the GitHub App creation flow, and then copy the environment variables over to the deployed instance to be able to edit content remotely.

Manually Connect a Keystatic Project To A GitHub Repo

In this video, you'll write some logic to toggle between local and Cloud storage modes for Keystatic, based on whether the site is running in development or production mode.

Create a GitHub-Powered Blog With Keystatic and Next.js

Simon Vrachliotis

Free Community Resource

Free Community Resource

Course Content