Sanity.io https://bit.ly/39lJ553 is the platform for structured content. The Content Lake, a real-time document store, gives you complete access and control over your content at any time and anywhere: from text and block content to files and images. Sanity Studio is an open-source application that you can configure and customize with JavaScript and React. You can use it to quickly and simply build your own CMS.  

I collaborated with the team behind Sanity and you'll see Kapehe (https://twitter.com/kapehe_ok) from Sanity give a full breakdown for building your own project. By the end of this video, you'll have your own Sanity Studio and a Content Lake up and running to structure, interact, and query all of your content.
 
00:00 Content Platforms Explained in 100 seconds
02:00 Introducing Kapehe
05:49 Get started with Sanity
07:56 Understanding the code behind the Sanity Studio
09:45 Exploring the Sanity Studio
15:14 Query Content with GROQ 
18:02 Schema Types
21:27 Deploy Sanity Studio
22:30 Previewing Realtime Changes
23:49 Congratulations you built your first Sanity project!
2024-02-04T13:56:29.630Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
2a7d4972-3638-49f9-ae41-8dfcf1bb502f
11c4be4f3fea8257203022c89765c8efb787ddc765c6f9f4e194c92a6457d2f3
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Content platforms treat the content on your website or app like data.
In the beginning, we had HTML websites where content was embedded directly in the code, but that was never going to scale well.
The next generation of websites used a content management system or CMS where content is stored in a database then injected into an HTML template.
This works great until you decide you want to migrate your app into a fancy new JavaScript framework, or maybe you want to display the same content on iOS, Palm OS, and Android, or you may just have multiple views for the same content within a single application.
These demands and gave rise to the headless CMS, a tool that turns your content into a cloud based API so it can be accessed from any application.
Today, a content platform is a critical layer of the modern tech stack where it serves as a single source of truth for your brand.
And because it's completely decoupled from your application code and user database, you can take it with you anywhere.
In addition, it gives you the ability to model and custom tailor your content for any situation.
Rather than start from a cookie cutter solution, you can build your own schema with different fields for things like text and images and create relationships between items like you might in a relational database.
It's a win for marketers because they have a single polished interface for managing content, but it's an even bigger win for us developers because we can now query content from any codebase in a consistent and structured way.
One One tool that makes that possible is Sanity, a popular choice for Jamstack applications, which stands for JavaScript, APIs, and markup.
Sanity is part of the a in the jamstack.
It provides an open source studio where you can model your content with JavaScript and manage it in the browser.
Meanwhile, the actual tool data is stored in the cloud in what's known as a content link, which can then be queried from a front end application quickly with its built in CDN while supporting features like GraphQL, webhooks, and real time updates.
This has been Content Platforms in 100 seconds, but stay tuned because today I've invited Cap from Sanity to take us beyond 100 seconds and show us exactly how a content platform can fit into our tech stack.
Thank you so much for that intro.
Aloha, everyone.
My name is cap and I do developer relations at sanity.io.
So Sanity is a platform for structured content.
As a content platform, Sanity helps you manage and deliver your content in ways you may have not thought possible.
If you're thinking of adding a content platform to your project, Look no further than this fully customizable sanity project, product I'm about to show you.
So, content can be a lot of different things.
It can be The content for a blog or a portfolio.
It could be the video content on a course platform.
It could be the menu and the hours and the address of a restaurant.
It could be a car manufacturer's content and the number of cars that were made in a quarter, how many were sent out, and how many were purchased.
It could be the music tracks for a singer and they're trying to get their name out in the world, so they wanna save it all in one spot.
It could be the times and winners for each sporting event and a major tournament.
You get the picture.
Content is everywhere, and we can find it all online within a couple of seconds.
So with most projects, content is going to be present.
It's best to manage it and know where your content is going from the beginning.
Incorporating a content platform saves you time in the long run.
But there are many other benefits too, and let me tell you about those.
So a content platform should allow you freedom with your content.
One of the biggest reasons why most developers or content creators Hesitate to incorporate a content platform is that there's this fear of losing true ownership to your content, to your stuff.
A content platform should not steal ownership.
It should allow you to own it.
Of course, it's yours.
It should allow you to deliver your Content however and wherever you need it to go.
It should also allow you to structure and manage it however it best fits your needs.
So let me show you how with Sanity you can accomplish all of those things.
Built with React, there is a Sanity dot io backend UI for the content called Sanity Studio.
The studio is fully customizable.
You structure your content or your data however you need.
And because it's built with React, if you know React, you can code it up to be however you want it to look.
And then there's a nifty thing called Portable text.
Portable text is storing your rich text in JSON format.
That JSON format can be reused Everywhere.
Mobile, desktop, a different front end, etcetera.
More on that in a little.
So we should be treating our content as data.
And because our content is data, we wanna treat it as such.
So wherever you need your data to go or do with Sanity, the possibilities are nearly endless.
Using Sanity allows for full customization of how your structured content looks for editors, developers, anyone manipulating the content.
It also allows for the ability to reshape and present your content in any format.
So using Sanity and the Content Lake, you now have a real time database That gives you access to your content however and wherever you need.
You know how you redesign your website every couple of months just because Or you wanna try that new framework with structured content, you can redesign.
You can try a new framework at any time.
So go ahead use that new JavaScript framework and continue using your content like you've been doing.
So let me show you how with sanity.
Io To get a project up and running in just a few minutes.
Remember, what I show you today can be used on any front end.
I'll show you how to spin up a project And also a couple other cool things to get you going right out of the box.
So let's go ahead and let's structure our content.
Alright.
So to get started, go to sanity.io.
Here, we're going to find these two buttons, get started, get started, click on either one of these.
So So once we click on that, we'll see official starters.
You can choose one of these, but we're actually going to do this NPM install.
So So we're gonna be installing globally the sanity CLI and we're going to be running the command sanity init.
That will start our very own Sanity project.
So what I did is I copied that command and I now went to my terminal.
And in my terminal, I'm going to paste that command in, Hit enter and then it will install the CLI for me and it will initialize a brand new project.
If you have not logged in using Sanity on your local computer.
You will be prompted you may be prompted to log in using either Google, GitHub, or email password.
Choose one of those.
Remember what you choose because we're gonna need that in the future.
So I'm going to create new project.
I'll hit enter and we're gonna name our project.
So This is whatever you want it to be named, whatever you want your sanity project to be named.
I'm gonna name it Fireship.
So, I'm gonna hit enter And then, we are going to be asked about the dataset.
So we are going to be using the default dataset.
So I'm just gonna hit y for yes.
It will be called production.
So So we're gonna want that.
Is that path correct?
It is.
So I'm gonna hit enter.
Now, we can choose from movie, ecommerce, blog or clean project.
We are going to do blog for this one.
The other ones have like, uh, so they'll have like pre pre built schemas With, um, some data in it.
The blob one is a pre built schema with no data in it.
And then the clean one, of course, has nothing.
So you would just build your own schemas out.
With this one, we don't want any pre built data.
We just want pre built schemas.
And it is done.
Alright.
So we're going to CD into our project.
And now we are in it.
We can run other either sanity docs, manage, help, any of those, but we actually want to open this up in our text editor of choice.
So I'm gonna actually open it in Versus Code.
There's a shortcut that I have installed, code space period.
If you have that, use that.
If not, go to your Versus Code or text editor and open Yours up.
Now, I'm going to make this big.
Alright.
So let's go through a little bit of this file structure.
So the sanity dot JSON, if we go here, we actually can find our project ID and the name of it.
So we named it Fireship.
We have that.
This project ID is what you will need if you need something else to speak to your content link.
So say you have your React front end or your Next JS front end and you want it to speak to this Dataset, then you will need this project ID.
So that is an easy way to find it.
Now, I also want to point out the schemas folder.
In here, if we did the clean project when we were answering those questions, this would pretty much be empty.
Just a couple of things would be in here.
But like author, category, post, those would not be here.
Now if we went to schema dotjs, Here's where we import and use all of our different schema files.
So we have block content, category, post author that also matches up with all these over here.
And then down here is when we use it.
So we import it and then use it.
If you make a new file, make sure you come in here and import and use.
Now, Now, I'm gonna go to post.
This is our document type.
Now, Sanity uses schema types and in schema types, document is one of them.
There's also string, slug, reference, image, and we'll go through a couple of these and I'll show you what they look like.
This one is a our document type post and it has an array of fields.
So there's title, there's slug.
But let me actually just show you what this looks like on the browser side, on the Sanity Studio front end side, the UI side of it.
So I'm gonna open up my, uh, terminal.
I used control tilde to open it up within Versus Code.
You can open it up however you want.
And I'm going to run the command sanity start.
So run that command, hit enter, And it's starting up our studio, and it will live at local host 3333.
So it's ready.
Let's go back to our browser, local host 3333.
And here, remember, whatever you chose when you did the login at the beginning, choose here.
So I'm gonna do Google, and I am now authorized.
So because it is mine, I have authorization to it.
If you want to give someone else authorization to it, go to manage dot sanity.io and you can add more users.
So this is what our studio looks like.
It has the name.
You can search through your content.
Desk, Vision.
We'll get to the Vision plugin in a little bit.
But here are our 3 document types.
So post, Nothing.
Let's actually add a new post.
So let's do my first blog post.
We will generate a slug.
Author is let me pull this down.
Author is a Reference.
It's referencing this author document.
So, before we actually Can see anything in this drop down.
We need to go make an author.
So we can leave all this here.
I'm gonna go back to content, click on author, and let's make So I'm gonna click on this little pencil.
I'm going to make a new author.
We'll just do my name, generate, And I am cap.
And then publish that.
Awesome.
So now that's published, let's go back to our post, back to the one that we were working on.
And if I do the drop down, we now see The author I just made.
If we had a picture, if I had added a picture to that, this would be the little thumbnail of that picture.
Then we have main image, And let's add an a main image.
Then we have categories, publish at, and body.
So with main image let me actually make this just a little bit smaller.
Main image.
There are 3 ways to upload a main image.
You can click on upload and it will bring down the file structure, like the files from your own computer.
You can drop in an image.
So just like drag and drop, or you can paste in an image and we're gonna do that.
So I'm gonna go to Unsplash and let's look up, Cats.
We'll do this cat with the butterfly.
So we're gonna copy image.
Go back here, and I'm gonna do command v to paste it in.
And now we have Our cat and butterfly image.
And there we go.
Now, let me show you a really cool thing about sanity and images.
So I just unzoomed this a little bit more because I need to show you everything that's going on.
But if I click on edit details, In here, I have some views of my image.
So this is a really cool thing about Sanity is I upload once and it will work for all of these aspect ratios.
I can crop here And this is the crop and I can do hotspot.
Now, hotspot is making sure let me actually show you the thumbnail as I'm doing it.
So Hotspot is making sure that whatever is in this Hotspot is always in view no matter what type of aspect ratio my image is.
So So if I wanna make sure that the cat's ear is always in view, notice how the panorama changed or if I want the cat's nose always in view.
Notice how it's changing.
So I don't have to do, um, like, multiple uploads to make sure that my that my crop is good, that my hotspot is always on.
Sanity will make sure that this spot that your hotspot is on is always in view, and that's how that works.
So then you just exit out, And there's my hotspot and crop for my image.
So, here is the body of my first blog post.
Now, this is the rich text editor, and in here will live our portable text.
Here is the body of my blog Post, I hope you like it.
Old fashioned smiley face.
And so, here is our portable text.
Portable text will live in this rich text editor.
And this is the Sanity way of storing our rich text.
So you know how when you get HTML and you wanna put it into React Application.
It kind of isn't very intuitive because you have to do the dangerously set prop and then you kind of lose control of it.
So because portable text is data, it becomes JSON and so you can actually put it into your React application.
It makes it more intuitive as you Pass it along to mobile, to desktop, to React, to Vue.
If you wanna use a native app And you're using HTML, it would be harder.
JSON would make it easier and this is saved as a JSON format.
So this means that You can now query for your content.
So say you wanted to find out all the blog posts that had code blocks in it, you can do that because all of this is stored as data.
Your content is your data, and that is portable text.
Now, let me actually show you.
So here's our first blog post.
Let's publish it.
Let me actually show you the inspect to our blog post.
If you click on those three dots, click on inspect, Here is all of the JSON of our blog post.
We have our main image.
We have the title.
We have all of our rich text.
So that is how it looks, that's how it's stored, and this is how we can query for it.
Things like this.
Alright.
So let me show you a really cool feature about Main image.
I know we already had hotspot and crop, but let me show you another thing.
So if I go to my vision plugin wait.
Before I do that, I actually have to go to the 3 dots, Inspect and I need to find my main image reference.
This is the ID to my image.
So I'm gonna copy that.
So under my main image, the asset ref, I'm gonna come to my Vision plugin.
Now, the Vision plugin, this is where we can query for our own content.
We're gonna use grok today.
You can use either GraphQL or Grok with Sanity.
Grok is an in house Sanity made query language and I will show you how it's done just a little bit.
There are definitely more places that you can learn about Grok.
Um, but, yeah.
Let me start off.
So, by doing the asterisk, I am grabbing all of my content link.
I'm gonna do the square brackets to filter down.
So I'm gonna do underscore ID is equal to and I'm gonna paste in that ID that I grabbed from the image.
K.
Now I'm gonna run that query.
And in here, this is all of the content we get back from that image.
So created at The idea of it the idea will match what we just had over here.
The type, but I really wanna point this part out.
So under the metadata, we get dimensions.
We also get the palette.
This palette is pretty awesome.
In here, we get our dark muted, dark vibrant, light vibrant, muted.
All the colors that are part of this image and a optimal foreground color for it.
So dark vibrant Takes up 1.93 of the image.
This is the color and this would be a good foreground color for it.
So if you put text over this part of the image, Um, it would be really great for accessibility, this color for the text.
Let's look at light vibrant.
So So it takes up that much of the image.
This is the color and this would be a good foreground color.
So that's just a really awesome thing to To note that you can have that you have this at your fingertips with all the images.
So you can find that, go to your Vision plug plugin, Query for that ID and you have all of this at your fingertips.
So really great.
Okay.
So let's actually add a couple things to our studio.
So we have what it comes with, But let's add a couple things.
So I'm gonna go back to my code and under title within the post dot JS file in the schemas folder.
Let's go underneath here and type in description.
And we'll do, uh, keep titles Short and sweet.
Let's do a smiley face.
Save that.
And if we go back, Keep titles short and sweet.
So it's just a quick little description that you can have and you can start customizing your studio.
But let's create a whole new Schema type.
So if we go to the schema types in the docs for Sanity, we will find an entire list All of the schema types that we can use.
So we've been working in document.
We've done the string.
We have done image.
Let's add a number.
So, if we go to number, this is what it will look like, and there's the properties, there's options, And then and validation.
But here's what we need for our schema.
So I'm gonna copy that, take it over.
Let's do it right after this the slug.
Add a comma to separate those objects, And let's change the title.
So we just need the title name and type for our new schema type.
So title will do Time time to read.
That is the title that will live within our studio.
So this is the title.
This is the title.
The name is the name of the field.
Time to read.
Type, we'll keep as number.
I'm gonna save that.
Come back here and now we have a brand new time to read.
Notice how these little arrows come up.
I could Add that way or I could edit this way.
So let's actually add a validation.
Let's make sure that you can't do longer than 20 minutes time to read.
K.
So I'm gonna come up here and these are all the different types of validations we can do.
Required, min number, less than.
Let's learn more about validation.
And if we come down here, we want this line.
So validation.
And I'll actually just go just to required because we want required.
I'm gonna copy that line, go back to my number, and paste that in.
And then let's also add the less than 20.
So no matter what, we can't make the number go above 20.
Otherwise, we'll get a warning.
Come back here.
And last number we put in was 88.
And sure enough, it's giving us an error.
Must be less than 20.
So no matter what, if we just keep going down until we get it below 20, it's not gonna be happy with this.
19.
And if I go up, error again.
So if you want 20 to be included, then we would change this to 21.
And we don't get the error, but the moment we go go up, we get that error again.
So that is a validation rule to make sure that It stays within the numbers that you want.
Alright.
So now that that's all done, let's publish that and let's get our sanity studio Deployed.
So what we need to do is we need to go back to our code.
And in here, I'm gonna keep this.
I'm gonna create a new one and we need to run the command sanity deploy.
Hit enter.
Now, studio host name.
This is now unique.
So When you created the project with me, you could have used the name FireShip alongside me because that's local, but this one is unique.
I am gonna use the name FireShip, see if that's available.
And it looks like it is because it's not giving me an error.
So now FireShip is now taken, so you can't use that.
And by the time you're watching this, maybe FireShip 1 and FireShip 2 are also taken.
So it has to be unique.
And once it is done, My studio will now live at fireship.sanity.studio.
And I will have I will have authorization to view it And anyone else I give authorization can view it.
So there's my new URL.
Come back here, fire ship dot sanity.studio.
And here is my newly deployed studio with all my stuff, first blog post, everything that I have.
Now, let me show you a really cool thing.
I'm gonna shrink this a little bit.
Pull this one out.
And now I have my local one version my local version running and I have my deployed version running.
Now, these 2 are the same studio, but watch this.
So anything I do in my local version Shows up in my deployed version.
Anything I do in my deployed version shows up in my local version.
And if I do anything, you can see these little pencil show up on both sides.
If I click on that little pencil, it will show What has happened and we can see who made that change.
And if I come over here, click on review changes, we can revert that change from either Side.
Revert that change.
We don't want it and it disappears.
So that is live preview insanity to see Both the local side and the deployed side working together live.
And if I publish, it will be published on both sides and yeah.
And that is how you build your first project with sanity.
Io.
Alright.
So we have our own content link up and running that we can query against.
We have the JSON for all of our content, and the content can be used across all platforms.
We're not limited to anything.
So thank you so much for watching.
If you have more questions about content platforms or about Sanity, you can find me on Twitter at capehe_ok Or you can find an entire Sanity Slack community at slack.sanity.
Io.
Thank you so much for watching and I'll see you around.

