Netlify CMS

one of the biggest struggles I have with a static site generator is that you're required to put in all of your websites by hand and it typically the easiest way to do it on your computer there's no way to do it on the go on your tablet or on your smartphone I'm going to show you guys today a system that net Liffey design called a net Liffey CMS or content management system that gives you a GUI interface in your browser whether it's on your computer on your tablet or on your phone to add and edit web pages on your website let's get into the video [Music] all right everybody Chris state here today I'm going to show you guys how to add something called the net Liffey CMS I'm gonna go ahead and show you guys real quick what this looks like I'm gonna pull up my blog web site that I so cherish Lee love and you can see here that all these posts looks great but the biggest problem here is that when I go into the actual code I'm gonna pull up Visual Studio code here when I go into this code you can see that all of my posts are here on the left let me make this a little bit bigger for you there we go you can see that all of my posts are here on the left and that you can see them all in their glorious markup format you can see all of them that you can you see on my website right well the problem here is that every time I want to add a new post I have to go into here and add a new file and then write down all this stuff and it just very isn't very Indu savour conducive to me to do this on the go I like I like working on the go I like to be able to create my YouTube videos or my blog post and then on the go get on my iPad and just like type up my my web my web page so that way I'll have to sit here at my desk all the time or if I just want to type out in the open or in my hammock outside and one of the biggest things is that it isn't really conducive to do this on there now I thought to myself there has to be a way for me to be able to do this not only to get away from just my computer but to get away from this coding environment I want to be able to do this through a nice beautiful GUI interface so I'm gonna show you the solution that I have to my website and then I'll go into how I got there so to get there I just go to blog Chris State comm slash admin now I have this set up to where it will log in using my Google account which is really awesome because not only is it super secure I don't have to create another username or password and you can see that because my goo account is already logged in on here on my browser it went ahead and just forwarded me into my thing now you can see on the left here I have everything broken down into collections if I'm gonna be posting a a post about this series I go into the twelve dollar website and you can see here my most recent video was let's see the most recent one was the custom domain so I can click on there and right there you can see I can turn it to a draft in case I'm not done editing it I can add categories tags my images I can allow comma dating and sharing and I can also put down here the actual YouTube video and and some text that I want to talk about and I know we're here a little publish button I can delete this and edit it at any time this isn't just available on just my computer you can see if I go into the smartphone view it scales very well with different smartphones let's say I want to go into a you know my iPad here this is what it looks like on an iPad and it works just the same you can edit everything you can view everything and work with it perfectly on a mobile device so that's why I love it so now I'm in the next section I'm gonna go ahead and show you guys how I got to this point what I used and what tools we're gonna be using alright so we're back here in Visual Studio code I'm gonna show you guys how to add this net' Liffey CMS system when I pull up my browser here and I'm gonna actually go to google.com and I'm gonna show you guys how to add this so I just down here in the search bar I'm gonna type of net Liffey CMS now if you see this there is a github link that's the first one that's a perfect link that's the one you can go to to kind of read more the documentation and actually see the code it is open source and it's and for those of you wondering it is written in react so that's that's awesome it's very extensible and they allow you to add your own custom you uses and stuff and I'll show you guys that here in a bit but I'm actually gonna go to net Liffey CMS org this website is just the website that is the front and kind of shows you guys what you're gonna be getting here as a package but what I want to do is I want to click this getting started guide you can see here net Liffey CMS can be added to any existing site so maybe you've already created your website and you're thinking to yourself well it's too late for me to add this well it's not or you can actually add it to a brand new site it doesn't just work with just Hugo it works with many site generators and so or you know static site generators so you're not limited to what you're using I'm gonna show you guys today how to set it up with you go other than that it's gonna work super simple and just about the same for every one that you use I already know a lot of this and I've read a lot of this documentation if you guys want to know how to do a lot of this it's all in this documentation over here I'm gonna click on this link right here called add to your site and I'm gonna scroll down you can see here that they support here's the generators that support Jekyll get book Hugo Gatsby and next hex go our hex Oh middleman spike in ym what we're gonna do here is I'm actually going to go back to visual studio code and I'm going to kind of set it up the way they want it you can see here that it says inside the admin folder you'll create two files you'll create index.html and config yeah Mille I'm going to create the index.html so to do this what we want where we want to place this is we actually want to place this in our static folder and in there you're going to create a new folder called admin so I want to create that admin folder and then in there I'm gonna create a new file called index.html now that I have that done I want to go back to net Liffey CMS org imma go down here it says the first file you're just going to basically copy all this text and then paste it into here and that one's done super simple guys right so this is a this is some HTML that'll essentially sets it up for for react to come in here and do its job you don't need to worry about that but the next we're going to add is this config dot yeah mol file yml now in here this is kind of where net Liffey or the net Liffey website is gonna actually look for the configuration for this CMS or this content management system I'm gonna go ahead and we'll look at some documentation but essentially it's saying in here that you need to setup your back-end and that's going to be called name get gateway and branch master I'm gonna show you guys how to do that and what that means let's type it in first so you're going to type in back-end and a colon and then you're gonna type in the name of it is get gateway and the branch is the master if you're pushing your website off the master branch on github this is what you're gonna want to use I do want to add a disclaimer here I'll throw it up on the screen is that you must be hosting website through github to use this it only works using github hooks which is a system they built into add notifications and stuff forget repositories it will not work with git lab or bitbucket or any other git repository as of today they I hope they would add it in the future but today you can only use github what I'm gonna do now is I'm actually gonna go back to net Liffey so we can set up the second portion of this inside of here you actually do need to click on your settings for your website and then you actually want to scroll to the I believe it's access control no it's gonna be identity then oops clicked on the link and that nice you're gonna click on identity and you're gonna scroll all the way to the bottom and down here at the bottom you're gonna see services and down there you're gonna see something that called git gateway what this allows you to do is give this I'll call it a a setting or your configuration settings for this site on that Liffey the ability to post to your repository on your behalf it's going to automatically request an API access token from your git repository and enable that automatically those should be a checkmark box I have mine enabled because I've been using it for a while but you just click on it give me a few seconds if it doesn't show up refresh the page and you should be good to go but you can see there you'll be given a I'll show you your repository I don't need to set up roles because that's for something that I don't really get into but if you want to see that go and check that out in the documentation on that Liffey CMS's website but that'll essentially allow you to get access to that that is how you show it how to get access but now we need to add one more thing here before we can get into the actual content and that is showing it where your media is your websites going to have files such as text documents or even pictures what we're gonna want to add is a path to where those will be uploaded to so you have two types of folders or keys in here you'll have to add to this configuration file you're going to add the media folder and that is where these media is uploaded so I upload mine in the static uploads folder you can see all my pictures so I'm going to type in static and then I'm gonna type in uploads now that is where it actually uploads it to your repository but we want it to also show what the public folder is or what it shows up on website ads and now I'm just going to name that uploads so that way whenever it goes to look for a file it's just going to show the URL you know blog Christie comm slash uploads slash here's your file and that's essentially what will be used not the static now if I go over and back to the net Liffey CMS website and I scroll down you can see right here that they actually have that set up right there so if you already have images folder in your project you could use it to path possibly creating an upload subfolder for example as you can see here they have images slash uploads I like to use mine as a generic term that's why I just kind of put it in an uploads folder I don't specify images because one day I might want to upload a text document or something like that you can see here that they for Hugo you can set a static folder for Hugo exelon middleman you actually need to add this public folder that's why I added it there and that configuration is done the last thing I'm going to show you guys in here to get this up and running is the collection side collections essentially shows it a format to work I'll show you guys how that looks so if I click if I go to my admin page and I go into here and I want to add a let's say I want to add a new coding web web page I clicked new coding and this actually this right here is just my template of how I want it set up I want a title I want to publish date categories tags images this is essentially a template which needs to be added inside here and that is under something called collections I'm gonna show you guys one and I'm gonna paste in what I have everything else because I actually have a lot that I use for my configuration file but I'm gonna show you guys how did this work so we're gonna go to collections and after that you're gonna type in a dash name and this name right here is essentially let's uh let's do my coding one I'm gonna pull over here on the side I have all this code up over here on the side because I don't have all this completely memorized which is okay I wrote this before here we go coding so the name is just gonna be called coding and this is essentially what runs in the background this isn't gonna be showed to the user it just needs to be just needs to be set up for you but the label here so you can hit tab label does need to be this will be what's shown to the user the next thing you want to do is this is you want to show it what folder these are located in you can see that I organized all my content into folders so I just need to point it to that so I'm gonna say this is in the content folder and then I'm gonna say it's in the coding coding folder subfolder there is a key here called create and I want to set that equal to true so that way it shows that there's a create button on the website there are times when you don't want to allow the user to create things just allow them to edit them and then there's something called the slug and the slug is essentially how it is set up to name those files you can see in here that every time I create a new file it creates a of the year and then the name of the of the page it uses the title so you can see you're building a website using Hugo and it puts dashes in and makes it all lowercase so that that slug and how you setup that is I'm gonna set it you type in two curly braces I'm gonna type in year type in two - or one - and then type in this slug and what slug is is that's actually going to take your name and partially out make it lowercase and add dashes whether our spaces so every file is going to be named the year and then slug or the title of the file and then the last thing going to do is you're gonna add fields and these are kind of where those you know title and stuff is in so I'm going to type in label and ylabel I'm gonna do the title right so that's what's gonna show to the user but what you want now is you can see in here that it's lowercase title in this configuration on this this frontmatter right so right here when you type in the next piece which is the name this is where you can type in what shows up in there the next thing you want is the type of widget I'll go I'll go to the website and explain this to you but the widget is essentially what is this I want the user to be able to type in a string and then you can also type in some they're not they're optional arguments but some other things oh let me fix this this is not spelled right OOP there we go some optional ones are things like you know is it required I'm going to say true every post should have a title or what is the default right I don't really want a default but I could put a default like hi-hi there right but I don't really need to default because this is a title defaults are for other things now there are tons and tons of other types of widgets we can go to net Liffey CMS's website and right here you can see that they've actually break this down the name is the post type identify are used in routes the label is what the post type will be called in the admin UI the where the this folder is where the files are or these types are stored and the create is set the Trude a lot of the users to create the collection you can see the slug here you can add things like the year the month the date and it'll actually create a URL safe version of the post title the fields down here you can have you have to have a label a name a widget and you can optionally set a default kind of the things I just went over over here you can actually set it up to filter certain things like place things that have certain languages if you wanted it only wanted to edit English posts if you actually specified that on your hugo website but if you scroll all the way down or i'm sorry all at the top you can see up here inside that little post over here that there are the widgets so there's a widgets reference over here if I click on that they're going to show you all the widgets very easy to understand the one that we used is called string it's a text input it's going to save it as a string and it accepts a string defaults to an empty string they have all sorts of things you can add boolean z' dates date/time the file so you can upload files there's a hidden section so you can actually add and I actually do this myself I'm gonna go ahead and I'm gonna copy and paste all these fields because there's quite a bunch let me do this for you real quick there we go you can see here I actually used the hidden one right here because to tell my website and to fake it I explained this in the previous video but basically to fake it I have to say that it's type post and I don't want the user typing it in every time so what I do is I say the type default is post and then I hide that so the user never sees that as that that that is going to be added to that frontmatter on that post but it does get added anything that is not added in here well will not show up when you use the net Liffey CMS now I'm going to go ahead and copy and paste all of my configuration file there's just a lot in here and if you want you can check out the repository for my website on github.com slash Chris state I have all my code on there so you guys can view my blog website at any time and see how far I've gotten with it and see everything that's on there but this kind of goes through and adds all those collections on the side that you see and all of that right now that I've got all that set up what I'm gonna do is I'm gonna push that to my repository and it should build now there is one thing that we need to do and that is called identity in your identity tab if you don't have it enabled go ahead and enable it and you can see here you can invite users you're gonna want you're gonna want to go ahead and click invite users you're gonna want to type in your email address I'm just gonna use my Gmail here I'm already added you can see right here but if you want them to be able to log in using Google you're gonna want to click on settings and usage scroll down to external providers and you can actually allow your users to log in using Google bitbucket github or gitlab once that's enabled and everything's working fine you can just go to your website I'm gonna open up a it cog incognito website so I can show you guys kind of the browser I mean I can show you guys kind of the portal that shows up so I'm going to type in blog Chris state com slash admin and what pops up this time is a log in and a log in with Google you can also set up a user with a username and password but I typically like to use Google because it's faster and just one less thing to memorize now that that's working I can actually go to my website and you can see right there boom I have all of my things set up and ready to use it's awesome it's beautiful you can upload images here you can see I can view all my images I can upload new ones I can delete existing ones it's amazing and super easy to use if you guys have any problems getting this set up please just leave a comment down below I'll try to help you guys out the biggest thing here is that I've noticed that when you guys are asking for help you're not uploading your your code to github which is kind of the first step for me but to be able to help you so if you guys need some help just upload that code to github and then write and you'll post a link in your comment and I'll I'll try to take some time to look at that and kind of troubleshoot or debug that on my own and get back to you through the comments section alright well I hope you guys liked the video I know it was a short one I didn't want to take too much time I know that I kind of covered a ton of stuff in such a short amount of time but please one of the biggest things that I always recommend is read your documentation read that website it's gonna explain everything that you need to get through if you're stuck and you have no place to go look at my repository on github check out what I've used check out what I'm using and see if you can troubleshoot it that way if all else fails go ahead and throw a comment down below let me know and I'll try to help you out personally I know that sometimes this can be a struggle when this can seem like it's a never-ending task but it's not impossible guys and it's super easy to do alright so if you guys want to go ahead and check out my website blog Chris stay calm go ahead and subscribe to my channel that helps out a lot hit the bail notification if you want notifications when I upload videos or you can just check out my page every couple days check me out on Instagram comm slash Chris State and I'll see you guys on the next video [Music]

Channel: Chris Stayte

Views: 42,166

Rating: 4.8573389 out of 5

Keywords: Netlify, Hugo, CMS, Coding, Chris, Stayte, Programming, Website, Development

Id: _CNZJLYvINc

Length: 19min 10sec (1150 seconds)

Published: Tue Jun 19 2018