Create a New Next.js Project With the Keystatic CLI

Define where Keystatic should store your content

Create a new collection in Keystatic

Add an image field to a collection schema in Keystatic

Create a single relationship reference between collection entries in Keystatic

Support multiple relationships with the Array field in Keystatic

Create Repeatable Blocks With Multiple Field Schemas in Keystatic

Retrieve Content With The Keystatic Reader API

Display Keystatic data in Next js

Prevent Global Styles from Leaking Into Keystatic

Render Block Field Data in Keystatic

Retrieve 'Has Many' Related Entries In Keystatic

Use Keystatic-Generated Types In The Front End

Add Component Blocks To The Document Field In Keystatic

Render Custom Component Blocks With The DocumentRenderer In Keystatic

Switch To a Content-Focused Layout In Keystatic

Creating One-Off Datasets with Singletons in Keystatic

Customise the Keystatic Admin UI Navigation Sidebar And Dashboard

Change The Site Title and Logo In The Keystatic Admin UI

Deploy a Keystatic Project To Vercel

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

Setup GitHub Collaboration With Keystatic Cloud

Manually Connect a Keystatic Project To A GitHub Repo

Change The Keystatic Storage Mode Based on NODE_ENV

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

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!

https://app.egghead.io/api/v1/lessons/react-setup-github-collaboration-with-keystatic-cloud/subtitles

[00:00] Let's enable remote collaboration on our KeyStonec site and allow people to log in the deployed URL here and allow team members to create or edit content without setting up the site locally. Their changes are going to interface directly with the GitHub repository. In this video, we're going to connect our project with KeyStatic Cloud, which is the easiest way to get set up.
[00:20] I'll visit keystatic.cloud, and you can see that here I'm already logged in with my account. But the first time you visit KeyStatic Cloud, let me visit it incognito. You'll be invited to create an account with your GitHub account or email and password. Creating an account is free. And once you're set up, you'll be taken to your dashboard where you can add and manage teams within
[00:40] which you can add and manage projects. So pretending I have a fresh new account, I will add a team. I'll call this team Simon Swiss and add the team. And you can see that it has 1 user, myself, and 0 projects at this point. And here, I will add a project so that we can connect our website. The first time you connect
[00:59] KeyStatic to a GitHub repo, you'll likely need to install the GitHub app. This is going to take you to a GitHub account. So I wanna connect this to Simon Swiss. And then you can select what repos you would like to authorize. So you can authorize all repos, but if you wanna be a bit more defensive, you can say, hey. I only want this egghead key static next JS
[01:19] plug project, which is the one we want to connect. And then install and authorize. And excuse me while I verify the authentication. There you go. I've done it from my phone. So now I am redirected back to KeyStatic Cloud. And you can see my organization or user account is available here. Nice. And because I've only allowed the GitHub app to
[01:39] have access to one repo, there is only one repo in the list. And you can change the name but I'll keep it here like this. Actually, I will not because it's too long. Let's call it key static 101 and create the project. Alright. So the project is created, and now it's telling me how to connect the project
[01:59] to key static cloud. So you can see in our config file, instead of storage kind local that we had before, we need to switch that to cloud and then specify the project key for the cloud account. And then the second step is to specify the project URLs, which is where the site is deployed. So let's do the first step first. I will go in my
[02:19] codebase on the key static file and switch storage kind to cloud. And I also need to pass a cloud object here, so I'll copy that and paste it here. And I'll commit those changes. Nice. And while it's redeploying, I'm going to copy the project
[02:39] URL which is the URL where we've deployed our website on Vercel. So this URL right there. So let's save the settings. So on Vercel, the setup key static cloud deployment has successfully completed. And you can see that from key static cloud, we now have the URL of the deployed side slash key
[02:59] static, which is the admin UI. So let's visit that. And because this is the first time we visit the website since connected to cloud, it's going to ask us to log in with cloud. Since we logged in with cloud, it's going to automatically log us in, and then we should be able to see 2 posts and 2 entries. And we should have 2 posts
[03:19] and 2 authors. I think I know what's happening. And this is due to my folder setup for this video series where I have a directory for each lesson, and then we're actually deploying this prod directory instead of the root folder. In the key static docs, you can find information about the path prefix. And, essentially, if you're working in
[03:39] a monorepo, which I sort of am in this project, you can have this storage path prefix to kind of prefix where you want your path to start. So when you have path content posts, like I have here, it's going to prefix it with this. This is going to try to do reads and writes from the root level
[03:58] of the GitHub repository. So let's try that. Add a path prefix of prod, which correspond to this directory here, which is where a Next JS site we're deploying leaves. And so I'll commit this change and hopefully that should solve our problem. So let's go on our deployed key static admin
[04:18] UI and hard refresh this, and I'm hoping that we will find the 2 posts and 2 authors. Hey. Hey. There they are. Nice. And with that aside out of the way, let's take a look at what has changed in our key static admin UI. You can see that we have information about the GitHub branch. We're currently on the main branch, and there's options to create new branches,
[04:38] see other branches, but we just have one. And that should be a pretty good indication that our key static admin UI is now connected with our GitHub repo. Matter of fact, you can access the GitHub repo from here if you want. So what does this mean in terms of workflow? Well, let's find out. Let's create a new branch, new post,
[04:58] and you can see that we've now switched to the new post branch. Okay. Interesting. And so because it's called new post, well, let's create a new post, post from deployed site. So I'll add myself as an author and write something. Let's add a heading too.
[05:18] This is cool. And if we wanted, remember we created a YouTube video custom block so we could add a video here. So I will add a YouTube ID. This is a very new video by Jason Langsdorf. This is awesome. You should check it out. And so I think that's good enough. I'm going to create this new post,
[05:38] and let's talk about what's happened. So the entry is created. You can see we have a little badge which is basically telling me that there is one new post in this branch compared to the main branch. So if I go to post, I have 3 posts with 1 added. If I switch to the main branch, we still only have 2 posts. Going back to new
[05:58] posts, there is this added post and in the drop down menu, I can now create a pull request. This is going to take me right in the Keytop account, open APR, and if we scroll down to see the changes, this is pretty straightforward. It created a MarkDoc file with the post from deployed
[06:18] site with the MarkDoc content and the YouTube video custom block. So I can create this pull request and ask my friends for a review, or if I feel very comfortable because this is an easy change, I can merge this PR, YOLO. And I haven't even showed that, but Vercel had created a deploy preview for that new
[06:38] post and then now has deployed to production the new change. And so if we visit the production site now, we will have 3 posts on the homepage. And here's the post I created from the Vercel deployed instance. Haven't touched my code base, synchronized directly with GitHub. This is indeed cool.

Setup GitHub Collaboration With Keystatic Cloud

Share this video with your friends

Course

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