Speaker 0: Content platforms treat the content on your website or app like data. In the beginning, we had HTML websites where content was embedded directly in the code, but that was never going to scale well. The next generation of websites used a content management system or CMS where content is stored in a database then injected into an HTML template. This works great until you decide you want to migrate your app into a fancy new JavaScript framework, or maybe you want to display the same content on iOS, Palm OS, and Android, or you may just have multiple views for the same content within a single application. These demands and gave rise to the headless CMS, a tool that turns your content into a cloud based API so it can be accessed from any application.

Today, a content platform is a critical layer of the modern tech stack where it serves as a single source of truth for your brand. And because it's completely decoupled from your application code and user database, you can take it with you anywhere. In addition, it gives you the ability to model and custom tailor your content for any situation. Rather than start from a cookie cutter solution, you can build your own schema with different fields for things like text and images and create relationships between items like you might in a relational database. It's a win for marketers because they have a single polished interface for managing content, but it's an even bigger win for us developers because we can now query content from any codebase in a consistent and structured way.

One One tool that makes that possible is Sanity, a popular choice for Jamstack applications, which stands for JavaScript, APIs, and markup. Sanity is part of the a in the jamstack. It provides an open source studio where you can model your content with JavaScript and manage it in the browser. Meanwhile, the actual tool data is stored in the cloud in what's known as a content link, which can then be queried from a front end application quickly with its built in CDN while supporting features like GraphQL, webhooks, and real time updates. This has been Content Platforms in 100 seconds, but stay tuned because today I've invited Cap from Sanity to take us beyond 100 seconds and show us exactly how a content platform can fit into our tech stack.

Speaker 1: Thank you so much for that intro. Aloha, everyone. My name is cap and I do developer relations at sanity.io. So Sanity is a platform for structured content. As a content platform, Sanity helps you manage and deliver your content in ways you may have not thought possible.

If you're thinking of adding a content platform to your project, Look no further than this fully customizable sanity project, product I'm about to show you. So, content can be a lot of different things. It can be The content for a blog or a portfolio. It could be the video content on a course platform. It could be the menu and the hours and the address of a restaurant.

It could be a car manufacturer's content and the number of cars that were made in a quarter, how many were sent out, and how many were purchased. It could be the music tracks for a singer and they're trying to get their name out in the world, so they wanna save it all in one spot. It could be the times and winners for each sporting event and a major tournament. You get the picture. Content is everywhere, and we can find it all online within a couple of seconds.

So with most projects, content is going to be present. It's best to manage it and know where your content is going from the beginning. Incorporating a content platform saves you time in the long run. But there are many other benefits too, and let me tell you about those. So a content platform should allow you freedom with your content.

One of the biggest reasons why most developers or content creators Hesitate to incorporate a content platform is that there's this fear of losing true ownership to your content, to your stuff. A content platform should not steal ownership. It should allow you to own it. Of course, it's yours. It should allow you to deliver your Content however and wherever you need it to go.

It should also allow you to structure and manage it however it best fits your needs. So let me show you how with Sanity you can accomplish all of those things. Built with React, there is a Sanity dot io backend UI for the content called Sanity Studio. The studio is fully customizable. You structure your content or your data however you need.

And because it's built with React, if you know React, you can code it up to be however you want it to look. And then there's a nifty thing called Portable text. Portable text is storing your rich text in JSON format. That JSON format can be reused Everywhere. Mobile, desktop, a different front end, etcetera.

More on that in a little. So we should be treating our content as data. And because our content is data, we wanna treat it as such. So wherever you need your data to go or do with Sanity, the possibilities are nearly endless. Using Sanity allows for full customization of how your structured content looks for editors, developers, anyone manipulating the content.

It also allows for the ability to reshape and present your content in any format. So using Sanity and the Content Lake, you now have a real time database That gives you access to your content however and wherever you need. You know how you redesign your website every couple of months just because Or you wanna try that new framework with structured content, you can redesign. You can try a new framework at any time. So go ahead use that new JavaScript framework and continue using your content like you've been doing.

So let me show you how with sanity. Io To get a project up and running in just a few minutes. Remember, what I show you today can be used on any front end. I'll show you how to spin up a project And also a couple other cool things to get you going right out of the box. So let's go ahead and let's structure our content.

Alright. So to get started, go to sanity.io. Here, we're going to find these two buttons, get started, get started, click on either one of these. So So once we click on that, we'll see official starters. You can choose one of these, but we're actually going to do this NPM install.

So So we're gonna be installing globally the sanity CLI and we're going to be running the command sanity init. That will start our very own Sanity project. So what I did is I copied that command and I now went to my terminal. And in my terminal, I'm going to paste that command in, Hit enter and then it will install the CLI for me and it will initialize a brand new project. If you have not logged in using Sanity on your local computer.

You will be prompted you may be prompted to log in using either Google, GitHub, or email password. Choose one of those. Remember what you choose because we're gonna need that in the future. So I'm going to create new project. I'll hit enter and we're gonna name our project.

So This is whatever you want it to be named, whatever you want your sanity project to be named. I'm gonna name it Fireship. So, I'm gonna hit enter And then, we are going to be asked about the dataset. So we are going to be using the default dataset. So I'm just gonna hit y for yes.

It will be called production. So So we're gonna want that. Is that path correct? It is. So I'm gonna hit enter.

Now, we can choose from movie, ecommerce, blog or clean project. We are going to do blog for this one. The other ones have like, uh, so they'll have like pre pre built schemas With, um, some data in it. The blob one is a pre built schema with no data in it. And then the clean one, of course, has nothing.

So you would just build your own schemas out. With this one, we don't want any pre built data. We just want pre built schemas. And it is done. Alright.

So we're going to CD into our project. And now we are in it. We can run other either sanity docs, manage, help, any of those, but we actually want to open this up in our text editor of choice. So I'm gonna actually open it in Versus Code. There's a shortcut that I have installed, code space period.

If you have that, use that. If not, go to your Versus Code or text editor and open Yours up. Now, I'm going to make this big. Alright. So let's go through a little bit of this file structure.

So the sanity dot JSON, if we go here, we actually can find our project ID and the name of it. So we named it Fireship. We have that. This project ID is what you will need if you need something else to speak to your content link. So say you have your React front end or your Next JS front end and you want it to speak to this Dataset, then you will need this project ID.

So that is an easy way to find it. Now, I also want to point out the schemas folder. In here, if we did the clean project when we were answering those questions, this would pretty much be empty. Just a couple of things would be in here. But like author, category, post, those would not be here.

Now if we went to schema dotjs, Here's where we import and use all of our different schema files. So we have block content, category, post author that also matches up with all these over here. And then down here is when we use it. So we import it and then use it. If you make a new file, make sure you come in here and import and use.

Now, Now, I'm gonna go to post. This is our document type. Now, Sanity uses schema types and in schema types, document is one of them. There's also string, slug, reference, image, and we'll go through a couple of these and I'll show you what they look like. This one is a our document type post and it has an array of fields.

So there's title, there's slug. But let me actually just show you what this looks like on the browser side, on the Sanity Studio front end side, the UI side of it. So I'm gonna open up my, uh, terminal. I used control tilde to open it up within Versus Code. You can open it up however you want.

And I'm going to run the command sanity start. So run that command, hit enter, And it's starting up our studio, and it will live at local host 3333. So it's ready. Let's go back to our browser, local host 3333. And here, remember, whatever you chose when you did the login at the beginning, choose here.

So I'm gonna do Google, and I am now authorized. So because it is mine, I have authorization to it. If you want to give someone else authorization to it, go to manage dot sanity.io and you can add more users. So this is what our studio looks like. It has the name.

You can search through your content. Desk, Vision. We'll get to the Vision plugin in a little bit. But here are our 3 document types. So post, Nothing.

Let's actually add a new post. So let's do my first blog post. We will generate a slug. Author is let me pull this down. Author is a Reference.

It's referencing this author document. So, before we actually Can see anything in this drop down. We need to go make an author. So we can leave all this here. I'm gonna go back to content, click on author, and let's make So I'm gonna click on this little pencil.

I'm going to make a new author. We'll just do my name, generate, And I am cap. And then publish that. Awesome. So now that's published, let's go back to our post, back to the one that we were working on.

And if I do the drop down, we now see The author I just made. If we had a picture, if I had added a picture to that, this would be the little thumbnail of that picture. Then we have main image, And let's add an a main image. Then we have categories, publish at, and body. So with main image let me actually make this just a little bit smaller.

Main image. There are 3 ways to upload a main image. You can click on upload and it will bring down the file structure, like the files from your own computer. You can drop in an image. So just like drag and drop, or you can paste in an image and we're gonna do that.

So I'm gonna go to Unsplash and let's look up, Cats. We'll do this cat with the butterfly. So we're gonna copy image. Go back here, and I'm gonna do command v to paste it in. And now we have Our cat and butterfly image.

And there we go. Now, let me show you a really cool thing about sanity and images. So I just unzoomed this a little bit more because I need to show you everything that's going on. But if I click on edit details, In here, I have some views of my image. So this is a really cool thing about Sanity is I upload once and it will work for all of these aspect ratios.

I can crop here And this is the crop and I can do hotspot. Now, hotspot is making sure let me actually show you the thumbnail as I'm doing it. So Hotspot is making sure that whatever is in this Hotspot is always in view no matter what type of aspect ratio my image is. So So if I wanna make sure that the cat's ear is always in view, notice how the panorama changed or if I want the cat's nose always in view. Notice how it's changing.

So I don't have to do, um, like, multiple uploads to make sure that my that my crop is good, that my hotspot is always on. Sanity will make sure that this spot that your hotspot is on is always in view, and that's how that works. So then you just exit out, And there's my hotspot and crop for my image. So, here is the body of my first blog post. Now, this is the rich text editor, and in here will live our portable text.

Here is the body of my blog Post, I hope you like it. Old fashioned smiley face. And so, here is our portable text. Portable text will live in this rich text editor. And this is the Sanity way of storing our rich text.

So you know how when you get HTML and you wanna put it into React Application. It kind of isn't very intuitive because you have to do the dangerously set prop and then you kind of lose control of it. So because portable text is data, it becomes JSON and so you can actually put it into your React application. It makes it more intuitive as you Pass it along to mobile, to desktop, to React, to Vue. If you wanna use a native app And you're using HTML, it would be harder.

JSON would make it easier and this is saved as a JSON format. So this means that You can now query for your content. So say you wanted to find out all the blog posts that had code blocks in it, you can do that because all of this is stored as data. Your content is your data, and that is portable text. Now, let me actually show you.

So here's our first blog post. Let's publish it. Let me actually show you the inspect to our blog post. If you click on those three dots, click on inspect, Here is all of the JSON of our blog post. We have our main image.

We have the title. We have all of our rich text. So that is how it looks, that's how it's stored, and this is how we can query for it. Things like this. Alright.

So let me show you a really cool feature about Main image. I know we already had hotspot and crop, but let me show you another thing. So if I go to my vision plugin wait. Before I do that, I actually have to go to the 3 dots, Inspect and I need to find my main image reference. This is the ID to my image.

So I'm gonna copy that. So under my main image, the asset ref, I'm gonna come to my Vision plugin. Now, the Vision plugin, this is where we can query for our own content. We're gonna use grok today. You can use either GraphQL or Grok with Sanity.

Grok is an in house Sanity made query language and I will show you how it's done just a little bit. There are definitely more places that you can learn about Grok. Um, but, yeah. Let me start off. So, by doing the asterisk, I am grabbing all of my content link.

I'm gonna do the square brackets to filter down. So I'm gonna do underscore ID is equal to and I'm gonna paste in that ID that I grabbed from the image. K. Now I'm gonna run that query. And in here, this is all of the content we get back from that image.

So created at The idea of it the idea will match what we just had over here. The type, but I really wanna point this part out. So under the metadata, we get dimensions. We also get the palette. This palette is pretty awesome.

In here, we get our dark muted, dark vibrant, light vibrant, muted. All the colors that are part of this image and a optimal foreground color for it. So dark vibrant Takes up 1.93 of the image. This is the color and this would be a good foreground color for it. So if you put text over this part of the image, Um, it would be really great for accessibility, this color for the text.

Let's look at light vibrant. So So it takes up that much of the image. This is the color and this would be a good foreground color. So that's just a really awesome thing to To note that you can have that you have this at your fingertips with all the images. So you can find that, go to your Vision plug plugin, Query for that ID and you have all of this at your fingertips.

So really great. Okay. So let's actually add a couple things to our studio. So we have what it comes with, But let's add a couple things. So I'm gonna go back to my code and under title within the post dot JS file in the schemas folder.

Let's go underneath here and type in description. And we'll do, uh, keep titles Short and sweet. Let's do a smiley face. Save that. And if we go back, Keep titles short and sweet.

So it's just a quick little description that you can have and you can start customizing your studio. But let's create a whole new Schema type. So if we go to the schema types in the docs for Sanity, we will find an entire list All of the schema types that we can use. So we've been working in document. We've done the string.

We have done image. Let's add a number. So, if we go to number, this is what it will look like, and there's the properties, there's options, And then and validation. But here's what we need for our schema. So I'm gonna copy that, take it over.

Let's do it right after this the slug. Add a comma to separate those objects, And let's change the title. So we just need the title name and type for our new schema type. So title will do Time time to read. That is the title that will live within our studio.

So this is the title. This is the title. The name is the name of the field. Time to read. Type, we'll keep as number.

I'm gonna save that. Come back here and now we have a brand new time to read. Notice how these little arrows come up. I could Add that way or I could edit this way. So let's actually add a validation.

Let's make sure that you can't do longer than 20 minutes time to read. K. So I'm gonna come up here and these are all the different types of validations we can do. Required, min number, less than. Let's learn more about validation.

And if we come down here, we want this line. So validation. And I'll actually just go just to required because we want required. I'm gonna copy that line, go back to my number, and paste that in. And then let's also add the less than 20.

So no matter what, we can't make the number go above 20. Otherwise, we'll get a warning. Come back here. And last number we put in was 88. And sure enough, it's giving us an error.

Must be less than 20. So no matter what, if we just keep going down until we get it below 20, it's not gonna be happy with this. 19. And if I go up, error again. So if you want 20 to be included, then we would change this to 21.

And we don't get the error, but the moment we go go up, we get that error again. So that is a validation rule to make sure that It stays within the numbers that you want. Alright. So now that that's all done, let's publish that and let's get our sanity studio Deployed. So what we need to do is we need to go back to our code.

And in here, I'm gonna keep this. I'm gonna create a new one and we need to run the command sanity deploy. Hit enter. Now, studio host name. This is now unique.

So When you created the project with me, you could have used the name FireShip alongside me because that's local, but this one is unique. I am gonna use the name FireShip, see if that's available. And it looks like it is because it's not giving me an error. So now FireShip is now taken, so you can't use that. And by the time you're watching this, maybe FireShip 1 and FireShip 2 are also taken.

So it has to be unique. And once it is done, My studio will now live at fireship.sanity.studio. And I will have I will have authorization to view it And anyone else I give authorization can view it. So there's my new URL. Come back here, fire ship dot sanity.studio.

And here is my newly deployed studio with all my stuff, first blog post, everything that I have. Now, let me show you a really cool thing. I'm gonna shrink this a little bit. Pull this one out. And now I have my local one version my local version running and I have my deployed version running.

Now, these 2 are the same studio, but watch this. So anything I do in my local version Shows up in my deployed version. Anything I do in my deployed version shows up in my local version. And if I do anything, you can see these little pencil show up on both sides. If I click on that little pencil, it will show What has happened and we can see who made that change.

