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

[@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

[@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

[@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.

[@muazothman7416]

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

[@linccodes]

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

[@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"

[@william254]

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

[@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

[@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.

[@laudbentil8184]

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

[@DesignfulDev]

Her enthusiasm is contagious

[@adebolaadeniran175]

I love how excited she looks and sounds about sanity!

[@HalesEnchanted]

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

[@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! 😄

[@FlorinPop]

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

[@Kapehe]

Thank you Florin!

[@aditimuskan8818]

Who are you?

[@sanghvian]

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

[@ikahugu]

Mind blown! Thanks Kapehe for the awesome tutorial!

[@adityaaufar4565]

Love the excitement everytime she wanted to show something.

[@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.

[@petecapecod]

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

[@fredericbrutin]

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

[@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.

[@siemen_subbaiah]

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

[@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

[@carlosalfredo657]

Excelent short course! Loved it!

[@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?

[@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?

[@kantyDarius]

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

[@kayodeoladipo7706]

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

[@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?

[@hirealgore]

I have a new found love for both Sanity & Kapehe

[@urlroute1489]

Outstanding explanation. I am going to use Sanity!

[@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?

[@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,

[@ayushkushwaha171]

Really liked the video. Thanks to Kapehe.

[@KennethFromSkarpt]

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

[@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

[@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?

[@marcscherzer]

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

[@christiankomodo]

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

[@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.

[@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 :)

[@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

[@neon91111]

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

[@diego0ji]

Which is the best way to add and configure an .env file?

[@Play_Streams]

Awesome tutorial, Sanity is a really awesome platform!

[@mrsingleb]

How to impliment a loader while fetching the sanity data in react ?

[@javascriptmaster625]

it returns me an error when i run this commend to install sanity, what do i do ?

[@alain_laroche]

Cool tool and great tutorial. Thanks!

[@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

[@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!

[@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.

[@emmaunellaadaigweonyinyech7316]

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

[@PochoNieves]

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

[@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?

[@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.

[@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

[@ACHTech20]

She is looking so excited 🤩

[@AyyazZafar]

Amazing. Thanks for the video. It is really helpful

[@Kevthedev00]

Would anyone use this over Next JS or Gatsby?

[@camdynrasque2721]

This was so helpful! Thank you!

[@TheCodingOdyssey]

Nice teaching style!

[@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👍

[@limitlesskode]

Excited to be here

[@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)

[@StarContract]

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

[@richardokonicha]

how does sanity store images tho

[@dreamlit8500]

This is great for integrating with React

[@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?

[@gaureesha9840]

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

[@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!

[@80Vikram]

Thanks for this awesome video

[@Kirrrosh]

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

[@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.

[@vanbayor11]

Can sanity be deployed on CPanel? Thanks.

[@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!!

[@saroj3483]

i am unable to login with github/google/email nothing is working

[@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

[@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.

[@TJKhara]

Great video

[@heatvisuals]

this seems way better then strapi, am i wrong?

[@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.

[@Ролтун]

What is it? Whot for?

[@obedasante1082]

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

[@pastorfred2543]

Bro.. Happy Coding

[@jkovert]

Did you vote for Trump?

[@siemen_subbaiah]

More jamstack in 2021!!

[@realabbas5]

Kapehe is too excited to teach Sanity

[@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.

[@shuaibahamed8692]

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

[@JGuest777]

You can bring her back anytime :)

[@JamesXSmith]

Great Intro to Sanity.io. As a bonus what a great looking woman with a great smile :)

[@dishantgowari8854]

Wow I like it 👍

[@josuebarros-desenvolvedorw2490]

Sanity!!! Oh yeeeeeeeeeeees

[@pbanikk]

Kapehe, you look so gorgeous!

[@dylantaft2348]

KapeHEYYYYYY GIRLLLL!

[@siddhartharoy5263]

Brad is awesome :)

[@AnthonyCandaele]

what a coincidence, I just saw a tutorial on Next.js with Sanity.io and Chakra UI

[@raghul7211]

awesomee

[@alexlytle089]

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