Sanity.io Crash Course | Headless CMS

Spend 20 minutes learning to quickly set up your next content backend with Sanity.io. We'll run Sanity Studio, an open-source headless CMS that connects to a hosted real-time datastore. Learn how to customize fields and content types, and how to query for data. By the end you should be ready to power content in React, Vue or any other framework!
Kapehe's Social Links:
Twitter: / kapehe_ok
KZbin: / kapehe
Website: kapehe.io
More on Sanity
www.sanity.io/

[@Kapehe]

Let me know if any of you have questions. There's a lot more to Sanity beyond this video! 🙈 Thank you so much for watching, I really appreciate it!

[@kenyaseemenow]

Good video thank you!

[@nicodemusngufuli3646]

Is sanity equivalent for Gatsby?

[@ridl27]

ty Kapehe. I have only one question: whats your favorite anime ? :D

[@rodrigoconti1264]

I had problems installing the sanity on my Ubuntu 20.04, do someone know an article to help me?(excuse me for my poor english.)

[@VikasJo]

Very informative video, but i have a problem with installation. i install sanity, but other commands like sanity start, sanity init not working, Bash: commant not found. NodeJs, npm with the latest updates. can you help me figure out what to do,? :) i can create a project, but cant login .

[@TraversyMedia]

Kapehe also did a complete React & Sanity portfolio website - kzbin.info/www/bejne/hICakJ2dr7uamMU

[@siddhartharoy5263]

Brad sir, Thanks :)

[@sidheshwartiwari9834]

Have a nice evening Brad! I want to be as calm as you in life 🤩

[@Kevthedev00]

This is awesome! Great job Kapehe...haven't seen you before. I will sub to your channel.

[@andrewiglinski148]

Brad dude... I miss the content you produced, but we need more like her on the Traversy team. As good as Dev.ed and the others are, we need some estrogen every now and then.

[@sidheshwartiwari9834]

@@andrewiglinski148 lol

[@linccodes]

I love her enthusiasm.... She's making the Course even more interesting 😊😊😊

[@chiragkhandelwal9178]

Since this channel is now becoming next freecodecamp i would love to see some videos on data structures and algorithms

[@johnnycincocero]

^^^THIS!

[@Mohit-il9gx]

Yea ASAP....!!!!!

[@panomapet9441]

yes please. A playlist for Data Structures and Algorithms either in JS or Python

[@11vag]

LOL. You've got a point tho.

[@RodasAPCTV]

We could use some more intermediate content on youtube. I guess that doesn't appeal to as many people as the beginner crash courses.

[@adebolaadeniran175]

I love how excited she looks and sounds about sanity!

[@DesignfulDev]

Her enthusiasm is contagious

[@FlorinPop]

Nice to see you on the channel too!! Great job!

[@Kapehe]

Thank you Florin!

[@aditimuskan8818]

Who are you?

[@alanflynn3612]

When I saw Kapehes channel with her Git explanations, I thought straight away she would be a great addition to Traversy, good spotting Brad

[@parthkumarchaudhary]

I don't know about others, But I like how her name is pronounce.. Kapehe 🔥

[@codingworld6762]

Sri Lankan khiladi he wo Kapugedara

[@premsedits]

Her name must be kaha-pe-he(where are you) 😂

[@dhirajnavale3861]

SIMP

[@sensus494]

@@dhirajnavale3861 Stop using words you don't know the meaning of

[@human_error1]

This was really helpful. Especially for someone who is completely new to Sanity CMS and never used it before, this was really straight forward and easy to follow along

[@KennethFromSkarpt]

Day 1: Have not yet regained my sanity, will keep you guys postet

[@JasonHuebel]

Excellent tutorial. And you have a steady, appealing speaking voice which is really important to me when watching videos such as these since I'm a little bit (lotta bit) OCD. So I tend to fixate on things like that. Anyway, your speaking style doesn't distract from the content you're presenting. Keep up the great work, Kap!

[@waifufx]

NO "CAP"

[@stfalx]

You are so enthusiastic and happy when you show off stuff it's like: "holy shit i can't believe this works, wow!" ... i like your enthusiasm :) keep it up

[@luis96xd]

Wow, amazing Crash Course, everything was well explained, with enthusiam and good examples and now I learned how to use Sanity! Thank you so much! 😄

[@laudbentil8184]

Insightful, I came across Sanity earlier but glad to come across this as it revealed certain features I was not aware of.

[@CoolSuperTech]

Strapi is better imo. Sanity is locked behind a pay wall after certain amount of usage whereas Strapi is fully open source.

[@siemen_subbaiah]

Yeah!!

