caption

Introduction to Sanity.io | Portfolio Website + Blog Using Sanity.io #1

In my opinion every developer must have 'Personal Portfolio Website' & 'Blog' So in this video series we're going to start How to build a 'BLOG' & a 'Portfolio Website' within blog through "SANITY.IO" So we have a 'BLOG' & 'PERSONAL PORTFOLIO' in the same website Many of you will say "what SANITY.IO is?" & "why are we using it?" So you'll get to know about "SANITY.IO", because "SANITY.IO" is a very good And a platform for "Structured Content" , so we're going to use it "What Structured Content is? " and "Why are we going to use it?" So, all your content stays in one place and also we can use power of "JavaScript" and power of "NEXT.JS" or any other frontend In this series I'm going to use "NEXT.JS" and I'll connect it to "SANITY" I'm going to make this setup very easy for you So, let's start Step-by-Step Firstly, we're going to understand "SANITY.IO" & what Structured Content really is? And why are we using "SANITY.IO" ? And then we're going to make our first "SANITY APP" And how to sign up on "SANITY" through "GitHub" And then we"ll observe where 'SANITY' stores the data & what is " SANITY STUDIO"? And eventually we will connect to this store by creating "NEXT.JS" application So I'm very excited to do this project of mine & if you're too so please tell me in the comment section that "I'm excited" Many of you will think "Why are we not using this & that"? & "Why are we using "SANITY"? Because of powers of "SANITY" , "SANITY" is amazing & it is modern & powerful technology It's very easy to learn through "SANITY" So hang tight So let's go to computer screen & install the applications right from "NODE.JS" "NPM" & "SANITY" Let's start building this Portfolio Website now So as you all can see I've now switched to Computer Screen And I've created a folder named "SANITY COURSE" So now I'll tell you how we can create our "SANITY APP" So firstly I wanna explain you "Why we need SANITY?" When we have "Databases" & "Mongoose" if I talk about the JavaScript There are many more things where we can build & save our content, then why do we need "SANITY" So look, it's very simple , when we use the "SANITY.IO" We can use the Structured Content out of the box So this means there is no need to worry about creating the 'Database' Maintaining the database is a huge responsibility if you do a insta spin on "DigitalOcean" or "mongoDB.Atlas" Or you can try hosting a "Postgres Database" First you'll do deployment of it and then deployment of frontend application Just think how much difficult will it be As a developer I can tell how much difficult it is, And when I do this for simple applications In which I just have save my content, such as a "Blog" It seems like I'm doing the same things over & over again Copy & pasting the passwords and creating the environment variables What "SANITY.IO" does is, It provide complete content in one place If we talk about "WordPress" , why did WordPress become famous? It was famous because people were able to do what they had come to do It's not that people have to get involved in deployment for a week So the benefit of 'Structured Content' is you will make a "SANITY" application You'll sign up on "SANITY" & You'll create your "SANITY" app & you'll use your content And that's about it, you add & distribute your content & focus on your content And not on how to maintain & structure your content It is a huge responsibility to structure your content What kind of things you've to do it is also a very big task So in "SANITY.IO" you can look also see the code You can also do micro level optimization And what kind of code is doing all this stuff And by writing JavaScript you can easily manage your content And that's why "SANITY.IO" is used for and basically this is the Structured Content And your content comes on the cloud There is a link in the description of SANITY's boosted plan which SANITY has given to us If you'll check that, you'll get a lot of things out of the box for free We get much more here than SANITY's normal plan "200k API request" "1M API CDN request" "20GB Bandwidth" So by using this link, you guys have to sign-up here it is very important But firstly we'll talk about some prerequisite and I'll also tell you about SANITY as we hit the use case And I'll tell you why I used SANITY here and other stuffs It'll help you to analyze how much time you're saving by using the SANITY So as you already know we first have to install "NODE.JS" & "NPM" So here the page "nodejs.dev" is opened accidentally and this is very important So in this page "nodejs.dev" it is to learn about "nodejs" and this is not our topic right now So I'll simply right "nodejs install" here So you guys download & install it from here Just click "next" "next" " next" and it'll be install shortly When you successfully downloaded the application than what you have to do is Then you have to click "Shift Right" than click "Open Partial Window Here" And then you just have to check if "Nodejs" version is installed by typing "node — version" And by typing "npm — version" to check if NPM is installed or not Then it will you show all of

your versions Now what you have to do is run these one-by-one, firstly "npm install -g @sanity/cli" After this SANITY's CLI will be installed Now I've installed a package and secondly you also have to Use this coupon code "sanity init –coupon codewithharry" by using this you'll get the boosted plan I already have a sanity account so it's showing me "looks like you already have a sanity account" Once we paste it than it will ask you to create an account and maybe get you validate from "GitHub" So do as it directs, now what I've to do is to write "Portfolio" And after writing portfolio I'll press "ENTER" Now I've named the project "Portfolio" Now it'll take time after pressing enter So it's written here "creating data set" and it's showing where to create the project and I'll press enter Now it is asking me to select the project template Ideally we have to select the "Blog" but I'll select "clean project with no predefined schemas" So I'll tell you from starting how to do all the stuffs Now we've created our SANITY project & it is showing "resolving dependencies" So now it is working let's give it some time & in the meantime I'll tell you about the SANITY Why we've to use SANITY, look when we've to save our content Whether you're using application of Android or iOS or you're creating a web application Or you're creating both, You can connect both of them with SANITY's content The big deal is you can easily get the "Structured Content" which means you don't have to create models by yourself You don't have to define models by yourself And one more thing is that, SANITY already have CDN (Content Delivery Network) That means your data will be cached which will help to improve your site speed If you want to do all of this with "SCRATCH" you can also do with that But the main thing is, do you want to spend your time to create 'Structured Content' or do you want to keep focus on your application SANITY has built-in APIs, which means you can easily pull content with APIs and queries In my opinion it is the best API experience in the industry when we use the SANITY And the UI of SANITY in which we do the editing is also amazing we'll further see And their community is also good if you want to ask any query So they actually provide you help And SANITY have full-time employees which are only to answer your queries And in my opinion this is amazing And SANITY has gives us a boosted plan & nothing will be better than that for us We can use this boosted plan to build our Portfolio Website, what can be better than this? So I just want to thank SANITY.IO for providing us free boosted plan So now we have to open our code in "VScode" I've clicked on "open with code" & if I'll show you What this code contains Now let's understand step-by-step how we can define our content & structure So this is a "NODE.JS" project which contains "package.json" in which you have all the dependencies Don't be surprised when you see 'React' because it is a "React Application" After that we'll come here Skip all the other file & also skip "yarn.lock" & "tsconfig.json" if you go to the "sanity.json" you'll get to see you product ID And the "production" is written in the data set We'll talk about it later Now if I go to "schemas" there is "schema.js" here we'll import our schemas In the upcoming videos I'll tell you which types do we have to make But, I just have to inform you whenever we'll make our content First we've to create a file in the "schemas" folder And finally import that in the "schemas.js" So the "schemas" in our "schemas folder"….

Leave a Reply

Your email address will not be published. Required fields are marked *