Trying out Contentful, a Headless CMS

hey everyone i hope you're having a great day welcome back to another web dev junkie video in this video i'm just going to give you a really informal overview of using contentful with a static html site um so what i'm going to pretty much explain is how you can set up something really simple in fact i'm going to walk you through how to set up stuff i'm just going to show you what i have and maybe that'll spark some interest in you learning content for yourself or maybe looking into other headless cms systems so basically before i get to it i'm basically just building out a site and i want the text to be dynamic so if i were to go in here and change my content and i'll walk you through this ui in a second so i just want to give you like a really quick overview if i change this to hello world inside the contentful application and i go back to my little website and refresh you'll see that the text actually reflects what i changed in their cms so if that's something you're interested in be sure to stick around [Music] all right so first off this little site is just something that i found a little kind of like a an image of some styling of a website i guess something if you wanted to like maybe have like a dog grooming service or like a pet training service and i just wanted to try to replicate that and make a responsive website i'm gonna make a tutorial about this in a second if you think this is interesting um but my design skills suck but i just wanted to kind of practice with my design and i thought you know what while i'm here why don't i just try to look into something new as well such as like a headless cms which is why i started looking into contentful so this is just another cms that's out there that you can quickly hook your website up to so that people who aren't as technically inclined such as like i know business owners or non programmers can easily go into a ui like this like i showed you earlier and just change text around to have it reflect stuff on the page now there's a lot more to this um i i've just really spent 20 30 minutes looking into this so i'm still learning about it but i'm assuming that if you understand one headless cms such as this all the other headless cmss are going to be very similar there's going to be some type of dashboard where we can go in and create data models and then for each data model structure you can start creating entries and i think they also have like the ability to upload images as well so like if you are making a blog and you need a place to store images or upload images you can put them here but yeah so i thought it was pretty interesting um i'm going to show you how i hooked this static one page application to con tinfoil right here with this hello world and i'm going to walk you through how i created a model and stuff so right off the bat when you create an account there's something called spaces so you're going to want to create a new space in this case i already have one created called my safe space but if you want to create a new one i think you can just click on this little uh icon here let me zoom in a little bit for you and click on create space let's just go ahead and create a new space and i think i might be limited to one yeah so you only get one for your account if you're trying to do the free stuff which is kind of disappointing because if you look at the costs it's extremely expensive 489 a month which is absolutely um s9 so yeah you can use it if you want to do something free but this is i think just a good way to get an overview of what a headless cms is so since i can't create a new space let's just pretend that i created one and i typed in the name my safe space so we'll click into that and let me give you an overview on this so when you create your space you can go to the content model tab and you can define what your data model looks like so in this case if i want to add a new one called like text i'll call it static text and this could just basically be a data model that defines various static text on the page so when you do this you can basically add a field so in this case i'll just add a field of text type and i'll call it text and i'll click create and now we pretty much said okay we have a data model called static text which has a field called text this is really somewhat like a mysql like database table where you create the table you define what's in the table and then you have to put entries in so i'm gonna go ahead and save this one and again this is a really informal like overview i might give a more formal one if you like this so if i go to the content tab now the idea is if i wanted to create some text i could go add entry and say static text and then that entry i could say um i like pizza or something like that i'll click publish and that'll create an entry of the type static text which we can then fetch from our front end later on so we have the i like pizza set up zoom out just one more and what you could do now is if i go back to my models here or your content i can click on this one and i think there might be a way to get back this by an id or something right entry id so now over in the code let me zoom in a little bit if i wanted to pretty much fetch that simple content back and display it on the page you can first of all ignore this this is just because i'm using parcel but you can import the contentful api if you're using like javascript and then you can create a client like this and provide your space id which if you go to your space so if i go over here to my save space and i think if i if i go to settings and i go to general settings that's how you get your space id so that's how i got this number and then your access token again you go to api keys and then you click on your tokens here you can see what your access token looks like so yeah that's how you do that so you set up your client and you can start grabbing entries back in this case if i want to get back all the entries that have a particular entry id i don't know how to do that so let's try to find their api content full api example if you go to their content delivery api i think they explain all this but if we wanted to get it just by content id i think there's a way to do it again i'm still trying to learn all this stuff it's it's not that hard i just have to read through the stuff but let's actually do a different approach instead let's do the content type is going to be of the static text so it's a static text now this id comes from the actual id of your content model so if i go back to the content model and click on static text you'll see down here there's a content type id that is what you need to put in there so make sure i put static text and i did and i'm going to change this to i know texts or something print it out and comment that out for right now so now if i go back to my ui and load a terminal here and refresh the page you'll see i get back some items and in those items i get one entry and then i get a object that has a fields property which has text of i like pizza so technically what i could do is in my code i could grab the text items first entry fields of x i think i called it which i'm not blocking the code there and then when i refresh the page actually just refresh for me it gets back i like pizza all right so again this was a like a really really sloppy rough overview because i just played around with this for like 10-20 minutes and i thought it was pretty interesting and i would like to share it with you all but the idea i think behind a headless cms especially now with like using next.js or gatsby is that you pretty much put all your content inside your headless cms so your business owner or whoever your client can go and change text as they want and then when everything is good you basically just build your next.js site so compile all your static files or your gatsby files and then have that deployed to netlify or what's the other one called purcell and i think contentful also has like web hooks set up that you can actually like put listeners on your data so that when someone comes in and changes this it'll automatically build and deploy your netify application so that's pretty cool if you're using the jam stack and you're using like again next js or gatsby or nuxt so keep that in mind this i thought was pretty cool i might look into more headless cmss because i think it is really good to learn how to use at least one of them in case you have a client and you want to build him a website for his like his pizza shop but then you want to give him the flexibility to come in and change text without having to call you um because that's actually a good selling point you know you can tell them hey like you just have to log into your cms and change some stuff and it'll automatically change your website and that's really dependent on the client some clients might just want you to do it for them and you can charge them extra for your your time and effort but it's really up to you so if you like this little informal overview be sure to let me know if you want me to go in more depth of how to use contentful i can do that as well but going back to the pricing like this is a little bit steep so i might actually drop this and find something else because i mean i guess you could just make a new account for every website you're trying to do um but i'm sure there's some limitations you're gonna run into with this free tier and then you're gonna have to upgrade to a 489 a month tier or something else i'm always very scared about using services like this because it seems great and everything's free but then when you actually start building a site that's getting hit with traffic you start running into roadblocks that require a lot of money to unlock the next tier of access so make sure you read all the fine print when it comes to pricing and that you don't like shoot yourself in the foot with signing it for something and not realizing how much it actually costs or if you do just be mindful of inside your javascript code make sure you wrap everything with an abstraction so if you find out a month later that contentful is too costly or you can't use it anymore it's really easy for you to switch to a different cms and that's kind of a higher level talk about like clean architecture in you know creating boundaries inside your code but yeah just keep that in mind right so that's it if you enjoyed watching this video be sure to give me a thumbs up leave a comment below if you've used contentful before or if you use another headless cms that might be open source and free let me know um i'm interested in kind of checking out some other stuff like always happy coding have a great day

Channel: Web Dev Junkie

Views: 2,349

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering, headless cms, cms, contentful, making text dynamic using a cms, javascript, html, ss, wordpress, word press

Id: EvIMNvFm5Yk

Length: 11min 58sec (718 seconds)

Published: Sun Jan 03 2021