[@adityaaufar4565]

Love the excitement everytime she wanted to show something.

[@parthkumarchaudhary]

This is absolutely awesome. If you have worked with Shopify then you care easily relate this with it and its very easy to learn also. Awesome stuff...🔥🔥🔥🔥🔥

[@birsingh5388]

What is the relation of this with the Shopify?

[@parthkumarchaudhary]

@@birsingh5388 in Shopify we have section in which we can also use objects and and use them directly in to html to show data which user entered. Shopify also provides lot other types like, String, Select, Rich Text, Radio, Color and many more. By using them you can create a block of section which can be reusable again.

[@mytechnotalent]

I never realized there was such a CMS what a brilliant job here @Kapehe. I need to watch. your NextJS tutorial with this CMS as well.

[@william254]

Thanks, that was explained very well & I love how happy you were while explaining the cool features. I don't see that often.

[@siemen_subbaiah]

Brad loved your crash course in strapi. Would love more tuts on that too!!

[@muazothman7416]

this is crazy--- literarly yesterday, i was reading sanity's docs and here comes brad with a sanity video! Ultimate goat of 2020!

[@devvvvvvvvvvvv]

Good stuff. Would love to see a deep dive into content modeling. Seems that every CMS I use over time bloats and becomes unwieldy as one-offs and special customizations grow.

[@StarContract]

"I'll show you how you can get started with Sanity" she said without blinking a single time

[@josuebarros-desenvolvedorw2490]

You've earned a new subscriber Kapehe! Your way of teaching is very fast, concise and nice too! Please, build more tutorials! Maybe something about NextJS and GraphQL

[@HalesEnchanted]

I love how excited you were about explaining stuff. You rock :)

[@aseel1024]

I've seen a lot of back-end devs keep saying that front-end is dying because of NO-Code platforms like Wix, WordPress. Strapi, Sanity, Prismic, Ghost ...etc they all give u a back-end solution. so my point is none of the Front-end or back-end is daying.

[@hirealgore]

I have a new found love for both Sanity & Kapehe

[@0xbitbybit]

Geez, I just watched a video on strapi, next day there's sanity. How many fancy ways do people want to make blogs? Why is it always blogs? Make an actual website, for an imaginary business, small AND big projects, with some of these new frameworks and headless CMS's, that would be something I'd be keen on, especially bigger projects.

[@birsingh5388]

Hi Kapehe, I have some suggestions. I think you could add some presentation slides at the beginning to show us what is the use of this framework and what can we achieve by using this. I think you may take some inspiration from Brad Traversy crash courses, where he mostly give introduction to that frameworks on which he create the crash course. Btw it's very informative tutorial, I will try this out. All the best👍

[@victorekea]

I'm building a portfolio with NextJS and I believe this would be best for creating certain posts. Thanks Kapehe for the awesome video.

[@petecapecod]

Great video it was just what I needed for a Sanity run through 👍 Thanks

[@sanghvian]

This was really cool ! I've been wanting to build a blog since quite some time actually. Thanks a lot for this !!

[@ayushkushwaha171]

Hey brad! Please consider making some AWS videos as well like S3,EC2,etc for using them into our projects. Aws has a very confusing docs. Thanks.

[@ayushkushwaha171]

Really liked the video. Thanks to Kapehe.

[@ACHTech20]

She is looking so excited 🤩

[@PochoNieves]

Kapehe I live in Pearl City but watching this from Germany!

[@kantyDarius]

this video AND this tool also are INSANE! love it!

[@ikahugu]

Mind blown! Thanks Kapehe for the awesome tutorial!

[@shadyqaddoura3451]

Thank you so much for this useful information; by the way, you are adorable; I enjoy how you get startled when you design a new feature; this is an old-fashioned smiley face for you :)

[@neon91111]

Absolutely loved her... Great enthusiam dude... Great stuff.. Keep up..👍👍

[@SayJee]

It's like WordPress but in React

[@aseel1024]

they called it head-less CMS, they give u everything but without the front end. so as a front-end u interact with the API data that coming from back-end and display it

[@SayJee]

@@aseel1024 that's EPIC

[@LtdJorge]

Wordpress uses React, actually haha

[@marcusthelin9991]

@@LtdJorge Yeah. At my company we use Wordpress as a headless CMS by creating custom Gutenberg blocks mapping the block data to corresponding React components on the frontend.

[@bigchunk1]

A lot of things now are like WordPress. Services that auto-deploy content can save a lot of development time.

[@obedasante1082]

It's an election day for my country #Ghana. Big Ups Traversy Media

[@pastorfred2543]

Bro.. Happy Coding

