Getting Started with Prismic - A Great Headless CMS

hey everybody Chris on code here in this video we are going to explore another headless CMS and headless CMS's are a big part of the jam stack today we are going to be talking about Prisma quit is one of my personal favorites now prism it makes it really easy to start with the headless CMS get an API and work with your data in browser so that you don't have to write any code for your back-end or your dashboard which you want to focus on the front end where everything is kind of where your customers are so let's take a look present make is really cool because it gives you a graph QL API right out of the box if we scroll down here we can kind of see the workflow for Prisma quiz model your editor which we will do in this video so we'll model our editor we will create content which we don't have a Content team since it's just me right now I'll be doing some content creation and then you choose a framework to set up prism ik we're going to tackle this in another video but one of the other cool things about prism ik as compared to other headless CMS's they have a very generous free tier and they have no limits on API requests which is where you'll see a lot of other headless CMS's start to put their restraints on pricing so go ahead go login create the prism account over here on dashboard I'll click it Here I am in my dashboard I'll go ahead and create a new repository and we'll call it sample blog sample blog I guess no spaces in that sample blog Chris I guess ok now that we have that we are starting on the basic plan very good let's scroll down create this repo and now I have Blagh in all of my repos let's click that what does the main content we'll be writing in will be doing English and will be dropped into our prism ik dashboard and the first thing we're going to do here is build a custom type the cool thing about prism ik is that you can model all of your data and your custom types right in the dashboard without having to write any code we can go ahead and create a custom type let's say repeatable type or single type repeatable type is for things like blog posts which is what we'll do now and single type is for a home page contact page and we'll talk about that after we do a repeatable type so let's do a post automatically it gives us an API ID of posts I'll create the new custom post type and here we're dropped into what is one of my favorite parts of prism ik this really cool editor where you can kind of drag and drop all of your different pieces so I'm gonna drag in a title here and field name title field placeholder nothing there or actually my new post and I'm going to leave each one the only thing that is going to be selectable as title UID is next this will act as our slug so I'll call it slug okay and the cool thing about UID is this is created from the first piece of text in the content so when we start typing into title slug will automatically get generated for us and then we'll have content call that content field placeholder is write something amazing multiple paragraphs allow all of these different things and I will click OK to end that and the last thing is probably an image where it will just say image will say Auto and that's good let's do 1500 by 750 is the default for scotch I went to that 2 by 1 ratio okay so we have all of those things we could do some more stuff like relationships if this post links to something else links to videos or YouTube links a date/time stamp color if you want to change out the design of each post separately select for drop-down boolean all these good things and notice how easy it is to automatically create our post type I'll click Save right here and we're done with this let's go back and now we have custom post types right here this is our media library this is experiments which I think is going away but content is where you'll most likely be doing most of your work and let's create a brand new type this is my first post and notice how the slug was automatically created we get this WYSIWYG editor this is going to be an amazing post on my new blog ok now we have our image here let's go ahead and go to unsplash grab a dog image this is like default code to thing that I do let's grab a really cool one going for a happy dog let's go with this guy's pretty cool let's keep going yep dog in a stick always happy download for free go back over here click an image upload media I'll grab this dog and christmukkah will go ahead and take care of uploading it it'll actually handle CDN duties which is really nice and it will also resize if we need to on the fly so we'll click that we have our image here and we can click Save we can click publish as well or we can preview it you have to do a little bit of coding to set up the preview because since Prisma cos a headless CMS they don't really have a UI for you you have to bring your own UI so you have to set up your previews which is fine but we'll go publish Chrisman gives us options to publish now specific dates during a specific release and that's very helpful especially if you have a giant content team and you want to schedule posts throughout the week I'll publish it immediately and now this nice green bar shows that we're published we'll go back to our content we have live content right here now we go ahead and create a custom post type for the home page I'm going to skip out on that right now I think you get the idea for that one thing I want to note too is that Prizm it gives us a little bit of flexibility in design let's say we have some people on our team that aren't really designers or coders we can go to custom types edit this one and down here at the bottom we can have a slice zone so if I turn that on add a slice you can create a new slice or there are things called existing slices that prism provides for us you can have quote list of articles text image galleries so now basically slices can be reused inside of a custom post type if you have people on your team that aren't very technical they could just say okay I want to add text I want to add a image gallery and I want to add a list of articles and they could drag and drop into whatever order they wanted very very helpful all right so I'm going to leave that out right now I don't think we changed anything so I'll click back discard changes okay so you might be wondering we have our content we have our headless CMS where is our API going to live how do I pull this content and so that I can use it with like let's say Gatsby or next j/s or next or whatever static site generator you want to use if we go down to settings right here we can hit API and security and notice they give you a URL for your API so I'll copy this go into browser and just paste it right there this is going to be all the data for our API right there let's see if API gives us anything different all right that is our API we also have an API browser which we can use right here the API browser will let us visually see what's coming out of our new prism ik API I'll click search documents here and immediately we see my first post content the image that was created all that good stuff coming out of our API and this is the URL that we would use to kind of visit this document from Gatsby or wherever we pull data from you can also select JSON and see what will come back out very very helpful there so prison make is a very good headless CMS that is hosted for you they have a very good pricing tier really good option if looking for headless CMS's we'll explore more headless CMS's in the future and also how to use Gatsby or next yes to pull from a prism ik api to generate a website but until then thanks for watching

Channel: Better Dev

Views: 15,888

Keywords: web development, javascript, headless cms, headless cms tutorial, headless cms comparison

Id: Mz7eaKge584

Length: 9min 38sec (578 seconds)

Published: Fri Mar 27 2020