And if I come over here, click on review changes, we can revert that change from either Side. Revert that change. We don't want it and it disappears. So that is live preview insanity to see Both the local side and the deployed side working together live. And if I publish, it will be published on both sides and yeah.

And that is how you build your first project with sanity. Io. Alright. So we have our own content link up and running that we can query against. We have the JSON for all of our content, and the content can be used across all platforms.

We're not limited to anything. So thank you so much for watching. If you have more questions about content platforms or about Sanity, you can find me on Twitter at capehe_ok Or you can find an entire Sanity Slack community at slack.sanity. Io. Thank you so much for watching and I'll see you around.
Content platforms treat the content on your website or app like data. In the beginning, we had HTML websites where content was embedded directly in the code, but that was never going to scale well. The next generation of websites used a content management system or CMS where content is stored in a database then injected into an HTML template.
websites
internet
This works great until you decide you want to migrate your app into a fancy new JavaScript framework, or maybe you want to display the same content on iOS, Palm OS, and Android, or you may just have multiple views for the same content within a single application.
These demands and gave rise to the headless CMS, a tool that turns your content into a cloud based API so it can be accessed from any application. Today, a content platform is a critical layer of the modern tech stack where it serves as a single source of truth for your brand. And because it's completely decoupled from your application code and user database, you can take it with you anywhere. In addition, it gives you the ability to model and custom tailor your content for any situation. Rather than start from a cookie cutter solution, you can build your own schema with different fields for things like text and images and create relationships between items like you might in a relational database. It's a win for marketers because they have a single polished interface for managing content, but it's an even bigger win for us developers because we can now query content from any codebase in a consistent and structured way. One One tool that makes that possible is Sanity, a popular choice for Jamstack applications, which stands for JavaScript, APIs, and markup.
databases
multimedia
internet
technology
microsoft
software
data management
programming
software development
commerce
Sanity is part of the a in the jamstack.
It provides an open source studio where you can model your content with JavaScript and manage it in the browser. Meanwhile, the actual tool data is stored in the cloud in what's known as a content link, which can then be queried from a front end application quickly with its built in CDN while supporting features like GraphQL, webhooks, and real time updates. This has been Content Platforms in 100 seconds, but stay tuned because today I've invited Cap from Sanity to take us beyond 100 seconds and show us exactly how a content platform can fit into our tech stack. Thank you so much for that intro. Aloha, everyone. My name is cap and I do developer relations at sanity.io.
technology
software
databases
microsoft
software development
So Sanity is a platform for structured content.
As a content platform, Sanity helps you manage and deliver your content in ways you may have not thought possible. If you're thinking of adding a content platform to your project, Look no further than this fully customizable sanity project, product I'm about to show you. So, content can be a lot of different things. It can be The content for a blog or a portfolio. It could be the video content on a course platform. It could be the menu and the hours and the address of a restaurant. It could be a car manufacturer's content and the number of cars that were made in a quarter, how many were sent out, and how many were purchased. It could be the music tracks for a singer and they're trying to get their name out in the world, so they wanna save it all in one spot. It could be the times and winners for each sporting event and a major tournament. You get the picture. Content is everywhere, and we can find it all online within a couple of seconds. So with most projects, content is going to be present. It's best to manage it and know where your content is going from the beginning. Incorporating a content platform saves you time in the long run. But there are many other benefits too, and let me tell you about those. So a content platform should allow you freedom with your content. One of the biggest reasons why most developers or content creators Hesitate to incorporate a content platform is that there's this fear of losing true ownership to your content, to your stuff. A content platform should not steal ownership. It should allow you to own it. Of course, it's yours. It should allow you to deliver your Content however and wherever you need it to go. It should also allow you to structure and manage it however it best fits your needs.
music
copyright licenses
games
copyright
sports
multimedia
media
youtube
singing
entertainment
audio
software
sounds
software development
video gaming
athletics
blogging
intellectual property
So let me show you how with Sanity you can accomplish all of those things. Built with React, there is a Sanity dot io backend UI for the content called Sanity Studio. The studio is fully customizable. You structure your content or your data however you need. And because it's built with React, if you know React, you can code it up to be however you want it to look. And then there's a nifty thing called Portable text. Portable text is storing your rich text in JSON format. That JSON format can be reused Everywhere. Mobile, desktop, a different front end, etcetera. More on that in a little.
So we should be treating our content as data. And because our content is data, we wanna treat it as such. So wherever you need your data to go or do with Sanity, the possibilities are nearly endless. Using Sanity allows for full customization of how your structured content looks for editors, developers, anyone manipulating the content.
data management
data
It also allows for the ability to reshape and present your content in any format.
So using Sanity and the Content Lake, you now have a real time database That gives you access to your content however and wherever you need. You know how you redesign your website every couple of months just because Or you wanna try that new framework with structured content, you can redesign.
databases
data management
You can try a new framework at any time. So go ahead use that new JavaScript framework and continue using your content like you've been doing. So let me show you how with sanity. Io To get a project up and running in just a few minutes. Remember, what I show you today can be used on any front end. I'll show you how to spin up a project And also a couple other cool things to get you going right out of the box. So let's go ahead and let's structure our content. Alright. So to get started, go to sanity.io. Here, we're going to find these two buttons, get started, get started, click on either one of these. So So once we click on that, we'll see official starters. You can choose one of these, but we're actually going to do this NPM install. So So we're gonna be installing globally the sanity CLI and we're going to be running the command sanity init. That will start our very own Sanity project. So what I did is I copied that command and I now went to my terminal. And in my terminal, I'm going to paste that command in, Hit enter and then it will install the CLI for me and it will initialize a brand new project. If you have not logged in using Sanity on your local computer. You will be prompted you may be prompted to log in using either Google, GitHub, or email password. Choose one of those. Remember what you choose because we're gonna need that in the future. So I'm going to create new project. I'll hit enter and we're gonna name our project. So This is whatever you want it to be named, whatever you want your sanity project to be named. I'm gonna name it Fireship. So, I'm gonna hit enter And then, we are going to be asked about the dataset.
So we are going to be using the default dataset. So I'm just gonna hit y for yes. It will be called production. So So we're gonna want that. Is that path correct? It is. So I'm gonna hit enter. Now, we can choose from movie, ecommerce, blog or clean project. We are going to do blog for this one. The other ones have like, uh, so they'll have like pre pre built schemas With, um, some data in it. The blob one is a pre built schema with no data in it. And then the clean one, of course, has nothing. So you would just build your own schemas out.
blogging
data management
databases
With this one, we don't want any pre built data.
We just want pre built schemas. And it is done. Alright. So we're going to CD into our project. And now we are in it. We can run other either sanity docs, manage, help, any of those, but we actually want to open this up in our text editor of choice. So I'm gonna actually open it in Versus Code. There's a shortcut that I have installed, code space period. If you have that, use that. If not, go to your Versus Code or text editor and open Yours up. Now, I'm going to make this big. Alright. So let's go through a little bit of this file structure.
software
publishing
software development
microsoft
So the sanity dot JSON, if we go here, we actually can find our project ID and the name of it. So we named it Fireship. We have that. This project ID is what you will need if you need something else to speak to your content link. So say you have your React front end or your Next JS front end and you want it to speak to this Dataset, then you will need this project ID. So that is an easy way to find it. Now, I also want to point out the schemas folder. In here, if we did the clean project when we were answering those questions, this would pretty much be empty. Just a couple of things would be in here. But like author, category, post, those would not be here. Now if we went to schema dotjs, Here's where we import and use all of our different schema files.
So we have block content, category, post author that also matches up with all these over here. And then down here is when we use it. So we import it and then use it. If you make a new file, make sure you come in here and import and use.
publishing
Now, Now, I'm gonna go to post.
This is our document type. Now, Sanity uses schema types and in schema types, document is one of them. There's also string, slug, reference, image, and we'll go through a couple of these and I'll show you what they look like. This one is a our document type post and it has an array of fields.
documentation
So there's title, there's slug. But let me actually just show you what this looks like on the browser side, on the Sanity Studio front end side, the UI side of it. So I'm gonna open up my, uh, terminal. I used control tilde to open it up within Versus Code. You can open it up however you want. And I'm going to run the command sanity start. So run that command, hit enter, And it's starting up our studio, and it will live at local host 3333.
So it's ready. Let's go back to our browser, local host 3333. And here, remember, whatever you chose when you did the login at the beginning, choose here. So I'm gonna do Google, and I am now authorized. So because it is mine, I have authorization to it. If you want to give someone else authorization to it, go to manage dot sanity.io and you can add more users. So this is what our studio looks like. It has the name. You can search through your content. Desk, Vision. We'll get to the Vision plugin in a little bit. But here are our 3 document types. So post, Nothing. Let's actually add a new post. So let's do my first blog post. We will generate a slug. Author is let me pull this down. Author is a Reference. It's referencing this author document. So, before we actually Can see anything in this drop down. We need to go make an author. So we can leave all this here. I'm gonna go back to content, click on author, and let's make So I'm gonna click on this little pencil. I'm going to make a new author. We'll just do my name, generate, And I am cap. And then publish that. Awesome. So now that's published, let's go back to our post, back to the one that we were working on. And if I do the drop down, we now see The author I just made. If we had a picture, if I had added a picture to that, this would be the little thumbnail of that picture. Then we have main image, And let's add an a main image. Then we have categories, publish at, and body. So with main image let me actually make this just a little bit smaller. Main image. There are 3 ways to upload a main image. You can click on upload and it will bring down the file structure, like the files from your own computer. You can drop in an image. So just like drag and drop, or you can paste in an image and we're gonna do that. So I'm gonna go to Unsplash and let's look up, Cats. We'll do this cat with the butterfly. So we're gonna copy image. Go back here, and I'm gonna do command v to paste it in. And now we have Our cat and butterfly image. And there we go. Now, let me show you a really cool thing about sanity and images. So I just unzoomed this a little bit more because I need to show you everything that's going on. But if I click on edit details, In here, I have some views of my image. So this is a really cool thing about Sanity is I upload once and it will work for all of these aspect ratios.
cats
blogging
publishing
photography
writing
books
art
copyright licenses
internet
microsoft
animation
copyright
I can crop here And this is the crop and I can do hotspot. Now, hotspot is making sure let me actually show you the thumbnail as I'm doing it. So Hotspot is making sure that whatever is in this Hotspot is always in view no matter what type of aspect ratio my image is. So So if I wanna make sure that the cat's ear is always in view, notice how the panorama changed or if I want the cat's nose always in view. Notice how it's changing. So I don't have to do, um, like, multiple uploads to make sure that my that my crop is good, that my hotspot is always on.
Sanity will make sure that this spot that your hotspot is on is always in view, and that's how that works. So then you just exit out, And there's my hotspot and crop for my image. So, here is the body of my first blog post. Now, this is the rich text editor, and in here will live our portable text. Here is the body of my blog Post, I hope you like it. Old fashioned smiley face. And so, here is our portable text. Portable text will live in this rich text editor. And this is the Sanity way of storing our rich text. So you know how when you get HTML and you wanna put it into React Application.
blogging
twitter
writing
It kind of isn't very intuitive because you have to do the dangerously set prop and then you kind of lose control of it. So because portable text is data, it becomes JSON and so you can actually put it into your React application. It makes it more intuitive as you Pass it along to mobile, to desktop, to React, to Vue. If you wanna use a native app And you're using HTML, it would be harder.
JSON would make it easier and this is saved as a JSON format. So this means that You can now query for your content. So say you wanted to find out all the blog posts that had code blocks in it, you can do that because all of this is stored as data. Your content is your data, and that is portable text. Now, let me actually show you. So here's our first blog post. Let's publish it. Let me actually show you the inspect to our blog post. If you click on those three dots, click on inspect, Here is all of the JSON of our blog post. We have our main image. We have the title. We have all of our rich text. So that is how it looks, that's how it's stored, and this is how we can query for it. Things like this. Alright. So let me show you a really cool feature about Main image. I know we already had hotspot and crop, but let me show you another thing. So if I go to my vision plugin wait. Before I do that, I actually have to go to the 3 dots, Inspect and I need to find my main image reference. This is the ID to my image. So I'm gonna copy that. So under my main image, the asset ref, I'm gonna come to my Vision plugin. Now, the Vision plugin, this is where we can query for our own content. We're gonna use grok today. You can use either GraphQL or Grok with Sanity.
blogging
photography
visualization
social media
graphic design
art
Grok is an in house Sanity made query language and I will show you how it's done just a little bit. There are definitely more places that you can learn about Grok. Um, but, yeah. Let me start off. So, by doing the asterisk, I am grabbing all of my content link. I'm gonna do the square brackets to filter down. So I'm gonna do underscore ID is equal to and I'm gonna paste in that ID that I grabbed from the image. K. Now I'm gonna run that query.
And in here, this is all of the content we get back from that image. So created at The idea of it the idea will match what we just had over here. The type, but I really wanna point this part out. So under the metadata, we get dimensions. We also get the palette. This palette is pretty awesome. In here, we get our dark muted, dark vibrant, light vibrant, muted. All the colors that are part of this image and a optimal foreground color for it.
geometry
cosmetics
visualization
modeling
So dark vibrant Takes up 1.93 of the image. This is the color and this would be a good foreground color for it. So if you put text over this part of the image, Um, it would be really great for accessibility, this color for the text.
Let's look at light vibrant. So So it takes up that much of the image. This is the color and this would be a good foreground color. So that's just a really awesome thing to To note that you can have that you have this at your fingertips with all the images. So you can find that, go to your Vision plug plugin, Query for that ID and you have all of this at your fingertips. So really great. Okay. So let's actually add a couple things to our studio. So we have what it comes with, But let's add a couple things.
photography
visualization
art
software
So I'm gonna go back to my code and under title within the post dot JS file in the schemas folder. Let's go underneath here and type in description. And we'll do, uh, keep titles Short and sweet. Let's do a smiley face. Save that. And if we go back, Keep titles short and sweet. So it's just a quick little description that you can have and you can start customizing your studio. But let's create a whole new Schema type. So if we go to the schema types in the docs for Sanity, we will find an entire list All of the schema types that we can use.
So we've been working in document. We've done the string. We have done image. Let's add a number. So, if we go to number, this is what it will look like, and there's the properties, there's options, And then and validation. But here's what we need for our schema. So I'm gonna copy that, take it over.
documentation
Let's do it right after this the slug. Add a comma to separate those objects, And let's change the title. So we just need the title name and type for our new schema type. So title will do Time time to read. That is the title that will live within our studio. So this is the title. This is the title. The name is the name of the field. Time to read. Type, we'll keep as number. I'm gonna save that. Come back here and now we have a brand new time to read. Notice how these little arrows come up. I could Add that way or I could edit this way. So let's actually add a validation. Let's make sure that you can't do longer than 20 minutes time to read. K. So I'm gonna come up here and these are all the different types of validations we can do. Required, min number, less than. Let's learn more about validation. And if we come down here, we want this line. So validation. And I'll actually just go just to required because we want required. I'm gonna copy that line, go back to my number, and paste that in. And then let's also add the less than 20. So no matter what, we can't make the number go above 20. Otherwise, we'll get a warning. Come back here. And last number we put in was 88. And sure enough, it's giving us an error. Must be less than 20. So no matter what, if we just keep going down until we get it below 20, it's not gonna be happy with this. 19. And if I go up, error again. So if you want 20 to be included, then we would change this to 21. And we don't get the error, but the moment we go go up, we get that error again. So that is a validation rule to make sure that It stays within the numbers that you want. Alright. So now that that's all done, let's publish that and let's get our sanity studio Deployed. So what we need to do is we need to go back to our code. And in here, I'm gonna keep this. I'm gonna create a new one and we need to run the command sanity deploy. Hit enter. Now, studio host name. This is now unique. So When you created the project with me, you could have used the name FireShip alongside me because that's local, but this one is unique. I am gonna use the name FireShip, see if that's available. And it looks like it is because it's not giving me an error. So now FireShip is now taken, so you can't use that. And by the time you're watching this, maybe FireShip 1 and FireShip 2 are also taken. So it has to be unique. And once it is done, My studio will now live at fireship.sanity.studio. And I will have I will have authorization to view it And anyone else I give authorization can view it. So there's my new URL. Come back here, fire ship dot sanity.studio. And here is my newly deployed studio with all my stuff, first blog post, everything that I have.
Now, let me show you a really cool thing. I'm gonna shrink this a little bit. Pull this one out. And now I have my local one version my local version running and I have my deployed version running. Now, these 2 are the same studio, but watch this. So anything I do in my local version Shows up in my deployed version. Anything I do in my deployed version shows up in my local version. And if I do anything, you can see these little pencil show up on both sides.
military
If I click on that little pencil, it will show What has happened and we can see who made that change. And if I come over here, click on review changes, we can revert that change from either Side. Revert that change. We don't want it and it disappears.
So that is live preview insanity to see Both the local side and the deployed side working together live. And if I publish, it will be published on both sides and yeah. And that is how you build your first project with sanity. Io. Alright. So we have our own content link up and running that we can query against.
publishing
media
blogging
multimedia
social media
We have the JSON for all of our content, and the content can be used across all platforms. We're not limited to anything. So thank you so much for watching. If you have more questions about content platforms or about Sanity, you can find me on Twitter at capehe_ok Or you can find an entire Sanity Slack community at slack.sanity. Io. Thank you so much for watching and I'll see you around.
social media
Content platforms treat the content on your website or app like data. In the beginning, we had HTML websites where content was embedded directly in the code, but that was never going to scale well. The next generation of websites used a content management system or CMS where content is stored in a database then injected into an HTML template. This works great until you decide you want to migrate your app into a fancy new JavaScript framework, or maybe you want to display the same content on iOS, Palm OS, and Android, or you may just have multiple views for the same content within a single application. These demands and gave rise to the headless CMS, a tool that turns your content into a cloud based API so it can be accessed from any application. Today, a content platform is a critical layer of the modern tech stack where it serves as a single source of truth for your brand. And because it's completely decoupled from your application code and user database, you can take it with you anywhere. In addition, it gives you the ability to model and custom tailor your content for any situation. Rather than start from a cookie cutter solution, you can build your own schema with different fields for things like text and images and create relationships between items like you might in a relational database. It's a win for marketers because they have a single polished interface for managing content, but it's an even bigger win for us developers because we can now query content from any codebase in a consistent and structured way. One One tool that makes that possible is Sanity, a popular choice for Jamstack applications, which stands for JavaScript, APIs, and markup. Sanity is part of the a in the jamstack. It provides an open source studio where you can model your content with JavaScript and manage it in the browser. Meanwhile, the actual tool data is stored in the cloud in what's known as a content link, which can then be queried from a front end application quickly with its built in CDN while supporting features like GraphQL, webhooks, and real time updates. This has been Content Platforms in 100 seconds, but stay tuned because today I've invited Cap from Sanity to take us beyond 100 seconds and show us exactly how a content platform can fit into our tech stack. Thank you so much for that intro. Aloha, everyone. My name is cap and I do developer relations at sanity.io. So Sanity is a platform for structured content. As a content platform, Sanity helps you manage and deliver your content in ways you may have not thought possible. If you're thinking of adding a content platform to your project, Look no further than this fully customizable sanity project, product I'm about to show you. So, content can be a lot of different things. It can be The content for a blog or a portfolio. It could be the video content on a course platform. It could be the menu and the hours and the address of a restaurant. It could be a car manufacturer's content and the number of cars that were made in a quarter, how many were sent out, and how many were purchased. It could be the music tracks for a singer and they're trying to get their name out in the world, so they wanna save it all in one spot. It could be the times and winners for each sporting event and a major tournament. You get the picture. Content is everywhere, and we can find it all online within a couple of seconds. So with most projects, content is going to be present. It's best to manage it and know where your content is going from the beginning. Incorporating a content platform saves you time in the long run. But there are many other benefits too, and let me tell you about those. So a content platform should allow you freedom with your content. One of the biggest reasons why most developers or content creators Hesitate to incorporate a content platform is that there's this fear of losing true ownership to your content, to your stuff. A content platform should not steal ownership. It should allow you to own it. Of course, it's yours. It should allow you to deliver your Content however and wherever you need it to go. It should also allow you to structure and manage it however it best fits your needs. So let me show you how with Sanity you can accomplish all of those things. Built with React, there is a Sanity dot io backend UI for the content called Sanity Studio. The studio is fully customizable. You structure your content or your data however you need. And because it's built with React, if you know React, you can code it up to be however you want it to look. And then there's a nifty thing called Portable text. Portable text is storing your rich text in JSON format. That JSON format can be reused Everywhere. Mobile, desktop, a different front end, etcetera. More on that in a little. So we should be treating our content as data. And because our content is data, we wanna treat it as such. So wherever you need your data to go or do with Sanity, the possibilities are nearly endless. Using Sanity allows for full customization of how your structured content looks for editors, developers, anyone manipulating the content. It also allows for the ability to reshape and present your content in any format. So using Sanity and the Content Lake, you now have a real time database That gives you access to your content however and wherever you need. You know how you redesign your website every couple of months just because Or you wanna try that new framework with structured content, you can redesign. You can try a new framework at any time. So go ahead use that new JavaScript framework and continue using your content like you've been doing. So let me show you how with sanity. Io To get a project up and running in just a few minutes. Remember, what I show you today can be used on any front end. I'll show you how to spin up a project And also a couple other cool things to get you going right out of the box. So let's go ahead and let's structure our content. Alright. So to get started, go to sanity.io. Here, we're going to find these two buttons, get started, get started, click on either one of these. So So once we click on that, we'll see official starters. You can choose one of these, but we're actually going to do this NPM install. So So we're gonna be installing globally the sanity CLI and we're going to be running the command sanity init. That will start our very own Sanity project. So what I did is I copied that command and I now went to my terminal. And in my terminal, I'm going to paste that command in, Hit enter and then it will install the CLI for me and it will initialize a brand new project. If you have not logged in using Sanity on your local computer. You will be prompted you may be prompted to log in using either Google, GitHub, or email password. Choose one of those. Remember what you choose because we're gonna need that in the future. So I'm going to create new project. I'll hit enter and we're gonna name our project. So This is whatever you want it to be named, whatever you want your sanity project to be named. I'm gonna name it Fireship. So, I'm gonna hit enter And then, we are going to be asked about the dataset. So we are going to be using the default dataset. So I'm just gonna hit y for yes. It will be called production. So So we're gonna want that. Is that path correct? It is. So I'm gonna hit enter. Now, we can choose from movie, ecommerce, blog or clean project. We are going to do blog for this one. The other ones have like, uh, so they'll have like pre pre built schemas With, um, some data in it. The blob one is a pre built schema with no data in it. And then the clean one, of course, has nothing. So you would just build your own schemas out. With this one, we don't want any pre built data. We just want pre built schemas. And it is done. Alright. So we're going to CD into our project. And now we are in it. We can run other either sanity docs, manage, help, any of those, but we actually want to open this up in our text editor of choice. So I'm gonna actually open it in Versus Code. There's a shortcut that I have installed, code space period. If you have that, use that. If not, go to your Versus Code or text editor and open Yours up. Now, I'm going to make this big. Alright. So let's go through a little bit of this file structure. So the sanity dot JSON, if we go here, we actually can find our project ID and the name of it. So we named it Fireship. We have that. This project ID is what you will need if you need something else to speak to your content link. So say you have your React front end or your Next JS front end and you want it to speak to this Dataset, then you will need this project ID. So that is an easy way to find it. Now, I also want to point out the schemas folder. In here, if we did the clean project when we were answering those questions, this would pretty much be empty. Just a couple of things would be in here. But like author, category, post, those would not be here. Now if we went to schema dotjs, Here's where we import and use all of our different schema files. So we have block content, category, post author that also matches up with all these over here. And then down here is when we use it. So we import it and then use it. If you make a new file, make sure you come in here and import and use. Now, Now, I'm gonna go to post. This is our document type. Now, Sanity uses schema types and in schema types, document is one of them. There's also string, slug, reference, image, and we'll go through a couple of these and I'll show you what they look like. This one is a our document type post and it has an array of fields. So there's title, there's slug. But let me actually just show you what this looks like on the browser side, on the Sanity Studio front end side, the UI side of it. So I'm gonna open up my, uh, terminal. I used control tilde to open it up within Versus Code. You can open it up however you want. And I'm going to run the command sanity start. So run that command, hit enter, And it's starting up our studio, and it will live at local host 3333. So it's ready. Let's go back to our browser, local host 3333. And here, remember, whatever you chose when you did the login at the beginning, choose here. So I'm gonna do Google, and I am now authorized. So because it is mine, I have authorization to it. If you want to give someone else authorization to it, go to manage dot sanity.io and you can add more users. So this is what our studio looks like. It has the name. You can search through your content. Desk, Vision. We'll get to the Vision plugin in a little bit. But here are our 3 document types. So post, Nothing. Let's actually add a new post. So let's do my first blog post. We will generate a slug. Author is let me pull this down. Author is a Reference. It's referencing this author document. So, before we actually Can see anything in this drop down. We need to go make an author. So we can leave all this here. I'm gonna go back to content, click on author, and let's make So I'm gonna click on this little pencil. I'm going to make a new author. We'll just do my name, generate, And I am cap. And then publish that. Awesome. So now that's published, let's go back to our post, back to the one that we were working on. And if I do the drop down, we now see The author I just made. If we had a picture, if I had added a picture to that, this would be the little thumbnail of that picture. Then we have main image, And let's add an a main image. Then we have categories, publish at, and body. So with main image let me actually make this just a little bit smaller. Main image. There are 3 ways to upload a main image. You can click on upload and it will bring down the file structure, like the files from your own computer. You can drop in an image. So just like drag and drop, or you can paste in an image and we're gonna do that. So I'm gonna go to Unsplash and let's look up, Cats. We'll do this cat with the butterfly. So we're gonna copy image. Go back here, and I'm gonna do command v to paste it in. And now we have Our cat and butterfly image. And there we go. Now, let me show you a really cool thing about sanity and images. So I just unzoomed this a little bit more because I need to show you everything that's going on. But if I click on edit details, In here, I have some views of my image. So this is a really cool thing about Sanity is I upload once and it will work for all of these aspect ratios. I can crop here And this is the crop and I can do hotspot. Now, hotspot is making sure let me actually show you the thumbnail as I'm doing it. So Hotspot is making sure that whatever is in this Hotspot is always in view no matter what type of aspect ratio my image is. So So if I wanna make sure that the cat's ear is always in view, notice how the panorama changed or if I want the cat's nose always in view. Notice how it's changing. So I don't have to do, um, like, multiple uploads to make sure that my that my crop is good, that my hotspot is always on. Sanity will make sure that this spot that your hotspot is on is always in view, and that's how that works. So then you just exit out, And there's my hotspot and crop for my image. So, here is the body of my first blog post. Now, this is the rich text editor, and in here will live our portable text. Here is the body of my blog Post, I hope you like it. Old fashioned smiley face. And so, here is our portable text. Portable text will live in this rich text editor. And this is the Sanity way of storing our rich text. So you know how when you get HTML and you wanna put it into React Application. It kind of isn't very intuitive because you have to do the dangerously set prop and then you kind of lose control of it. So because portable text is data, it becomes JSON and so you can actually put it into your React application. It makes it more intuitive as you Pass it along to mobile, to desktop, to React, to Vue. If you wanna use a native app And you're using HTML, it would be harder. JSON would make it easier and this is saved as a JSON format. So this means that You can now query for your content. So say you wanted to find out all the blog posts that had code blocks in it, you can do that because all of this is stored as data. Your content is your data, and that is portable text. Now, let me actually show you. So here's our first blog post. Let's publish it. Let me actually show you the inspect to our blog post. If you click on those three dots, click on inspect, Here is all of the JSON of our blog post. We have our main image. We have the title. We have all of our rich text. So that is how it looks, that's how it's stored, and this is how we can query for it. Things like this. Alright. So let me show you a really cool feature about Main image. I know we already had hotspot and crop, but let me show you another thing. So if I go to my vision plugin wait. Before I do that, I actually have to go to the 3 dots, Inspect and I need to find my main image reference. This is the ID to my image. So I'm gonna copy that. So under my main image, the asset ref, I'm gonna come to my Vision plugin. Now, the Vision plugin, this is where we can query for our own content. We're gonna use grok today. You can use either GraphQL or Grok with Sanity. Grok is an in house Sanity made query language and I will show you how it's done just a little bit. There are definitely more places that you can learn about Grok. Um, but, yeah. Let me start off. So, by doing the asterisk, I am grabbing all of my content link. I'm gonna do the square brackets to filter down. So I'm gonna do underscore ID is equal to and I'm gonna paste in that ID that I grabbed from the image. K. Now I'm gonna run that query. And in here, this is all of the content we get back from that image. So created at The idea of it the idea will match what we just had over here. The type, but I really wanna point this part out. So under the metadata, we get dimensions. We also get the palette. This palette is pretty awesome. In here, we get our dark muted, dark vibrant, light vibrant, muted. All the colors that are part of this image and a optimal foreground color for it. So dark vibrant Takes up 1.93 of the image. This is the color and this would be a good foreground color for it. So if you put text over this part of the image, Um, it would be really great for accessibility, this color for the text. Let's look at light vibrant. So So it takes up that much of the image. This is the color and this would be a good foreground color. So that's just a really awesome thing to To note that you can have that you have this at your fingertips with all the images. So you can find that, go to your Vision plug plugin, Query for that ID and you have all of this at your fingertips. So really great. Okay. So let's actually add a couple things to our studio. So we have what it comes with, But let's add a couple things. So I'm gonna go back to my code and under title within the post dot JS file in the schemas folder. Let's go underneath here and type in description. And we'll do, uh, keep titles Short and sweet. Let's do a smiley face. Save that. And if we go back, Keep titles short and sweet. So it's just a quick little description that you can have and you can start customizing your studio. But let's create a whole new Schema type. So if we go to the schema types in the docs for Sanity, we will find an entire list All of the schema types that we can use. So we've been working in document. We've done the string. We have done image. Let's add a number. So, if we go to number, this is what it will look like, and there's the properties, there's options, And then and validation. But here's what we need for our schema. So I'm gonna copy that, take it over. Let's do it right after this the slug. Add a comma to separate those objects, And let's change the title. So we just need the title name and type for our new schema type. So title will do Time time to read. That is the title that will live within our studio. So this is the title. This is the title. The name is the name of the field. Time to read. Type, we'll keep as number. I'm gonna save that. Come back here and now we have a brand new time to read. Notice how these little arrows come up. I could Add that way or I could edit this way. So let's actually add a validation. Let's make sure that you can't do longer than 20 minutes time to read. K. So I'm gonna come up here and these are all the different types of validations we can do. Required, min number, less than. Let's learn more about validation. And if we come down here, we want this line. So validation. And I'll actually just go just to required because we want required. I'm gonna copy that line, go back to my number, and paste that in. And then let's also add the less than 20. So no matter what, we can't make the number go above 20. Otherwise, we'll get a warning. Come back here. And last number we put in was 88. And sure enough, it's giving us an error. Must be less than 20. So no matter what, if we just keep going down until we get it below 20, it's not gonna be happy with this. 19. And if I go up, error again. So if you want 20 to be included, then we would change this to 21. And we don't get the error, but the moment we go go up, we get that error again. So that is a validation rule to make sure that It stays within the numbers that you want. Alright. So now that that's all done, let's publish that and let's get our sanity studio Deployed. So what we need to do is we need to go back to our code. And in here, I'm gonna keep this. I'm gonna create a new one and we need to run the command sanity deploy. Hit enter. Now, studio host name. This is now unique. So When you created the project with me, you could have used the name FireShip alongside me because that's local, but this one is unique. I am gonna use the name FireShip, see if that's available. And it looks like it is because it's not giving me an error. So now FireShip is now taken, so you can't use that. And by the time you're watching this, maybe FireShip 1 and FireShip 2 are also taken. So it has to be unique. And once it is done, My studio will now live at fireship.sanity.studio. And I will have I will have authorization to view it And anyone else I give authorization can view it. So there's my new URL. Come back here, fire ship dot sanity.studio. And here is my newly deployed studio with all my stuff, first blog post, everything that I have. Now, let me show you a really cool thing. I'm gonna shrink this a little bit. Pull this one out. And now I have my local one version my local version running and I have my deployed version running. Now, these 2 are the same studio, but watch this. So anything I do in my local version Shows up in my deployed version. Anything I do in my deployed version shows up in my local version. And if I do anything, you can see these little pencil show up on both sides. If I click on that little pencil, it will show What has happened and we can see who made that change. And if I come over here, click on review changes, we can revert that change from either Side. Revert that change. We don't want it and it disappears. So that is live preview insanity to see Both the local side and the deployed side working together live. And if I publish, it will be published on both sides and yeah. And that is how you build your first project with sanity. Io. Alright. So we have our own content link up and running that we can query against. We have the JSON for all of our content, and the content can be used across all platforms. We're not limited to anything. So thank you so much for watching. If you have more questions about content platforms or about Sanity, you can find me on Twitter at capehe_ok Or you can find an entire Sanity Slack community at slack.sanity. Io. Thank you so much for watching and I'll see you around.
Content
content
platforms
platforms
treat
treat
the
the
content
content
on
on
your
your
website
website
or
or
app
app
like
like
data.
data
In
in
the
the
beginning,
beginning
we
we
had
had
HTML
html
websites
websites
where
where
content
content
was
was
embedded
embedded
directly
directly
in
in
the
the
code,
code
but
but
that
that
was
was
never
never
going
going
to
to
scale
scale
well.
well
The
the
next
next
generation
generation
of
of
websites
websites
used
used
a
a
content
content
management
management
system
system
or
or
CMS
cms
where
where
content
content
is
is
stored
stored
in
in
a
a
database
database
then
then
injected
injected
into
into
an
an
HTML
html
template.
template
This
this
works
works
great
great
until
until
you
you
decide
decide
you
you
want
want
to
to
migrate
migrate
your
your
app
app
into
into
a
a
fancy
fancy
new
new
JavaScript
javascript
framework,
framework
or
or
maybe
maybe
you
you
want
want
to
to
display
display
the
the
same
same
content
content
on
on
iOS,
ios
Palm
palm
OS,
os
and
and
Android,
android
or
or
you
you
may
may
just
just
have
have
multiple
multiple
views
views
for
for
the
the
same
same
content
content
within
within
a
a
single
single
application.
application
These
these
demands
demands
and
and
gave
gave
rise
rise
to
to
the
the
headless
headless
CMS,
cms
a
a
tool
tool
that
that
turns
turns
your
your
content
content
into
into
a
a
cloud
cloud
based
based
API
api
so
so
it
it
can
can
be
be
accessed
accessed
from
from
any
any
application.
application
Today,
today
a
a
content
content
platform
platform
is
is
a
a
critical
critical
layer
layer
of
of
the
the
modern
modern
tech
tech
stack
stack
where
where
it
it
serves
serves
as
as
a
a
single
single
source
source
of
of
truth
truth
for
for
your
your
brand.
brand
And
and
because
because
it's
it's
completely
completely
decoupled
decoupled
from
from
your
your
application
application
code
code
and
and
user
user
database,
database
you
you
can
can
take
take
it
it
with
with
you
you
anywhere.
anywhere
In
in
addition,
addition
it
it
gives
gives
you
you
the
the
ability
ability
to
to
model
model
and
and
custom
custom
tailor
tailor
your
your
content
content
for
for
any
any
situation.
situation
Rather
rather
than
than
start
start
from
from
a
a
cookie
cookie
cutter
cutter
solution,
solution
you
you
can
can
build
build
your
your
own
own
schema
schema
with
with
different
different
fields
fields
for
for
things
things
like
like
text
text
and
and
images
images
and
and
create
create
relationships
relationships
between
between
items
items
like
like
you
you
might
might
in
in
a
a
relational
relational
database.
database
It's
it's
a
a
win
win
for
for
marketers
marketers
because
because
they
they
have
have
a
a
single
single
polished
polished
interface
interface
for
for
managing
managing
content,
content
but
but
it's
it's
an
an
even
even
bigger
bigger
win
win
for
for
us
us
developers
developers
because
because
we
we
can
can
now
now
query
query
content
content
from
from
any
any
codebase
codebase
in
in
a
a
consistent
consistent
and
and
structured
structured
way.
way
One
one
One
one
tool
tool
that
that
makes
makes
that
that
possible
possible
is
is
Sanity,
sanity
a
a
popular
popular
choice
choice
for
for
Jamstack
jamstack
applications,
applications
which
which
stands
stands
for
for
JavaScript,
javascript
APIs,
apis
and
and
markup.
markup
Sanity
sanity
is
is
part
part
of
of
the
the
a
a
in
in
the
the
jamstack.
jamstack
It
it
provides
provides
an
an
open
open
source
source
studio
studio
where
where
you
you
can
can
model
model
your
your
content
content
with
with
JavaScript
javascript
and
and
manage
manage
it
it
in
in
the
the
browser.
browser
Meanwhile,
meanwhile
the
the
actual
actual
tool
tool
data
data
is
is
stored
stored
in
in
the
the
cloud
cloud
in
in
what's
what's
known
known
as
as
a
a
content
content
link,
link
which
which
can
can
then
then
be
be
queried
queried
from
from
a
a
front
front
end
end
application
application
quickly
quickly
with
with
its
its
built
built
in
in
CDN
cdn
while
while
supporting
supporting
features
features
like
like
GraphQL,
graphql
webhooks,
webhooks
and
and
real
real
time
time
updates.
updates
This
this
has
has
been
been
Content
content
Platforms
platforms
in
in
100
100
seconds,
seconds
but
but
stay
stay
tuned
tuned
because
because
today
today
I've
i've
invited
invited
Cap
cap
from
from
Sanity
sanity
to
to
take
take
us
us
beyond
beyond
100
100
seconds
seconds
and
and
show
show
us
us
exactly
exactly
how
how
a
a
content
content
platform
platform
can
can
fit
fit
into
into
our
our
tech
tech
stack.
stack
Thank
thank
you
you
so
so
much
much
for
for
that
that
intro.
intro
Aloha,
aloha
everyone.
everyone
My
my
name
name
is
is
cap
cap
and
and
I
i
do
do
developer
developer
relations
relations
at
at
sanity.io.
sanity.io
So
so
Sanity
sanity
is
is
a
a
platform
platform
for
for
structured
structured
content.
content
As
as
a
a
content
content
platform,
platform
Sanity
sanity
helps
helps
you
you
manage
manage
and
and
deliver
deliver
your
your
content
content
in
in
ways
ways
you
you
may
may
have
have
not
not
thought
thought
possible.
possible
If
if
you're
you're
thinking
thinking
of
of
adding
adding
a
a
content
content
platform
platform
to
to
your
your
project,
project
Look
look
no
no
further
further
than
than
this
this
fully
fully
customizable
customizable
sanity
sanity
project,
project
product
product
I'm
i'm
about
about
to
to
show
show
you.
you
So,
so
content
content
can
can
be
be
a
a
lot
lot
of
of
different
different
things.
things
It
it
can
can
be
be
The
the
content
content
for
for
a
a
blog
blog
or
or
a
a
portfolio.
portfolio
It
it
could
could
be
be
the
the
video
video
content
content
on
on
a
a
course
course
platform.
platform
It
it
could
could
be
be
the
the
menu
menu
and
and
the
the
hours
hours
and
and
the
the
address
address
of
of
a
a
restaurant.
restaurant
It
it
could
could
be
be
a
a
car
car
manufacturer's
manufacturer's
content
content
and
and
the
the
number
number
of
of
cars
cars
that
that
were
were
made
made
in
in
a
a
quarter,
quarter
how
how
many
many
were
were
sent
sent
out,
out
and
and
how
how
many
many
were
were
purchased.
purchased
It
it
could
could
be
be
the
the
music
music
tracks
tracks
for
for
a
a
singer
singer
and
and
they're
they're
trying
trying
to
to
get
get
their
their
name
name
out
out
in
in
the
the
world,
world
so
so
they
they
wanna
wanna
save
save
it
it
all
all
in
in
one
one
spot.
spot
It
it
could
could
be
be
the
the
times
times
and
and
winners
winners
for
for
each
each
sporting
sporting
event
event
and
and
a
a
major
major
tournament.
tournament
You
you
get
get
the
the
picture.
picture
Content
content
is
is
everywhere,
everywhere
and
and
we
we
can
can
find
find
it
it
all
all
online
online
within
within
a
a
couple
couple
of
of
seconds.
seconds
So
so
with
with
most
most
projects,
projects
content
content
is
is
going
going
to
to
be
be
present.
present
It's
it's
best
best
to
to
manage
manage
it
it
and
and
know
know
where
where
your
your
content
content
is
is
going
going
from
from
the
the
beginning.
beginning
Incorporating
incorporating
a
a
content
content
platform
platform
saves
saves
you
you
time
time
in
in
the
the
long
long
run.
run
But
but
there
there
are
are
many
many
other
other
benefits
benefits
too,
too
and
and
let
let
me
me
tell
tell
you
you
about
about
those.
those
So
so
a
a
content
content
platform
platform
should
should
allow
allow
you
you
freedom
freedom
with
with
your
your
content.
content
One
one
of
of
the
the
biggest
biggest
reasons
reasons
why
why
most
most
developers
developers
or
or
content
content
creators
creators
Hesitate
hesitate
to
to
incorporate
incorporate
a
a
content
content
platform
platform
is
is
that
that
there's
there's
this
this
fear
fear
of
of
losing
losing
true
true
ownership
ownership
to
to
your
your
content,
content
to
to
your
your
stuff.
stuff
A
a
content
content
platform
platform
should
should
not
not
steal
steal
ownership.
ownership
It
it
should
should
allow
allow
you
you
to
to
own
own
it.
it
Of
of
course,
course
it's
it's
yours.
yours
It
it
should
should
allow
allow
you
you
to
to
deliver
deliver
your
your
Content
content
however
however
and
and
wherever
wherever
you
you
need
need
it
it
to
to
go.
go
It
it
should
should
also
also
allow
allow
you
you
to
to
structure
structure
and
and
manage
manage
it
it
however
however
it
it
best
best
fits
fits
your
your
needs.
needs
So
so
let
let
me
me
show
show
you
you
how
how
with
with
Sanity
sanity
you
you
can
can
accomplish
accomplish
all
all
of
of
those
those
things.
things
Built
built
with
with
React,
react
there
there
is
is
a
a
Sanity
sanity
dot
dot
io
io
backend
backend
UI
ui
for
for
the
the
content
content
called
called
Sanity
sanity
Studio.
studio
The
the
studio
studio
is
is
fully
fully
customizable.
customizable
You
you
structure
structure
your
your
content
content
or
or
your
your
data
data
however
however
you
you
need.
need
And
and
because
because
it's
it's
built
built
with
with
React,
react
if
if
you
you
know
know
React,
react
you
you
can
can
code
code
it
it
up
up
to
to
be
be
however
however
you
you
want
want
it
it
to
to
look.
look
And
and
then
then
there's
there's
a
a
nifty
nifty
thing
thing
called
called
Portable
portable
text.
text
Portable
portable
text
text
is
is
storing
storing
your
your
rich
rich
text
text
in
in
JSON
json
format.
format
That
that
JSON
json
format
format
can
can
be
be
reused
reused
Everywhere.
everywhere
Mobile,
mobile
desktop,
desktop
a
a
different
different
front
front
end,
end
etcetera.
etcetera
More
more
on
on
that
that
in
in
a
a
little.
little
So
so
we
we
should
should
be
be
treating
treating
our
our
content
content
as
as
data.
data
And
and
because
because
our
our
content
content
is
is
data,
data
we
we
wanna
wanna
treat
treat
it
it
as
as
such.
such
So
so
wherever
wherever
you
you
need
need
your
your
data
data
to
to
go
go
or
or
do
do
with
with
Sanity,
sanity
the
the
possibilities
possibilities
are
are
nearly
nearly
endless.
endless
Using
using
Sanity
sanity
allows
allows
for
for
full
full
customization
customization
of
of
how
how
your
your
structured
structured
content
content
looks
looks
for
for
editors,
editors
developers,
developers
anyone
anyone
manipulating
manipulating
the
the
content.
content
It
it
also
also
allows
allows
for
for
the
the
ability
ability
to
to
reshape
reshape
and
and
present
present
your
your
content
content
in
in
any
any
format.
format
So
so
using
using
Sanity
sanity
and
and
the
the
Content
content
Lake,
lake
you
you
now
now
have
have
a
a
real
real
time
time
database
database
That
that
gives
gives
you
you
access
access
to
to
your
your
content
content
however
however
and
and
wherever
wherever
you
you
need.
need
You
you
know
know
how
how
you
you
redesign
redesign
your
your
website
website
every
every
couple
couple
of
of
months
months
just
just
because
because
Or
or
you
you
wanna
wanna
try
try
that
that
new
new
framework
framework
with
with
structured
structured
content,
content
you
you
can
can
redesign.
redesign
You
you
can
can
try
try
a
a
new
new
framework
framework
at
at
any
any
time.
time
So
so
go
go
ahead
ahead
use
use
that
that
new
new
JavaScript
javascript
framework
framework
and
and
continue
continue
using
using
your
your
content
content
like
like
you've
you've
been
been
doing.
doing
So
so
let
let
me
me
show
show
you
you
how
how
with
with
sanity.
sanity
Io
io
To
to
get
get
a
a
project
project
up
up
and
and
running
running
in
in
just
just
a
a
few
few
minutes.
minutes
Remember,
remember
what
what
I
i
show
show
you
you
today
today
can
can
be
be
used
used
on
on
any
any
front
front
end.
end
I'll
i'll
show
show
you
you
how
how
to
to
spin
spin
up
up
a
a
project
project
And
and
also
also
a
a
couple
couple
other
other
cool
cool
things
things
to
to
get
get
you
you
going
going
right
right
out
out
of
of
the
the
box.
box
So
so
let's
let's
go
go
ahead
ahead
and
and
let's
let's
structure
structure
our
our
content.
content
Alright.
alright
So
so
to
to
get
get
started,
started
go
go
to
to
sanity.io.
sanity.io
Here,
here
we're
we're
going
going
to
to
find
find
these
these
two
two
buttons,
buttons
get
get
started,
started
get
get
started,
started
click
click
on
on
either
either
one
one
of
of
these.
these
So
so
So
so
once
once
we
we
click
click
on
on
that,
that
we'll
we'll
see
see
official
official
starters.
starters
You
you
can
can
choose
choose
one
one
of
of
these,
these
but
but
we're
we're
actually
actually
going
going
to
to
do
do
this
this
NPM
npm
install.
install
So
so
So
so
we're
we're
gonna
gonna
be
be
installing
installing
globally
globally
the
the
sanity
sanity
CLI
cli
and
and
we're
we're
going
going
to
to
be
be
running
running
the
the
command
command
sanity
sanity
init.
init
That
that
will
will
start
start
our
our
very
very
own
own
Sanity
sanity
project.
project
So
so
what
what
I
i
did
did
is
is
I
i
copied
copied
that
that
command
command
and
and
I
i
now
now
went
went
to
to
my
my
terminal.
terminal
And
and
in
in
my
my
terminal,
terminal
I'm
i'm
going
going
to
to
paste
paste
that
that
command
command
in,
in
Hit
hit
enter
enter
and
and
then
then
it
it
will
will
install
install
the
the
CLI
cli
for
for
me
me
and
and
it
it
will
will
initialize
initialize
a
a
brand
brand
new
new
project.
project
If
if
you
you
have
have
not
not
logged
logged
in
in
using
using
Sanity
sanity
on
on
your
your
local
local
computer.
computer
You
you
will
will
be
be
prompted
prompted
you
you
may
may
be
be
prompted
prompted
to
to
log
log
in
in
using
using
either
either
Google,
google
GitHub,
github
or
or
email
email
password.
password
Choose
choose
one
one
of
of
those.
those
Remember
remember
what
what
you
you
choose
choose
because
because
we're
we're
gonna
gonna
need
need
that
that
in
in
the
the
future.
future
So
so
I'm
i'm
going
going
to
to
create
create
new
new
project.
project
I'll
i'll
hit
hit
enter
enter
and
and
we're
we're
gonna
gonna
name
name
our
our
project.
project
So
so
This
this
is
is
whatever
whatever
you
you
want
want
it
it
to
to
be
be
named,
named
whatever
whatever
you
you
want
want
your
your
sanity
sanity
project
project
to
to
be
be
named.
named
I'm
i'm
gonna
gonna
name
name
it
it
Fireship.
fireship
So,
so
I'm
i'm
gonna
gonna
hit
hit
enter
enter
And
and
then,
then
we
we
are
are
going
going
to
to
be
be
asked
asked
about
about
the
the
dataset.
dataset
So
so
we
we
are
are
going
going
to
to
be
be
using
using
the
the
default
default
dataset.
dataset
So
so
I'm
i'm
just
just
gonna
gonna
hit
hit
y
y
for
for
yes.
yes
It
it
will
will
be
be
called
called
production.
production
So
so
So
so
we're
we're
gonna
gonna
want
want
that.
that
Is
is
that
that
path
path
correct?
correct
It
it
is.
is
So
so
I'm
i'm
gonna
gonna
hit
hit
enter.
enter
Now,
now
we
we
can
can
choose
choose
from
from
movie,
movie
ecommerce,
ecommerce
blog
blog
or
or
clean
clean
project.
project
We
we
are
are
going
going
to
to
do
do
blog
blog
for
for
this
this
one.
one
The
the
other
other
ones
ones
have
have
like,
like
uh,
uh
so
so
they'll
they'll
have
have
like
like
pre
pre
pre
pre
built
built
schemas
schemas
With,
with
um,
um
some
some
data
data
in
in
it.
it
The
the
blob
blob
one
one
is
is
a
a
pre
pre
built
built
schema
schema
with
with
no
no
data
data
in
in
it.
it
And
and
then
then
the
the
clean
clean
one,
one
of
of
course,
course
has
has
nothing.
nothing
So
so
you
you
would
would
just
just
build
build
your
your
own
own
schemas
schemas
out.
out
With
with
this
this
one,
one
we
we
don't
don't
want
want
any
any
pre
pre
built
built
data.
data
We
we
just
just
want
want
pre
pre
built
built
schemas.
schemas
And
and
it
it
is
is
done.
done
Alright.
alright
So
so
we're
we're
going
going
to
to
CD
cd
into
into
our
our
project.
project
And
and
now
now
we
we
are
are
in
in
it.
it
We
we
can
can
run
run
other
other
either
either
sanity
sanity
docs,
docs
manage,
manage
help,
help
any
any
of
of
those,
those
but
but
we
we
actually
actually
want
want
to
to
open
open
this
this
up
up
in
in
our
our
text
text
editor
editor
of
of
choice.
choice
So
so
I'm
i'm
gonna
gonna
actually
actually
open
open
it
it
in
in
Versus
versus
Code.
code
There's
there's
a
a
shortcut
shortcut
that
that
I
i
have
have
installed,
installed
code
code
space
space
period.
period
If
if
you
you
have
have
that,
that
use
use
that.
that
If
if
not,
not
go
go
to
to
your
your
Versus
versus
Code
code
or
or
text
text
editor
editor
and
and
open
open
Yours
yours
up.
up
Now,
now
I'm
i'm
going
going
to
to
make
make
this
this
big.
big
Alright.
alright
So
so
let's
let's
go
go
through
through
a
a
little
little
bit
bit
of
of
this
this
file
file
structure.
structure
So
so
the
the
sanity
sanity
dot
dot
JSON,
json
if
if
we
we
go
go
here,
here
we
we
actually
actually
can
can
find
find
our
our
project
project
ID
id
and
and
the
the
name
name
of
of
it.
it
So
so
we
we
named
named
it
it
Fireship.
fireship
We
we
have
have
that.
that
This
this
project
project
ID
id
is
is
what
what
you
you
will
will
need
need
if
if
you
you
need
need
something
something
else
else
to
to
speak
speak
to
to
your
your
content
content
link.
link
So
so
say
say
you
you
have
have
your
your
React
react
front
front
end
end
or
or
your
your
Next
next
JS
js
front
front
end
end
and
and
you
you
want
want
it
it
to
to
speak
speak
to
to
this
this
Dataset,
dataset
then
then
you
you
will
will
need
need
this
this
project
project
ID.
id
So
so
that
that
is
is
an
an
easy
easy
way
way
to
to
find
find
it.
it
Now,
now
I
i
also
also
want
want
to
to
point
point
out
out
the
the
schemas
schemas
folder.
folder
In
in
here,
here
if
if
we
we
did
did
the
the
clean
clean
project
project
when
when
we
we
were
were
answering
answering
those
those
questions,
questions
this
this
would
would
pretty
pretty
much
much
be
be
empty.
empty
Just
just
a
a
couple
couple
of
of
things
things
would
would
be
be
in
in
here.
here
But
but
like
like
author,
author
category,
category
post,
post
those
those
would
would
not
not
be
be
here.
here
Now
now
if
if
we
we
went
went
to
to
schema
schema
dotjs,
dotjs
Here's
here's
where
where
we
we
import
import
and
and
use
use
all
all
of
of
our
our
different
different
schema
schema
files.
files
So
so
we
we
have
have
block
block
content,
content
category,
category
post
post
author
author
that
that
also
also
matches
matches
up
up
with
with
all
all
these
these
over
over
here.
here
And
and
then
then
down
down
here
here
is
is
when
when
we
we
use
use
it.
it
So
so
we
we
import
import
it
it
and
and
then
then
use
use
it.
it
If
if
you
you
make
make
a
a
new
new
file,
file
make
make
sure
sure
you
you
come
come
in
in
here
here
and
and
import
import
and
and
use.
use
Now,
now
Now,
now
I'm
i'm
gonna
gonna
go
go
to
to
post.
post
This
this
is
is
our
our
document
document
type.
type
Now,
now
Sanity
sanity
uses
uses
schema
schema
types
types
and
and
in
in
schema
schema
types,
types
document
document
is
is
one
one
of
of
them.
them
There's
there's
also
also
string,
string
slug,
slug
reference,
reference
image,
image
and
and
we'll
we'll
go
go
through
through
a
a
couple
couple
of
of
these
these
and
and
I'll
i'll
show
show
you
you
what
what
they
they
look
look
like.
like
This
this
one
one
is
is
a
a
our
our
document
document
type
type
post
post
and
and
it
it
has
has
an
an
array
array
of
of
fields.
fields
So
so
there's
there's
title,
title
there's
there's
slug.
slug
But
but
let
let
me
me
actually
actually
just
just
show
show
you
you
what
what
this
this
looks
looks
like
like
on
on
the
the
browser
browser
side,
side
on
on
the
the
Sanity
sanity
Studio
studio
front
front
end
end
side,
side
the
the
UI
ui
side
side
of
of
it.
it
So
so
I'm
i'm
gonna
gonna
open
open
up
up
my,
my
uh,
uh
terminal.
terminal
I
i
used
used
control
control
tilde
tilde
to
to
open
open
it
it
up
up
within
within
Versus
versus
Code.
code
You
you
can
can
open
open
it
it
up
up
however
however
you
you
want.
want
And
and
I'm
i'm
going
going
to
to
run
run
the
the
command
command
sanity
sanity
start.
start
So
so
run
run
that
that
command,
command
hit
hit
enter,
enter
And
and
it's
it's
starting
starting
up
up
our
our
studio,
studio
and
and
it
it
will
will
live
live
at
at
local
local
host
host
3333.
3333
So
so
it's
it's
ready.
ready
Let's
let's
go
go
back
back
to
to
our
our
browser,
browser
local
local
host
host
3333.
3333
And
and
here,
here
remember,
remember
whatever
whatever
you
you
chose
chose
when
when
you
you
did
did
the
the
login
login
at
at
the
the
beginning,
beginning
choose
choose
here.
here
So
so
I'm
i'm
gonna
gonna
do
do
Google,
google
and
and
I
i
am
am
now
now
authorized.
authorized
So
so
because
because
it
it
is
is
mine,
mine
I
i
have
have
authorization
authorization
to
to
it.
it
If
if
you
you
want
want
to
to
give
give
someone
someone
else
else
authorization
authorization
to
to
it,
it
go
go
to
to
manage
manage
dot
dot
sanity.io
sanity.io
and
and
you
you
can
can
add
add
more
more
users.
users
So
so
this
this
is
is
what
what
our
our
studio
studio
looks
looks
like.
like
It
it
has
has
the
the
name.
name
You
you
can
can
search
search
through
through
your
your
content.
content
Desk,
desk
Vision.
vision
We'll
we'll
get
get
to
to
the
the
Vision
vision
plugin
plugin
in
in
a
a
little
little
bit.
bit
But
but
here
here
are
are
our
our
3
3
document
document
types.
types
So
so
post,
post
Nothing.
nothing
Let's
let's
actually
actually
add
add
a
a
new
new
post.
post
So
so
let's
let's
do
do
my
my
first
first
blog
blog
post.
post
We
we
will
will
generate
generate
a
a
slug.
slug
Author
author
is
is
let
let
me
me
pull
pull
this
this
down.
down
Author
author
is
is
a
a
Reference.
reference
It's
it's
referencing
referencing
this
this
author
author
document.
document
So,
so
before
before
we
we
actually
actually
Can
can
see
see
anything
anything
in
in
this
this
drop
drop
down.
down
We
we
need
need
to
to
go
go
make
make
an
an
author.
author
So
so
we
we
can
can
leave
leave
all
all
this
this
here.
here
I'm
i'm
gonna
gonna
go
go
back
back
to
to
content,
content
click
click
on
on
author,
author
and
and
let's
let's
make
make
So
so
I'm
i'm
gonna
gonna
click
click
on
on
this
this
little
little
pencil.
pencil
I'm
i'm
going
going
to
to
make
make
a
a
new
new
author.
author
We'll
we'll
just
just
do
do
my
my
name,
name
generate,
generate
And
and
I
i
am
am
cap.
cap
And
and
then
then
publish
publish
that.
that
Awesome.
awesome
So
so
now
now
that's
that's
published,
published
let's
let's
go
go
back
back
to
to
our
our
post,
post
back
back
to
to
the
the
one
one
that
that
we
we
were
were
working
working
on.
on
And
and
if
if
I
i
do
do
the
the
drop
drop
down,
down
we
we
now
now
see
see
The
the
author
author
I
i
just
just
made.
made
If
if
we
we
had
had
a
a
picture,
picture
if
if
I
i
had
had
added
added
a
a
picture
picture
to
to
that,
that
this
this
would
would
be
be
the
the
little
little
thumbnail
thumbnail
of
of
that
that
picture.
picture
Then
then
we
we
have
have
main
main
image,
image
And
and
let's
let's
add
add
an
an
a
a
main
main
image.
image
Then
then
we
we
have
have
categories,
categories
publish
publish
at,
at
and
and
body.
body
So
so
with
with
main
main
image
image
let
let
me
me
actually
actually
make
make
this
this
just
just
a
a
little
little
bit
bit
smaller.
smaller
Main
main
image.
image
There
there
are
are
3
3
ways
ways
to
to
upload
upload
a
a
main
main
image.
image
You
you
can
can
click
click
on
on
upload
upload
and
and
it
it
will
will
bring
bring
down
down
the
the
file
file
structure,
structure
like
like
the
the
files
files
from
from
your
your
own
own
computer.
computer
You
you
can
can
drop
drop
in
in
an
an
image.
image
So
so
just
just
like
like
drag
drag
and
and
drop,
drop
or
or
you
you
can
can
paste
paste
in
in
an
an
image
image
and
and
we're
we're
gonna
gonna
do
do
that.
that
So
so
I'm
i'm
gonna
gonna
go
go
to
to
Unsplash
unsplash
and
and
let's
let's
look
look
up,
up
Cats.
cats
We'll
we'll
do
do
this
this
cat
cat
with
with
the
the
butterfly.
butterfly
So
so
we're
we're
gonna
gonna
copy
copy
image.
image
Go
go
back
back
here,
here
and
and
I'm
i'm
gonna
gonna
do
do
command
command
v
v
to
to
paste
paste
it
it
in.
in
And
and
now
now
we
we
have
have
Our
our
cat
cat
and
and
butterfly
butterfly
image.
image
And
and
there
there
we
we
go.
go
Now,
now
let
let
me
me
show
show
you
you
a
a
really
really
cool
cool
thing
thing
about
about
sanity
sanity
and
and
images.
images
So
so
I
i
just
just
unzoomed
unzoomed
this
this
a
a
little
little
bit
bit
more
more
because
because
I
i
need
need
to
to
show
show
you
you
everything
everything
that's
that's
going
going
on.
on
But
but
if
if
I
i
click
click
on
on
edit
edit
details,
details
In
in
here,
here
I
i
have
have
some
some
views
views
of
of
my
my
image.
image
So
so
this
this
is
is
a
a
really
really
cool
cool
thing
thing
about
about
Sanity
sanity
is
is
I
i
upload
upload
once
once
and
and
it
it
will
will
work
work
for
for
all
all
of
of
these
these
aspect
aspect
ratios.
ratios
I
i
can
can
crop
crop
here
here
And
and
this
this
is
is
the
the
crop
crop
and
and
I
i
can
can
do
do
hotspot.
hotspot
Now,
now
hotspot
hotspot
is
is
making
making
sure
sure
let
let
me
me
actually
actually
show
show
you
you
the
the
thumbnail
thumbnail
as
as
I'm
i'm
doing
doing
it.
it
So
so
Hotspot
hotspot
is
is
making
making
sure
sure
that
that
whatever
whatever
is
is
in
in
this
this
Hotspot
hotspot
is
is
always
always
in
in
view
view
no
no
matter
matter
what
what
type
type
of
of
aspect
aspect
ratio
ratio
my
my
image
image
is.
is
So
so
So
so
if
if
I
i
wanna
wanna
make
make
sure
sure
that
that
the
the
cat's
cat's
ear
ear
is
is
always
always
in
in
view,
view
notice
notice
how
how
the
the
panorama
panorama
changed
changed
or
or
if
if
I
i
want
want
the
the
cat's
cat's
nose
nose
always
always
in
in
view.
view
Notice
notice
how
how
it's
it's
changing.
changing
So
so
I
i
don't
don't
have
have
to
to
do,
do
um,
um
like,
like
multiple
multiple
uploads
uploads
to
to
make
make
sure
sure
that
that
my
my
that
that
my
my
crop
crop
is
is
good,
good
that
that
my
my
hotspot
hotspot
is
is
always
always
on.
on
Sanity
sanity
will
will
make
make
sure
sure
that
that
this
this
spot
spot
that
that
your
your
hotspot
hotspot
is
is
on
on
is
is
always
always
in
in
view,
view
and
and
that's
that's
how
how
that
that
works.
works
So
so
then
then
you
you
just
just
exit
exit
out,
out
And
and
there's
there's
my
my
hotspot
hotspot
and
and
crop
crop
for
for
my
my
image.
image
So,
so
here
here
is
is
the
the
body
body
of
of
my
my
first
first
blog
blog
post.
post
Now,
now
this
this
is
is
the
the
rich
rich
text
text
editor,
editor
and
and
in
in
here
here
will
will
live
live
our
our
portable
portable
text.
text
Here
here
is
is
the
the
body
body
of
of
my
my
blog
blog
Post,
post
I
i
hope
hope
you
you
like
like
it.
it
Old
old
fashioned
fashioned
smiley
smiley
face.
face
And
and
so,
so
here
here
is
is
our
our
portable
portable
text.
text
Portable
portable
text
text
will
will
live
live
in
in
this
this
rich
rich
text
text
editor.
editor
And
and
this
this
is
is
the
the
Sanity
sanity
way
way
of
of
storing
storing
our
our
rich
rich
text.
text
So
so
you
you
know
know
how
how
when
when
you
you
get
get
HTML
html
and
and
you
you
wanna
wanna
put
put
it
it
into
into
React
react
Application.
application
It
it
kind
kind
of
of
isn't
isn't
very
very
intuitive
intuitive
because
because
you
you
have
have
to
to
do
do
the
the
dangerously
dangerously
set
set
prop
prop
and
and
then
then
you
you
kind
kind
of
of
lose
lose
control
control
of
of
it.
it
So
so
because
because
portable
portable
text
text
is
is
data,
data
it
it
becomes
becomes
JSON
json
and
and
so
so
you
you
can
can
actually
actually
put
put
it
it
into
into
your
your
React
react
application.
application
It
it
makes
makes
it
it
more
more
intuitive
intuitive
as
as
you
you
Pass
pass
it
it
along
along
to
to
mobile,
mobile
to
to
desktop,
desktop
to
to
React,
react
to
to
Vue.
vue
If
if
you
you
wanna
wanna
use
use
a
a
native
native
app
app
And
and
you're
you're
using
using
HTML,
html
it
it
would
would
be
be
harder.
harder
JSON
json
would
would
make
make
it
it
easier
easier
and
and
this
this
is
is
saved
saved
as
as
a
a
JSON
json
format.
format
So
so
this
this
means
means
that
that
You
you
can
can
now
now
query
query
for
for
your
your
content.
content
So
so
say
say
you
you
wanted
wanted
to
to
find
find
out
out
all
all
the
the
blog
blog
posts
posts
that
that
had
had
code
code
blocks
blocks
in
in
it,
it
you
you
can
can
do
do
that
that
because
because
all
all
of
of
this
this
is
is
stored
stored
as
as
data.
data
Your
your
content
content
is
is
your
your
data,
data
and
and
that
that
is
is
portable
portable
text.
text
Now,
now
let
let
me
me
actually
actually
show
show
you.
you
So
so
here's
here's
our
our
first
first
blog
blog
post.
post
Let's
let's
publish
publish
it.
it
Let
let
me
me
actually
actually
show
show
you
you
the
the
inspect
inspect
to
to
our
our
blog
blog
post.
post
If
if
you
you
click
click
on
on
those
those
three
three
dots,
dots
click
click
on
on
inspect,
inspect
Here
here
is
is
all
all
of
of
the
the
JSON
json
of
of
our
our
blog
blog
post.
post
We
we
have
have
our
our
main
main
image.
image
We
we
have
have
the
the
title.
title
We
we
have
have
all
all
of
of
our
our
rich
rich
text.
text
So
so
that
that
is
is
how
how
it
it
looks,
looks
that's
that's
how
how
it's
it's
stored,
stored
and
and
this
this
is
is
how
how
we
we
can
can
query
query
for
for
it.
it
Things
things
like
like
this.
this
Alright.
alright
So
so
let
let
me
me
show
show
you
you
a
a
really
really
cool
cool
feature
feature
about
about
Main
main
image.
image
I
i
know
know
we
we
already
already
had
had
hotspot
hotspot
and
and
crop,
crop
but
but
let
let
me
me
show
show
you
you
another
another
thing.
thing
So
so
if
if
I
i
go
go
to
to
my
my
vision
vision
plugin
plugin
wait.
wait
Before
before
I
i
do
do
that,
that
I
i
actually
actually
have
have
to
to
go
go
to
to
the
the
3
3
dots,
dots
Inspect
inspect
and
and
I
i
need
need
to
to
find
find
my
my
main
main
image
image
reference.
reference
This
this
is
is
the
the
ID
id
to
to
my
my
image.
image
So
so
I'm
i'm
gonna
gonna
copy
copy
that.
that
So
so
under
under
my
my
main
main
image,
image
the
the
asset
asset
ref,
ref
I'm
i'm
gonna
gonna
come
come
to
to
my
my
Vision
vision
plugin.
plugin
Now,
now
the
the
Vision
vision
plugin,
plugin
this
this
is
is
where
where
we
we
can
can
query
query
for
for
our
our
own
own
content.
content
We're
we're
gonna
gonna
use
use
grok
grok
today.
today
You
you
can
can
use
use
either
either
GraphQL
graphql
or
or
Grok
grok
with
with
Sanity.
sanity
Grok
grok
is
is
an
an
in
in
house
house
Sanity
sanity
made
made
query
query
language
language
and
and
I
i
will
will
show
show
you
you
how
how
it's
it's
done
done
just
just
a
a
little
little
bit.
bit
There
there
are
are
definitely
definitely
more
more
places
places
that
that
you
you
can
can
learn
learn
about
about
Grok.
grok
Um,
um
but,
but
yeah.
yeah
Let
let
me
me
start
start
off.
off
So,
so
by
by
doing
doing
the
the
asterisk,
asterisk
I
i
am
am
grabbing
grabbing
all
all
of
of
my
my
content
content
link.
link
I'm
i'm
gonna
gonna
do
do
the
the
square
square
brackets
brackets
to
to
filter
filter
down.
down
So
so
I'm
i'm
gonna
gonna
do
do
underscore
underscore
ID
id
is
is
equal
equal
to
to
and
and
I'm
i'm
gonna
gonna
paste
paste
in
in
that
that
ID
id
that
that
I
i
grabbed
grabbed
from
from
the
the
image.
image
K.
k
Now
now
I'm
i'm
gonna
gonna
run
run
that
that
query.
query
And
and
in
in
here,
here
this
this
is
is
all
all
of
of
the
the
content
content
we
we
get
get
back
back
from
from
that
that
image.
image
So
so
created
created
at
at
The
the
idea
idea
of
of
it
it
the
the
idea
idea
will
will
match
match
what
what
we
we
just
just
had
had
over
over
here.
here
The
the
type,
type
but
but
I
i
really
really
wanna
wanna
point
point
this
this
part
part
out.
out
So
so
under
under
the
the
metadata,
metadata
we
we
get
get
dimensions.
dimensions
We
we
also
also
get
get
the
the
palette.
palette
This
this
palette
palette
is
is
pretty
pretty
awesome.
awesome
In
in
here,
here
we
we
get
get
our
our
dark
dark
muted,
muted
dark
dark
vibrant,
vibrant
light
light
vibrant,
vibrant
muted.
muted
All
all
the
the
colors
colors
that
that
are
are
part
part
of
of
this
this
image
image
and
and
a
a
optimal
optimal
foreground
foreground
color
color
for
for
it.
it
So
so
dark
dark
vibrant
vibrant
Takes
takes
up
up
1.93
1.93
of
of
the
the
image.
image
This
this
is
is
the
the
color
color
and
and
this
this
would
would
be
be
a
a
good
good
foreground
foreground
color
color
for
for
it.
it
So
so
if
if
you
you
put
put
text
text
over
over
this
this
part
part
of
of
the
the
image,
image
Um,
um
it
it
would
would
be
be
really
really
great
great
for
for
accessibility,
accessibility
this
this
color
color
for
for
the
the
text.
text
Let's
let's
look
look
at
at
light
light
vibrant.
vibrant
So
so
So
so
it
it
takes
takes
up
up
that
that
much
much
of
of
the
the
image.
image
This
this
is
is
the
the
color
color
and
and
this
this
would
would
be
be
a
a
good
good
foreground
foreground
color.
color
So
so
that's
that's
just
just
a
a
really
really
awesome
awesome
thing
thing
to
to
To
to
note
note
that
that
you
you
can
can
have
have
that
that
you
you
have
have
this
this
at
at
your
your
fingertips
fingertips
with
with
all
all
the
the
images.
images
So
so
you
you
can
can
find
find
that,
that
go
go
to
to
your
your
Vision
vision
plug
plug
plugin,
plugin
Query
query
for
for
that
that
ID
id
and
and
you
you
have
have
all
all
of
of
this
this
at
at
your
your
fingertips.
fingertips
So
so
really
really
great.
great
Okay.
okay
So
so
let's
let's
actually
actually
add
add
a
a
couple
couple
things
things
to
to
our
our
studio.
studio
So
so
we
we
have
have
what
what
it
it
comes
comes
with,
with
But
but
let's
let's
add
add
a
a
couple
couple
things.
things
So
so
I'm
i'm
gonna
gonna
go
go
back
back
to
to
my
my
code
code
and
and
under
under
title
title
within
within
the
the
post
post
dot
dot
JS
js
file
file
in
in
the
the
schemas
schemas
folder.
folder
Let's
let's
go
go
underneath
underneath
here
here
and
and
type
type
in
in
description.
description
And
and
we'll
we'll
do,
do
uh,
uh
keep
keep
titles
titles
Short
short
and
and
sweet.
sweet
Let's
let's
do
do
a
a
smiley
smiley
face.
face
Save
save
that.
that
And
and
if
if
we
we
go
go
back,
back
Keep
keep
titles
titles
short
short
and
and
sweet.
sweet
So
so
it's
it's
just
just
a
a
quick
quick
little
little
description
description
that
that
you
you
can
can
have
have
and
and
you
you
can
can
start
start
customizing
customizing
your
your
studio.
studio
But
but
let's
let's
create
create
a
a
whole
whole
new
new
Schema
schema
type.
type
So
so
if
if
we
we
go
go
to
to
the
the
schema
schema
types
types
in
in
the
the
docs
docs
for
for
Sanity,
sanity
we
we
will
will
find
find
an
an
entire
entire
list
list
All
all
of
of
the
the
schema
schema
types
types
that
that
we
we
can
can
use.
use
So
so
we've
we've
been
been
working
working
in
in
document.
document
We've
we've
done
done
the
the
string.
string
We
we
have
have
done
done
image.
image
Let's
let's
add
add
a
a
number.
number
So,
so
if
if
we
we
go
go
to
to
number,
number
this
this
is
is
what
what
it
it
will
will
look
look
like,
like
and
and
there's
there's
the
the
properties,
properties
there's
there's
options,
options
And
and
then
then
and
and
validation.
validation
But
but
here's
here's
what
what
we
we
need
need
for
for
our
our
schema.
schema
So
so
I'm
i'm
gonna
gonna
copy
copy
that,
that
take
take
it
it
over.
over
Let's
let's
do
do
it
it
right
right
after
after
this
this
the
the
slug.
slug
Add
add
a
a
comma
comma
to
to
separate
separate
those
those
objects,
objects
And
and
let's
let's
change
change
the
the
title.
title
So
so
we
we
just
just
need
need
the
the
title
title
name
name
and
and
type
type
for
for
our
our
new
new
schema
schema
type.
type
So
so
title
title
will
will
do
do
Time
time
time
time
to
to
read.
read
That
that
is
is
the
the
title
title
that
that
will
will
live
live
within
within
our
our
studio.
studio
So
so
this
this
is
is
the
the
title.
title
This
this
is
is
the
the
title.
title
The
the
name
name
is
is
the
the
name
name
of
of
the
the
field.
field
Time
time
to
to
read.
read
Type,
type
we'll
we'll
keep
keep
as
as
number.
number
I'm
i'm
gonna
gonna
save
save
that.
that
Come
come
back
back
here
here
and
and
now
now
we
we
have
have
a
a
brand
brand
new
new
time
time
to
to
read.
read
Notice
notice
how
how
these
these
little
little
arrows
arrows
come
come
up.
up
I
i
could
could
Add
add
that
that
way
way
or
or
I
i
could
could
edit
edit
this
this
way.
way
So
so
let's
let's
actually
actually
add
add
a
a
validation.
validation
Let's
let's
make
make
sure
sure
that
that
you
you
can't
can't
do
do
longer
longer
than
than
20
20
minutes
minutes
time
time
to
to
read.
read
K.
k
So
so
I'm
i'm
gonna
gonna
come
come
up
up
here
here
and
and
these
these
are
are
all
all
the
the
different
different
types
types
of
of
validations
validations
we
we
can
can
do.
do
Required,
required
min
min
number,
number
less
less
than.
than
Let's
let's
learn
learn
more
more
about
about
validation.
validation
And
and
if
if
we
we
come
come
down
down
here,
here
we
we
want
want
this
this
line.
line
So
so
validation.
validation
And
and
I'll
i'll
actually
actually
just
just
go
go
just
just
to
to
required
required
because
because
we
we
want
want
required.
required
I'm
i'm
gonna
gonna
copy
copy
that
that
line,
line
go
go
back
back
to
to
my
my
number,
number
and
and
paste
paste
that
that
in.
in
And
and
then
then
let's
let's
also
also
add
add
the
the
less
less
than
than
20.
20
So
so
no
no
matter
matter
what,
what
we
we
can't
can't
make
make
the
the
number
number
go
go
above
above
20.
20
Otherwise,
otherwise
we'll
we'll
get
get
a
a
warning.
warning
Come
come
back
back
here.
here
And
and
last
last
number
number
we
we
put
put
in
in
was
was
88.
88
And
and
sure
sure
enough,
enough
it's
it's
giving
giving
us
us
an
an
error.
error
Must
must
be
be
less
less
than
than
20.
20
So
so
no
no
matter
matter
what,
what
if
if
we
we
just
just
keep
keep
going
going
down
down
until
until
we
we
get
get
it
it
below
below
20,
20
it's
it's
not
not
gonna
gonna
be
be
happy
happy
with
with
this.
this
19.
19
And
and
if
if
I
i
go
go
up,
up
error
error
again.
again
So
so
if
if
you
you
want
want
20
20
to
to
be
be
included,
included
then
then
we
we
would
would
change
change
this
this
to
to
21.
21
And
and
we
we
don't
don't
get
get
the
the
error,
error
but
but
the
the
moment
moment
we
we
go
go
go
go
up,
up
we
we
get
get
that
that
error
error
again.
again
So
so
that
that
is
is
a
a
validation
validation
rule
rule
to
to
make
make
sure
sure
that
that
It
it
stays
stays
within
within
the
the
numbers
numbers
that
that
you
you
want.
want
Alright.
alright
So
so
now
now
that
that
that's
that's
all
all
done,
done
let's
let's
publish
publish
that
that
and
and
let's
let's
get
get
our
our
sanity
sanity
studio
studio
Deployed.
deployed
So
so
what
what
we
we
need
need
to
to
do
do
is
is
we
we
need
need
to
to
go
go
back
back
to
to
our
our
code.
code
And
and
in
in
here,
here
I'm
i'm
gonna
gonna
keep
keep
this.
this
I'm
i'm
gonna
gonna
create
create
a
a
new
new
one
one
and
and
we
we
need
need
to
to
run
run
the
the
command
command
sanity
sanity
deploy.
deploy
Hit
hit
enter.
enter
Now,
now
studio
studio
host
host
name.
name
This
this
is
is
now
now
unique.
unique
So
so
When
when
you
you
created
created
the
the
project
project
with
with
me,
me
you
you
could
could
have
have
used
used
the
the
name
name
FireShip
fireship
alongside
alongside
me
me
because
because
that's
that's
local,
local
but
but
this
this
one
one
is
is
unique.
unique
I
i
am
am
gonna
gonna
use
use
the
the
name
name
FireShip,
fireship
see
see
if
if
that's
that's
available.
available
And
and
it
it
looks
looks
like
like
it
it
is
is
because
because
it's
it's
not
not
giving
giving
me
me
an
an
error.
error
So
so
now
now
FireShip
fireship
is
is
now
now
taken,
taken
so
so
you
you
can't
can't
use
use
that.
that
And
and
by
by
the
the
time
time
you're
you're
watching
watching
this,
this
maybe
maybe
FireShip
fireship
1
1
and
and
FireShip
fireship
2
2
are
are
also
also
taken.
taken
So
so
it
it
has
has
to
to
be
be
unique.
unique
And
and
once
once
it
it
is
is
done,
done
My
my
studio
studio
will
will
now
now
live
live
at
at
fireship.sanity.studio.
fireship.sanity.studio
And
and
I
i
will
will
have
have
I
i
will
will
have
have
authorization
authorization
to
to
view
view
it
it
And
and
anyone
anyone
else
else
I
i
give
give
authorization
authorization
can
can
view
view
it.
it
So
so
there's
there's
my
my
new
new
URL.
url
Come
come
back
back
here,
here
fire
fire
ship
ship
dot
dot
sanity.studio.
sanity.studio
And
and
here
here
is
is
my
my
newly
newly
deployed
deployed
studio
studio
with
with
all
all
my
my
stuff,
stuff
first
first
blog
blog
post,
post
everything
everything
that
that
I
i
have.
have
Now,
now
let
let
me
me
show
show
you
you
a
a
really
really
cool
cool
thing.
thing
I'm
i'm
gonna
gonna
shrink
shrink
this
this
a
a
little
little
bit.
bit
Pull
pull
this
this
one
one
out.
out
And
and
now
now
I
i
have
have
my
my
local
local
one
one
version
version
my
my
local
local
version
version
running
running
and
and
I
i
have
have
my
my
deployed
deployed
version
version
running.
running
Now,
now
these
these
2
2
are
are
the
the
same
same
studio,
studio
but
but
watch
watch
this.
this
So
so
anything
anything
I
i
do
do
in
in
my
my
local
local
version
version
Shows
shows
up
up
in
in
my
my
deployed
deployed
version.
version
Anything
anything
I
i
do
do
in
in
my
my
deployed
deployed
version
version
shows
shows
up
up
in
in
my
my
local
local
version.
version
And
and
if
if
I
i
do
do
anything,
anything
you
you
can
can
see
see
these
these
little
little
pencil
pencil
show
show
up
up
on
on
both
both
sides.
sides
If
if
I
i
click
click
on
on
that
that
little
little
pencil,
pencil
it
it
will
will
show
show
What
what
has
has
happened
happened
and
and
we
we
can
can
see
see
who
who
made
made
that
that
change.
change
And
and
if
if
I
i
come
come
over
over
here,
here
click
click
on
on
review
review
changes,
changes
we
we
can
can
revert
revert
that
that
change
change
from
from
either
either
Side.
side
Revert
revert
that
that
change.
change
We
we
don't
don't
want
want
it
it
and
and
it
it
disappears.
disappears
So
so
that
that
is
is
live
live
preview
preview
insanity
insanity
to
to
see
see
Both
both
the
the
local
local
side
side
and
and
the
the
deployed
deployed
side
side
working
working
together
together
live.
live
And
and
if
if
I
i
publish,
publish
it
it
will
will
be
be
published
published
on
on
both
both
sides
sides
and
and
yeah.
yeah
And
and
that
that
is
is
how
how
you
you
build
build
your
your
first
first
project
project
with
with
sanity.
sanity
Io.
io
Alright.
alright
So
so
we
we
have
have
our
our
own
own
content
content
link
link
up
up
and
and
running
running
that
that
we
we
can
can
query
query
against.
against
We
we
have
have
the
the
JSON
json
for
for
all
all
of
of
our
our
content,
content
and
and
the
the
content
content
can
can
be
be
used
used
across
across
all
all
platforms.
platforms
We're
we're
not
not
limited
limited
to
to
anything.
anything
So
so
thank
thank
you
you
so
so
much
much
for
for
watching.
watching
If
if
you
you
have
have
more
more
questions
questions
about
about
content
content
platforms
platforms
or
or
about
about
Sanity,
sanity
you
you
can
can
find
find
me
me
on
on
Twitter
twitter
at
at
capehe_ok
capehe_ok
Or
or
you
you
can
can
find
find
an
an
entire
entire
Sanity
sanity
Slack
slack
community
community
at
at
slack.sanity.
slack.sanity
Io.
io
Thank
thank
you
you
so
so
much
much
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
around.
around
success
The speakers discuss the benefits of using a content management system or CMS for managing content on websites and apps, including flexibility in managing content, structure, and editing. They also explain the benefits of a content platform, including the ability to create a fully customizable content platform and gain ownership of content. The process of creating a project, creating a schemas, and uploading a photo is also discussed, along with a tool called Sanity.io for managing content and using the file structure in the future. The speakers also explain how to use the Post. JS file in the schemas folder to create a description and add a new schema type, as well as how to add validations to a post and change the title for a new schema type. Finally, the speaker explains how to publish a new version of the code and use it in the local and deployed versions of the code.
Content Platforms Explained in 100 Seconds // Build your own with Sanity
Content platforms treat the content on your website or app like data. In the beginning, we had HTML websites where content was embedded directly in the code, but that was never going to scale well. The next generation of websites used a content management system or CMS where content is stored in a database then injected into an HTML template. This works great until you decide you want to migrate your app into a fancy new JavaScript framework, or maybe you want to display the same content on iOS, Palm OS, and Android, or you may just have multiple views for the same content within a single application. These demands and gave rise to the headless CMS, a tool that turns your content into a cloud based API so it can be accessed from any application. Today, a content platform is a critical layer of the modern tech stack where it serves as a single source of truth for your brand. And because it's completely decoupled from your application code and user database, you can take it with you anywhere. In addition, it gives you the ability to model and custom tailor your content for any situation. Rather than start from a cookie cutter solution, you can build your own schema with different fields for things like text and images and create relationships between items like you might in a relational database. It's a win for marketers because they have a single polished interface for managing content, but it's an even bigger win for us developers because we can now query content from any codebase in a consistent and structured way. One One tool that makes that possible is Sanity, a popular choice for Jamstack applications, which stands for JavaScript, APIs, and markup. Sanity is part of the a in the jamstack. It provides an open source studio where you can model your content with JavaScript and manage it in the browser. Meanwhile, the actual tool data is stored in the cloud in what's known as a content link, which can then be queried from a front end application quickly with its built in CDN while supporting features like GraphQL, webhooks, and real time updates. This has been Content Platforms in 100 seconds, but stay tuned because today I've invited Cap from Sanity to take us beyond 100 seconds and show us exactly how a content platform can fit into our tech stack. Thank you so much for that intro. Aloha, everyone. My name is cap and I do developer relations at sanity.io. So Sanity is a platform for structured content. As a content platform, Sanity helps you manage and deliver your content in ways you may have not thought possible. If you're thinking of adding a content platform to your project, Look no further than this fully customizable sanity project, product I'm about to show you. So, content can be a lot of different things. It can be The content for a blog or a portfolio. It could be the video content on a course platform. It could be the menu and the hours and the address of a restaurant. It could be a car manufacturer's content and the number of cars that were made in a quarter, how many were sent out, and how many were purchased. It could be the music tracks for a singer and they're trying to get their name out in the world, so they wanna save it all in one spot. It could be the times and winners for each sporting event and a major tournament. You get the picture. Content is everywhere, and we can find it all online within a couple of seconds. So with most projects, content is going to be present. It's best to manage it and know where your content is going from the beginning. Incorporating a content platform saves you time in the long run. But there are many other benefits too, and let me tell you about those. So a content platform should allow you freedom with your content. One of the biggest reasons why most developers or content creators Hesitate to incorporate a content platform is that there's this fear of losing true ownership to your content, to your stuff. A content platform should not steal ownership. It should allow you to own it. Of course, it's yours. It should allow you to deliver your Content however and wherever you need it to go. It should also allow you to structure and manage it however it best fits your needs. So let me show you how with Sanity you can accomplish all of those things. Built with React, there is a Sanity dot io backend UI for the content called Sanity Studio. The studio is fully customizable. You structure your content or your data however you need. And because it's built with React, if you know React, you can code it up to be however you want it to look. And then there's a nifty thing called Portable text. Portable text is storing your rich text in JSON format. That JSON format can be reused Everywhere. Mobile, desktop, a different front end, etcetera. More on that in a little. So we should be treating our content as data. And because our content is data, we wanna treat it as such. So wherever you need your data to go or do with Sanity, the possibilities are nearly endless. Using Sanity allows for full customization of how your structured content looks for editors, developers, anyone manipulating the content. It also allows for the ability to reshape and present your content in any format. So using Sanity and the Content Lake, you now have a real time database That gives you access to your content however and wherever you need. You know how you redesign your website every couple of months just because Or you wanna try that new framework with structured content, you can redesign. You can try a new framework at any time. So go ahead use that new JavaScript framework and continue using your content like you've been doing. So let me show you how with sanity. Io To get a project up and running in just a few minutes. Remember, what I show you today can be used on any front end. I'll show you how to spin up a project And also a couple other cool things to get you going right out of the box. So let's go ahead and let's structure our content. Alright. So to get started, go to sanity.io. Here, we're going to find these two buttons, get started, get started, click on either one of these. So So once we click on that, we'll see official starters. You can choose one of these, but we're actually going to do this NPM install. So So we're gonna be installing globally the sanity CLI and we're going to be running the command sanity init. That will start our very own Sanity project. So what I did is I copied that command and I now went to my terminal. And in my terminal, I'm going to paste that command in, Hit enter and then it will install the CLI for me and it will initialize a brand new project. If you have not logged in using Sanity on your local computer. You will be prompted you may be prompted to log in using either Google, GitHub, or email password. Choose one of those. Remember what you choose because we're gonna need that in the future. So I'm going to create new project. I'll hit enter and we're gonna name our project. So This is whatever you want it to be named, whatever you want your sanity project to be named. I'm gonna name it Fireship. So, I'm gonna hit enter And then, we are going to be asked about the dataset. So we are going to be using the default dataset. So I'm just gonna hit y for yes. It will be called production. So So we're gonna want that. Is that path correct? It is. So I'm gonna hit enter. Now, we can choose from movie, ecommerce, blog or clean project. We are going to do blog for this one. The other ones have like, uh, so they'll have like pre pre built schemas With, um, some data in it. The blob one is a pre built schema with no data in it. And then the clean one, of course, has nothing. So you would just build your own schemas out. With this one, we don't want any pre built data. We just want pre built schemas. And it is done. Alright. So we're going to CD into our project. And now we are in it. We can run other either sanity docs, manage, help, any of those, but we actually want to open this up in our text editor of choice. So I'm gonna actually open it in Versus Code. There's a shortcut that I have installed, code space period. If you have that, use that. If not, go to your Versus Code or text editor and open Yours up. Now, I'm going to make this big. Alright. So let's go through a little bit of this file structure. So the sanity dot JSON, if we go here, we actually can find our project ID and the name of it. So we named it Fireship. We have that. This project ID is what you will need if you need something else to speak to your content link. So say you have your React front end or your Next JS front end and you want it to speak to this Dataset, then you will need this project ID. So that is an easy way to find it. Now, I also want to point out the schemas folder. In here, if we did the clean project when we were answering those questions, this would pretty much be empty. Just a couple of things would be in here. But like author, category, post, those would not be here. Now if we went to schema dotjs, Here's where we import and use all of our different schema files. So we have block content, category, post author that also matches up with all these over here. And then down here is when we use it. So we import it and then use it. If you make a new file, make sure you come in here and import and use. Now, Now, I'm gonna go to post. This is our document type. Now, Sanity uses schema types and in schema types, document is one of them. There's also string, slug, reference, image, and we'll go through a couple of these and I'll show you what they look like. This one is a our document type post and it has an array of fields. So there's title, there's slug. But let me actually just show you what this looks like on the browser side, on the Sanity Studio front end side, the UI side of it. So I'm gonna open up my, uh, terminal. I used control tilde to open it up within Versus Code. You can open it up however you want. And I'm going to run the command sanity start. So run that command, hit enter, And it's starting up our studio, and it will live at local host 3333. So it's ready. Let's go back to our browser, local host 3333. And here, remember, whatever you chose when you did the login at the beginning, choose here. So I'm gonna do Google, and I am now authorized. So because it is mine, I have authorization to it. If you want to give someone else authorization to it, go to manage dot sanity.io and you can add more users. So this is what our studio looks like. It has the name. You can search through your content. Desk, Vision. We'll get to the Vision plugin in a little bit. But here are our 3 document types. So post, Nothing. Let's actually add a new post. So let's do my first blog post. We will generate a slug. Author is let me pull this down. Author is a Reference. It's referencing this author document. So, before we actually Can see anything in this drop down. We need to go make an author. So we can leave all this here. I'm gonna go back to content, click on author, and let's make So I'm gonna click on this little pencil. I'm going to make a new author. We'll just do my name, generate, And I am cap. And then publish that. Awesome. So now that's published, let's go back to our post, back to the one that we were working on. And if I do the drop down, we now see The author I just made. If we had a picture, if I had added a picture to that, this would be the little thumbnail of that picture. Then we have main image, And let's add an a main image. Then we have categories, publish at, and body. So with main image let me actually make this just a little bit smaller. Main image. There are 3 ways to upload a main image. You can click on upload and it will bring down the file structure, like the files from your own computer. You can drop in an image. So just like drag and drop, or you can paste in an image and we're gonna do that. So I'm gonna go to Unsplash and let's look up, Cats. We'll do this cat with the butterfly. So we're gonna copy image. Go back here, and I'm gonna do command v to paste it in. And now we have Our cat and butterfly image. And there we go. Now, let me show you a really cool thing about sanity and images. So I just unzoomed this a little bit more because I need to show you everything that's going on. But if I click on edit details, In here, I have some views of my image. So this is a really cool thing about Sanity is I upload once and it will work for all of these aspect ratios. I can crop here And this is the crop and I can do hotspot. Now, hotspot is making sure let me actually show you the thumbnail as I'm doing it. So Hotspot is making sure that whatever is in this Hotspot is always in view no matter what type of aspect ratio my image is. So So if I wanna make sure that the cat's ear is always in view, notice how the panorama changed or if I want the cat's nose always in view. Notice how it's changing. So I don't have to do, um, like, multiple uploads to make sure that my that my crop is good, that my hotspot is always on. Sanity will make sure that this spot that your hotspot is on is always in view, and that's how that works. So then you just exit out, And there's my hotspot and crop for my image. So, here is the body of my first blog post. Now, this is the rich text editor, and in here will live our portable text. Here is the body of my blog Post, I hope you like it. Old fashioned smiley face. And so, here is our portable text. Portable text will live in this rich text editor. And this is the Sanity way of storing our rich text. So you know how when you get HTML and you wanna put it into React Application. It kind of isn't very intuitive because you have to do the dangerously set prop and then you kind of lose control of it. So because portable text is data, it becomes JSON and so you can actually put it into your React application. It makes it more intuitive as you Pass it along to mobile, to desktop, to React, to Vue. If you wanna use a native app And you're using HTML, it would be harder. JSON would make it easier and this is saved as a JSON format. So this means that You can now query for your content. So say you wanted to find out all the blog posts that had code blocks in it, you can do that because all of this is stored as data. Your content is your data, and that is portable text. Now, let me actually show you. So here's our first blog post. Let's publish it. Let me actually show you the inspect to our blog post. If you click on those three dots, click on inspect, Here is all of the JSON of our blog post. We have our main image. We have the title. We have all of our rich text. So that is how it looks, that's how it's stored, and this is how we can query for it. Things like this. Alright. So let me show you a really cool feature about Main image. I know we already had hotspot and crop, but let me show you another thing. So if I go to my vision plugin wait. Before I do that, I actually have to go to the 3 dots, Inspect and I need to find my main image reference. This is the ID to my image. So I'm gonna copy that. So under my main image, the asset ref, I'm gonna come to my Vision plugin. Now, the Vision plugin, this is where we can query for our own content. We're gonna use grok today. You can use either GraphQL or Grok with Sanity. Grok is an in house Sanity made query language and I will show you how it's done just a little bit. There are definitely more places that you can learn about Grok. Um, but, yeah. Let me start off. So, by doing the asterisk, I am grabbing all of my content link. I'm gonna do the square brackets to filter down. So I'm gonna do underscore ID is equal to and I'm gonna paste in that ID that I grabbed from the image. K. Now I'm gonna run that query. And in here, this is all of the content we get back from that image. So created at The idea of it the idea will match what we just had over here. The type, but I really wanna point this part out. So under the metadata, we get dimensions. We also get the palette. This palette is pretty awesome. In here, we get our dark muted, dark vibrant, light vibrant, muted. All the colors that are part of this image and a optimal foreground color for it. So dark vibrant Takes up 1.93 of the image. This is the color and this would be a good foreground color for it. So if you put text over this part of the image, Um, it would be really great for accessibility, this color for the text. Let's look at light vibrant. So So it takes up that much of the image. This is the color and this would be a good foreground color. So that's just a really awesome thing to To note that you can have that you have this at your fingertips with all the images. So you can find that, go to your Vision plug plugin, Query for that ID and you have all of this at your fingertips. So really great. Okay. So let's actually add a couple things to our studio. So we have what it comes with, But let's add a couple things. So I'm gonna go back to my code and under title within the post dot JS file in the schemas folder. Let's go underneath here and type in description. And we'll do, uh, keep titles Short and sweet. Let's do a smiley face. Save that. And if we go back, Keep titles short and sweet. So it's just a quick little description that you can have and you can start customizing your studio. But let's create a whole new Schema type. So if we go to the schema types in the docs for Sanity, we will find an entire list All of the schema types that we can use. So we've been working in document. We've done the string. We have done image. Let's add a number. So, if we go to number, this is what it will look like, and there's the properties, there's options, And then and validation. But here's what we need for our schema. So I'm gonna copy that, take it over. Let's do it right after this the slug. Add a comma to separate those objects, And let's change the title. So we just need the title name and type for our new schema type. So title will do Time time to read. That is the title that will live within our studio. So this is the title. This is the title. The name is the name of the field. Time to read. Type, we'll keep as number. I'm gonna save that. Come back here and now we have a brand new time to read. Notice how these little arrows come up. I could Add that way or I could edit this way. So let's actually add a validation. Let's make sure that you can't do longer than 20 minutes time to read. K. So I'm gonna come up here and these are all the different types of validations we can do. Required, min number, less than. Let's learn more about validation. And if we come down here, we want this line. So validation. And I'll actually just go just to required because we want required. I'm gonna copy that line, go back to my number, and paste that in. And then let's also add the less than 20. So no matter what, we can't make the number go above 20. Otherwise, we'll get a warning. Come back here. And last number we put in was 88. And sure enough, it's giving us an error. Must be less than 20. So no matter what, if we just keep going down until we get it below 20, it's not gonna be happy with this. 19. And if I go up, error again. So if you want 20 to be included, then we would change this to 21. And we don't get the error, but the moment we go go up, we get that error again. So that is a validation rule to make sure that It stays within the numbers that you want. Alright. So now that that's all done, let's publish that and let's get our sanity studio Deployed. So what we need to do is we need to go back to our code. And in here, I'm gonna keep this. I'm gonna create a new one and we need to run the command sanity deploy. Hit enter. Now, studio host name. This is now unique. So When you created the project with me, you could have used the name FireShip alongside me because that's local, but this one is unique. I am gonna use the name FireShip, see if that's available. And it looks like it is because it's not giving me an error. So now FireShip is now taken, so you can't use that. And by the time you're watching this, maybe FireShip 1 and FireShip 2 are also taken. So it has to be unique. And once it is done, My studio will now live at fireship.sanity.studio. And I will have I will have authorization to view it And anyone else I give authorization can view it. So there's my new URL. Come back here, fire ship dot sanity.studio. And here is my newly deployed studio with all my stuff, first blog post, everything that I have. Now, let me show you a really cool thing. I'm gonna shrink this a little bit. Pull this one out. And now I have my local one version my local version running and I have my deployed version running. Now, these 2 are the same studio, but watch this. So anything I do in my local version Shows up in my deployed version. Anything I do in my deployed version shows up in my local version. And if I do anything, you can see these little pencil show up on both sides. If I click on that little pencil, it will show What has happened and we can see who made that change. And if I come over here, click on review changes, we can revert that change from either Side. Revert that change. We don't want it and it disappears. So that is live preview insanity to see Both the local side and the deployed side working together live. And if I publish, it will be published on both sides and yeah. And that is how you build your first project with sanity. Io. Alright. So we have our own content link up and running that we can query against. We have the JSON for all of our content, and the content can be used across all platforms. We're not limited to anything. So thank you so much for watching. If you have more questions about content platforms or about Sanity, you can find me on Twitter at capehe_ok Or you can find an entire Sanity Slack community at slack.sanity. Io. Thank you so much for watching and I'll see you around.
The speakers discuss the benefits of using a content management system or CMS for managing content on websites and apps, including flexibility in managing content, structure, and editing. They also explain the benefits of a content platform, including the ability to create a fully customizable content platform and gain ownership of content. The process of creating a project, creating a schemas, and uploading a photo is also discussed, along with a tool called Sanity.io for managing content and using the file structure in the future. The speakers also explain how to use the Post. JS file in the schemas folder to create a description and add a new schema type, as well as how to add validations to a post and change the title for a new schema type. Finally, the speaker explains how to publish a new version of the code and use it in the local and deployed versions of the code.