[@jkovert]

Did you vote for Trump?

[@kayodeoladipo7706]

Lovely tutorial. I'll be sure to check out Sanity.

[@franky12]

I am not quite clear what Sanity.io is exactly? A headless CMS? For what exactly would one use Sanity.io? 🤔

[@TraversyMedia]

You would use it for your website content. Blog posts, etc. She has a 2.5 hour React/Sanity project that is being processed now

[@gcash49]

headless CMS are for decoupling content for UI. imagine you have a website but there is someone without any coding experience that needs to manage the content - headless CMS' provide interfaces for this person to manipulate content and have these changes reflected on the website in real time

[@gcash49]

​@@BeFourCM by headless it just means that the CMS communicates with a separate frontend through API calls. technically WordPress can be used headless too (through their REST API) but for a non-headless CMS, you get everything in one package (ie. cannot code a separate frontend component which calls the CMS)

[@cassolmedia]

So, is this cms as a service? I'm not sure if I understand where the data is being stored. what about data security?

[@Play_Streams]

Awesome tutorial, Sanity is a really awesome platform!

[@gavin-hall]

This is great. Trying to find a dead simple business values way to convince my clients of the value of headless cms in general and sanity in particular. Any resources with less technical jargon out there?

[@alexlytle089]

You should just use a headless wordpress at this point. It has way more development with way more features

[@siemen_subbaiah]

More jamstack in 2021!!

[@shervinmokthari1251]

Im glad im part of the first 1thousand likes. It reassures me that im plugged into the right direction! I NEED TO GET MY FIRST DEV JOB & i think im going to bag it on monday after i send in this project im working on! douubbleee yeeeeeeeeeeeeeeeeeew!

[@justinr9699]

Sanity.io is the Apple of Headless CMSs. Get in now, no regrets down the line.

[@carlosalfredo657]

Excelent short course! Loved it!

[@TheCodingOdyssey]

Nice teaching style!

[@urlroute1489]

Outstanding explanation. I am going to use Sanity!

[@edenr1988]

Great introduction thanks 👍...I wonder if that headless CMS also provides inputs for css code for example where the content team can validate their code before publishing ? Reason I'm asking is because I would like to pass this to JSX style tags and generate static files for production.

[@dev_apostle]

This is great for integrating with React

[@AyyazZafar]

Amazing. Thanks for the video. It is really helpful

[@alain_laroche]

Cool tool and great tutorial. Thanks!

[@80Vikram]

Thanks for this awesome video

[@limitlesskode]

Excited to be here

[@Kirrrosh]

Thanks for the video!)) Finally I don't have to build cms for every my app anymore!!!!!!!

[@TJKhara]

Great video

[@justicetout]

Thank you a lot, but I have a suggestion. I hate when I had to watch the entire video to understand the purpose of a new technology. I think It could be very usefull and time saver if you add a small presentation of the finishing project at the beginning of the video.

[@quintonpangyixuan3990]

U mean like this?kzbin.info/www/bejne/r5-oZ4yLiNGYra8

[@realabbas5]

Kapehe is too excited to teach Sanity

[@bencroacademy]

Good tutorial. Was waiting to see how to add fields. Christmas question: What would be the use case scenario for sanity?

[@johetajava]

Create a new Wordpress

[@ИгрокИграющийИгры]

God damned. I wanted to learn about sanity, but can't get my eyes of Kapehe. Learned nothing, was worth it thou. Thanks Brad.

[@ИгрокИграющийИгры]

@@robotosailr2129 sorry, I am just a standart guy, cant help it.

[@andiamakaza24]

What is sanity?

[@shuaibahamed8692]

I am in love with Kapehe. Does she have a patreon?

[@dylantaft2348]

KapeHEYYYYYY GIRLLLL!

[@jean4j_]

I'm not sure I'm following what database Sanity is using under the hood? Sanity seems good and cloud based. However the fact they seem to have an in-house "hidden" database could make it hard to move away from Sanity and let's say move to another solution that use postgre, couldn't it? Is it a NoSQL database?

[@emmaunellaadaigweonyinyech7316]

Thanks a bunch. This is really amazing. Please , how can i fetch and display posts by their Category?

[@camdynrasque2721]

This was so helpful! Thank you!

[@HariHaran-zr1bg]

Thanks for the informative video, can we update the data in the sanity through the website like, while we want to change some existing data in the sanity, will it be updated through website,

[@josuebarros-desenvolvedorw2490]

Sanity!!! Oh yeeeeeeeeeeees

[@georgesmith3022]

Why do something proprietary? In the backend they use mongodb. Just learn to use mongodb

[@knutmelvr4848]

We don't use MongoDB :) And you can always export all your content with one CLI command. Since it's all JSON documents and asset files, it should be easy enough to take elsewhere.

[@sh0ker]

Can someone explain to me a few things: 1) is all of my data must be synced with sanity cloud? is it possible to disable this feature and get control of how data is stored? 2) what are the common use cases for this? 3) How deeply can I customize things?

[@vicentemartins1955]

And .. it's the first time I see a course in this channel that is not clear what is about. Actually I have no idea where Brad is going with this new line of courses. Brad is the "brand" and has his special way to (very good by the way) pass the relevant information about anything webdev related. I believe she is very competent but she needs to sharp her teaching skills.

[@TraversyMedia]

It's just a rundown of of how to create data with Sanity.io for your website. It is a precursor for the next video which is a complete project using React. As to me being the "brand", it has been that way for years but I have had challenges that keep me from creating new ideas, projects and content 2-3 times per week like I have the past 5+ years. I'm tired honestly. So I try to find other content creators that can do videos on various topics.

[@vicentemartins1955]

@@TraversyMedia I understand. Thanks.

[@JGuest777]

You can bring her back anytime :)

[@heatvisuals]

this seems way better then strapi, am i wrong?

[@mudrank4184]

Thanks for this tutorial was waiting

[@siddhartharoy5263]

Brad is awesome :)

[@fredericbrutin]

Thanks for the demo, but is it possible to customize UI in sanity studio ? (kind of frontend only for the backend)

[@denniszenanywhere]

Thanks for this tutorial but can someone please explain to me after one free Sanity account, the next amount is $100/mo? What don't I understand about the pricing?

[@knutmelvr4848]

Hi! All the tiers have pay-as-you-go. So you can stay on the free tier and only pay for whatever you use over the quota by adding a credit-card.

[@denniszenanywhere]

@@knutmelvr4848 So when adding another site/project, a) pay $99mo fee and then when adding something, pay for each tier/functionality/dataset? Or b) $0 and then just pay per tier? A or B? Not so clear on the site: www.sanity.io/pricing

[@knutmelvr4848]

@@denniszenanywhere Nope, you can have as many free projects as you want. So, B I guess? And have pay-as-you-go on all of them. You only need advanced or enterprise if you need SLA/Support or want to have more usage included. We're updating the pricing pages to be a bit clearer :) More nitty-gritty here: www.sanity.io/docs/plans-and-payments

[@denniszenanywhere]

@@knutmelvr4848 Thanks for clarification. Yes, it would be great to have a clearer picture of the pricing, because I'm thinking of building sites for small-medium businesses who may not be able to afford advanced or enterprise plan or understand your pricing. And thanks for the link.

[@christiankomodo]

Is Sanity hard to use with Angular? I only see React and View tutorials and articles online.

[@lukkash]

"Women in IT" series ... that's nice :)

[@marcscherzer]

I had no Post, Author, and Category when visiting Sanity Studio 6:30. Do I need to create those in schema.js first ?

[@gaureesha9840]

Sanity vs WordPress... can anyone share important differences?

[@25cawboy]

Hi, How do you make sure, that robots cannot find the deployed IP Adress? Or how you avoid that some kind of robot attack occours?

[@chrisw.1252]

"The operation was rejected by your operating system. npm. It is likely you do not have the permissions to access this file as the current user." This is the error that i get when i try and use the Sanity CLI. Help Please?

[@paddotk]

It seems to have installed successfully, yet when I run `sanity start` and go to localhost:3333, it just keeps loading. Two 404's in the devtools

[@harireddy3434]

Hi Kapehe, Is it possible to update the sanity.json (projectId) via environment variables, if so how do I update pass the environment variable as part of deploy command. Example: I would to use different projectId for Staging and Production environments

[@donikaVal]

I have seen Strapi and it is was pretty nice, but this... This could be done by Mongoose + Passport in one hour without any frameworks...

[@dexkonce4104]

Help me I can't log in through github in the very first step Giving error Events.js : 292 Throw er; // unhandled 'error' event Error : spawn cmd ENOENT

[@enriquesneffels3053]

What a beauty... and yes, great tutorial.

[@Scyllamedia]

Hey! We are having trouble with our website! When we press publish, our actual site does not update? Do you know how we can fix this?? Any and all help appreciated!

[@marcodev3375]

what will happened if i delete some of fields then save it and then write them back? Will the existing data preserved or lost?

[@coolpot]

well, dont know about you guys, but i would

[@pbanikk]

Kapehe, you look so gorgeous!

[@dishantgowari8854]

Wow I like it 👍