Turn static HTML/CSS into a blog with CMS using the JAMStack

in this video what we're going to be doing is taking a look at this site here which is a blog that i put together and uh it looks like a regular blog like this but the fancy thing with it and the nice thing with it is it's all static files it's static html css and javascript except updating static files to create a new blog post would be a nightmare and be really bad but look at this it's static files but we can just come in here go over to my admin and i have an admin panel look at that there's my admin there's all my existing articles i can make a new blog post here let's go into this one here i don't like the title of it learn all about css inset i click publish over here publish it right now doesn't take too long and what's happening is if i go back to my page now let's just i'll leave my admin open let's just go back to my page check it out we'll go back over to my blog page and learn all it's updated the title look at that that was cool right i could update the image i can make any change i want through a cms and it's updating static files all on its own now it's doing all of this using a admin panel that is linked to github so it's pushing a change live to github that then triggers netlify to rebuild the site and the whole site gets rebuilt and publishes it online within like less than 30 seconds it's really really incredible and all of this is working because i'm using a static site generator called 11t so what we're going to be doing is i've already created an html and css page it's just static html css we're going to look at how we can take those static files bring 11 to you into our project convert those static files into template files get all of that onto github get github connected to netlify and get it all working it sounds like a lot of steps you'll notice it is a bit of a longer video but i've timestamped the whole thing for you and it might seem like a lot but it's actually a lot easier than it looks and i just think this is such a nice way to work hello my friend and friends and welcome back to the channel if you're new here my name is kevin and here at my channel normally i'm diving into the wonderful world that is css but as you can see here we're going to be doing something a little bit different but before we dive any deeper into it i want to let you know that this video is being brought to you by code mentors dev projects if you've been following me for a little while you probably know that i'm a really big advocate of learning things by doing things and by working on projects instead of just following little individual tutorials and because of that i absolutely love dev projects it's a free community where users can learn by working through projects that are designed by senior developers by mentors or even by me because this is my solution to a challenge that i put up over on dev projects now if you get stuck along the way or if you're just having trouble with your front end journey in general dip projects is created by codementor a platform that enables users to connect with mentors live with one-on-one time to help you work through the issues that you're having as i said i put a project together for them on their dev projects and it's one that i'm really excited about because i've really fallen in love with the world of static site generators when you first get into the world of static site generators it can sometimes feel like there's a lot of different things to learn at once so the whole purpose of this tutorial here is to try and simplify that world as much as possible so let's go and dive into the code all right so we are here in github right now and i am assuming a little bit for this project that you're familiar with at least the basic git flow because it's going to make your life a lot easier as well as maybe have used npm before for a few different things and just it's a little bit more advanced than just like very basic html and css but i will try and break things down as much as possible along the way if you're not already on github make a github account because it's also going to be the easiest way to get started with actually getting it hosted in online as because if you're using netlify or other options even github pages you need to have your page on github first and it makes the workflow just amazing as well so we're going to be seeing all of that as we work our way through here just really fast if you do want the link to this starting repo right here it is included in the dev project so check out the link to the dev project down below from there you can find a link to both this starting repo as well as my solution because that's one of the nice things with dev projects is not only can you find projects to work on but you can also share your own solutions and get feedback on them as well now in here i've already done all the html and css as static files but that's not going to help us with what we want to do if you want to try and sort of challenge yourself to even do that stage i've also included the design file so you can go all the way back and build it out from scratch and then go to the next stage which is what we're going to be focusing on in this video of taking static html and css and turning them into templates that we can use for a blog or anything else that you want to do with it really but in this case it will be a blog and so what you can do is you can just come here and you use use this template and that's going to let you make a repo so we're going to come in here and call this um we'll call it uh 11t blog site because i don't know i'm not being very original if you want you give it a description hopefully you gave it a better name make it public private it's up to you and then just create uh create repository from template and you're be off and running it shouldn't take very long and now i'm also a very big fan of simplicity i like gui's user interfaces all of that so i'm gonna go here and i'm gonna open it with github desktop if you prefer working from the command line all powered to you but i'm going to open this in github desktop nice thing here it says where it's coming from where it's going to be saving it to and i can click clone if you don't have github desktop already you might have to install it but it's very easy to use so i can click clone just like that and to download all the files put them on my machine and i'm ready to work and then i can just click open in visual studio code and just like that i'm off and running in vs code which is just wonderful um so let's actually go and check out what we're going to be starting with because we do have some things here so i for now i'm going to click this go live button just so we can see the design that we're working from and then we're going to sort of backwards work this into a template as we go and we're going to learn a lot about 11t along the way so currently we have something that looks like this my images aren't quite working right now but that's fine uh we'll fix those up um the link a lot of these links aren't going to work just because we're going to be changing the setup in here so we also have my all articles let's go and check that one out so the all articles is just going to be a list of all the articles that are going to be in there and the last thing that we're going to have is the individual article page as well so we can open that one up and right now it's a little bit broken and actually that should be pushed down to the bottom but we have the individual articles that will be coming in here as well so we have different things that will be coming in just a basic template that we can work from and turn this into an actual from a fully static site to something that will can be turned into something a bit more dynamic um so the very first thing we're going to do before we worry about anything else and worry about these files and how we're going to set things up is i'm going to open up my terminal um because we need to come into the command line for a little bit of this stuff here if you're not used to the command line we're not going to do anything too scary but if you've never been in there what you're going to have to do actually is start off by going to and i'll link this down below as well node.js.org and downloading node because this comes with the node package manager which we're going to be using for this project so it's important that you have that already if you don't it's just you click download you click in next next next and installs it on your computer and then you can do these next steps so what we want to do and we want to come in and say npm init hyphen hyphen y and that's going to initialize our project and the hyphen y is just saying answer yes to all the questions because it asks a whole bunch a lot of the time we just use the defaults anyway so just like that we it makes it and that what that's doing is it's giving us this package.json and then i'm just going to write clear there so we can get rid of all that and the next thing we want to do here while we're here is we're going to do another npm and we're going to install and what we want to install is 11t and it is a scoped package so you're going to do an 11 t like this so 11 the number 11 t y forward slash and then you're going to write 11t out and then you do a space hyphen hyphen save dev and i'm zoomed in so it's breaking over multiple lines but there you go normally it would look something like that and the reason we're writing save dev is because this is a dev dependency it's something we need for the development process but it's not something that we'll be public facing so it's going to let the project know that we need this as something to work but only on the development side you hit return and it takes a little bit to install it's going to grab all the files and all the stuff it needs for 11t to work and it's going to create a node package node modules i should say folder in here and it shouldn't take too much longer let's go let's go there we go node modules and that's just full of stuff you don't want to go in there don't even worry about it it's just there if you've never used npm or you've never had your node modules before just it's there we need it but you don't have to worry about it so now we have 11t installed in our project and so if i come and look i have now my package file and i have a package.json file and the package.js oh sorry a packagelock.json file in the lock you're not going to come in here it's just making sure you have the right version of everything that you're going to need along the way you won't be going in that but what we will be doing is going inside of our package file here so just the regular package.json and we're going to come in our test script and we're going to delete that we're going to replace it with and you can do different things here but i'm going to do a start command another one that's often you'll see here is a dev so your dev you do an npm run dev when you're doing your development work so you could have dev i'm just going to start because it it's a little faster and here what i'm going to write is 11t hyphen hyphen serve and the serve there is just a flag that we can run uh that's going to have a live server running for us so we can it uses browser sync which is wonderful and then we'll do a build here build and we'll write 11t and that's it we'll just do 11t just like that i was going to put something else but we don't need anything else it just works when we just have that right there um so i have my start which is going to serve it's going to have the the server running for us hit save all the changes come it's browser sync it's wonderful and then we have my build and 11t here which is when we need to build the site it's going to run that command and we're almost ready to get going but we do need to create one more file uh which is a configuration file for 11t so i'm going to click a new so it's going to be a dot eleven t dot js so in here we're gonna start simple and we're slowly gonna have to add a little bit more to this configuration file uh but as very basic we're just gonna start with a module.exports and where it's going to be equal to a function which we're going to put 11t config in here and basically what i want to tell it is where my source files or my source yeah where my source is coming from where am i working from and also where are the public facing files going to be located and that's the very first thing we want to do and if you're just wondering how i'm setting or like why i even know all of this this is from the 11t documentation right here you can see it's talking about all of this right here anytime you're using something new i definitely recommend checking out the documentation making sure you understand why you're doing different things so you know and that's you know i'm not just figuring this out on my own uh it's always through the documentation that we learned and so we can see there's the basic example now because um i you'll notice here's a really basic example and then here it's within like here we have the module exports and then here it has the function i am doing it with the function here because we will have to be configuring some extra stuff after so just we don't have to add it after the fact and then we can still have our input and output so let's come and drop this in there so we're doing a return directory input and i'm also going to change the output so here we can put output so the input in this case is my src so i want to tell it all the files i'm working from are in my src folder if you don't put an output it's optional it's going to output by default to underscore site so if you think that's fine then just you don't have to include an output i'm going to change this to public just because i do think it's a bit more obvious this is my public folder this is the one that everybody is seeing and my source is where i'm working out of if you have a different way you want to work there's nothing you know that's perfectly fine we're ready to go and now we can start using 11t just make sure you save your file because sometimes i forget to do that um so it knows that i want to be working out of these files over here and i already have some html files so watch this if we just come let's open up my terminal again and to open up the terminal i don't know if i mentioned it before you just go to view and you go to terminal it's right there or you can see it's control backtick and if you're on a mac it's probably command backtick and now we can do our npm start because if you remember before i do that in my package we said that the start command or the start script will be 11t serve so npm start hit return on my keyboard and there we go it's launched it locally you also get a little ui and if you want to check in something on your phone you just go to that address on your phone as long as you're on the wi-fi the same local network it will work it's fantastic um now there will be some things that aren't going to work properly just because of 11t but we can see at least we have something that's working here i have a page i don't even know if the links are going to work right now they're not but that's okay we're going to get all this working as we go through it even the css is broken everything is broken you might be well why is the css broken and interestingly enough if we come and look here if i look in my source folder and my all articles my index and my individual article and what 11t has done if we go into my public folder now we can actually see that it made an index and for all those other ones it creates like pretty urls so it makes like an index within the folder so you know it just means that you don't have an extension at the end like a dot html you just go to individual article and you'll find that page but you'll notice it hasn't brought the assets and it did bring the blog because the blog has markdown files so by default it's taking html files markdown files other templating languages it will automatically take those but what it will not take and it won't touch is other things like this assets folder which has an image in it and images over here and it did not take my css file so i actually have to tell 11t to do that so to be able to change a configuration file we have our 11tjs that's our configuration file to be able to change that you want to stop this process because you can't update a configuration file it's not going to change if everything is running so i'm going to do a control c and that says terminate job i do yes and now we can clear that and we're we're not running anything it's not watching my files and i can come in here and this is why i wanted my 11t config in the first place is to tell it we do want it to grab a few of the files we need our css we needed our images and all of that so to tell if you ever have things that you need 11t to take and pass through to from our source file to our public folder that it's not doing by default we have to tell it to do that so to be able to do that we do 11t config dot add pass through copy like this with the camel case the same way and then we tell it what we want it to pass through so the first thing i'm going to do is make sure we're going to our root we're going to go to our src and we want our css so we can say style.css like that make sure you have a semicolon at the end here and then we can do another one e11t config dot add passthrough copy and this time where do we want to go we want it to go into our you can actually tell it you can use globbing here too if you find it a little bit easier but i'm also going to tell it to grab my assets so it's just going to go and find in my source my assets it's going to take anything that's in here so just by including the folder you don't have to say every single file because that would be a nightmare so if we do that and i hit save and now we do an npm start once again so it should do it it's going to rebuild all my public folder and now we can go and check it out and now i look my images are working because they're being passed through and this first image worked because i think i had an on splash image there but these ones weren't coming through before so now those images are coming through and the links still won't work just because of how we set things up but at least my images are coming through my css is coming through we have a layout that is working now so first step is done all the things we need to get to that endpoint are now going there so that's already kind of nice but now we do need to start turning this into a template instead of a static html file because the reason we want to do that is if you had an actual blog that was like this and say right now i have some featured articles right so when we looked at that page we saw those featured articles and i don't want to have to come into there and say okay i'm updating my featured article so i'm going to delete this one from here and then i'm going to change this to another article and i have to do this all through like the hard copy oh my goodness that would be an absolute nightmare so instead of having to come in and do everything hard-coded in here i want to set it up with templates that makes it easy peasy link it into a cms and we're rolling so it's not as much work as you might think it's going to be so what i'm going to do is i'm going to end this process for now just because i don't want it to be building new stuff as i'm doing all of this all the time and we can do a clear and what i'm going to do is delete my public folder because there's stuff in here that's going to we're going to get rid of so continue yes delete please all right so the very first thing i'm going to do is we're going to come into my source folder i'm going to make a new folder called underscore includes and this is the way 11t is set up by default it's going to look for an includes folder set up exactly like this so that's why i'm calling it underscore includes and the very first thing i'm going to do in here is i'm going to write a base dot njk njk is short for ninjax it's a templating language nice thing with 11t is there's a whole world of templating languages that you can use and you can choose i think remotely there's so many you can choose from it's crazy so i'm going to be using njk because i'm familiar with it if you prefer other ones or you already have a templating language that you prefer you know go with that um so for my base what i'm going to do is i'm going to do an exclamation point tab because i want this to you know we want this base thing we don't have to include that on every page we want to have a template that includes that for us so here i have all of this now actually one really fast thing if you go to your settings which are under file preferences settings or control comma probably command comma if you're on a mac come up here and write emmet it might not work by default so you actually have to tell emit to look for like in this case njk files that it will transform or it will treat them like an html file so if i use emit within an njk it treats it as if it's html and i get all my html emit functionality so you might have to add a different thing in there depending i remember getting stuck on that being very frustrated when i couldn't use emmett at the beginning so there we go that's the very first thing that i want to do so i have somewhere that i can be working from and now what i'm going to do is i'm actually delete the title and we're going to come here and i'm going to write title and what this means is now the title has become dynamic i can insert every page i have can have a different title that's going to get inserted into here we're going to see that magic happen in a second and over here what i'm going to do for now is we're going to write content i'm going to do a pipe and we're going to write safe and we'll see why i'm writing it this way in a second so it's double curly brace content put a space then a pipe a space and then safe and here too we have the w double curly brace so this is like the most basic possible template that you could ever have and what we're going to do is we're going to come into our index file here and we're going to delete everything that's part of the head we'll go all the way down and actually we're going to delete that body tag right there too we'll delete you and then what we'll do is we'll go all the way down to the bottom and we're going to delete my closing html and my closing body that are right there and now normally this would sort of break everything you have a site that doesn't work uh but what we can actually do with this is let's just right click on there and go to rename and i'm going to turn this also into an njk file so now my index is an njk and then i can come up here and i can add these guys right here so it's triple hyphen and then triple hyphen down here as well and this is so i can use front matter and front matter is not just something that's with nun jux it's with any templating language it's also we're going to use it with markdown files after so this lets us add like meta information to the page pretty much that we can use within our templates so the very first thing i'm going to write uh let's just try title memory example for now just so we can see that it's actually working and we're going to come here and we're going to write in a layout and in quotation marks i'm going to write base dot n jk and hit save and now let's come open and we'll do an npm start let's see what happened along the way here so we're going to open up our local host again and you can either control click on it to open it or just copy and paste it and you can see that my page has come in it's built a page for me and i have content and you notice up here it says example so it's it's found my example it's it's using the title here and actually you know what let's just highlight this even more how this is working before we move on so i'm going to close this i'm going to let that keep running in my base here before we get to the content what i'm going to do is i'm going to write in h1 and we're going to write title here title and let's close that off hit save and now you see here it says example at the top in nh1 so if i go back to my index and i change the title to my home page and hit save it's going to update here at the top we have it in a bunch of files but we see my homepage is up here at the top and it's updated this here so it's taking this metadata here that's within my front matter and it's injecting it anywhere that we put the title like that so that's what these double curly braces are for now the reason that we have the content one here content is like a special one so it's just gonna take the content of the page so it says anything outside of the like after my front matter anything that's down here it's going to inject into the page as the content itself and you can include things after content but it's going to take the content but it's really important to have the safe here if you don't include the safe we're going to see a whole bunch of html and here's my svg that i'm using it becomes a mess because it's going it's taking it as a string whereas if i say pipe safe instead of taking it as a string it's saying that it knows it's getting html and it's going to render it as html instead of rendering it as a string so there we go we can see that we've fixed that now we did run into a problem if we no longer have my css file so let's make sure we link to the css so we're going to link link one thing that we're going to do here on the link is because this is uh you know i could write style.css here and it should find it but i am going to do it with um i just want to make sure that it's starting at the root folder um not the root of like the whole thing but i want it like it's going to go it's like here we're in my public i'm at my index but we have other files that are in subfolders so this is just going to make sure that we're always going back to the root and getting it like the actual write file so if i do that i hit save there we go my css has come back in so this is all based on here and we don't need this h1 here anymore either now another thing that a lot of sites will do is the header the footer you know you have your navigation your logo things like that sometimes you need to update it you don't want to have to update it in six places at once you only want to do it once or your footer text updates and you don't have to go to every page and update it you want to update it once and it should populate across all the pages so we can do that nice and easily so what we can do is let's go back to my index and i'm going to grab my header so we have all of that we're going to go all the way to my header there and we're going to cut that out so we can come into my includes and i'm going to make a new folder called header.njk and i'm going to paste it right in there boom we have my header.njk um so we have my my headers coming in here um and then what we can do is we go back to my base and so before my content what we want to do is include that header so to be able to include it what we want to do is uh it's like this so it's using a curly brace and then a percent sign the reason it's doing that instead of the double curly brace like this is the double curly brace will look into your front matter it can grab information about that that file from the front matter from the metadata that we included in this case it's with this guy here and this is this is part of ninja so other languages might be different than this but with ninjax we're going to do it like this and actually just before i even say this this is one of the hard things about learning a static site generator is you're doing static site generator configuration and stuff like that and then you're coming over here and you're not it's not the static site generator that i'm learning now i'm actually learning nunjuks and using nunjuks here that my static site generator is able to parse and turn into an actual and compile that into html so i'm sort of learning two things at once i'm learning the static site generator how to set it up all the ink interested all the weird things with that and i'm learning a templating language too so sometimes you get this weird you don't know which one you're looking at you don't know which documentation to look at it's normal we've all been there so don't stress too much the more you do it the more you get used to it a hundred percent uh so here we do it like that i'm gonna write include and then in quotation marks and i always say in quotation marks because if you don't do it you runs into problems and we're going to write a header right header dot n j k and hit save and there we go my header has been reinserted up in there cool if i go to blog is it going to work now no we still don't have a blog page um because i called it all we i changed the names around so we're gonna fix those up in a second but before we get to that let's come in and do my footer so for the footer we can go back to my index here go all the way down grab the footer cut that out and then come over to my source come into my includes make a new file called footer dot n jk and paste that in here as well i don't have formatting on right now so it's not looking super nice but it's going to get the job done so i have my footer file then we go back to my base file and you'll notice i have lots of stuff open now i'm going to do a control p and just write base because then i don't have to look for the file i can just do that and it opens so once again we need to include it so it's with my percent symbol include footer dot nj jk there we go hit save and now i should be able to see my links up here and my footer is down here at the bottom nice so let's get this working a little bit with my other ones that i have set up here so i'm going to go to this all articles which was the wrong name this is my blog page i just want to be able to get to that so let's rename this i'm going to do a rename we're going to call it blog but we'll also change the extension now to njk so we have now actually we should be able to go right away there we go we have a blog page look at that it's working my to figure out why my css isn't working but at least i know why it's not working but at least we can go there we can go from there and then go back to my home there we go things are working a little better uh so on this blog page what i actually want to do is delete everything including the body right there and actually we want to delete my header too right we don't need the header anymore delete all that we can come all the way down and we can also delete everything including the footer uh there we go so we hit save because what we want to do is just say that we want my in this case the title can be uh recent or we just call it my blog and then we want the layout to be my base to be my base dot n j k so if i hit save this page is all working if i click on blog we now have this you can see we have a little problem there that's fine we're going to fix that later but as we look through there everything is working so that's great my css is working all that's working and where the real power of this comes and just to show you like this could be one example is you come in and you decide that your header you need another page so you copy this you paste it here and i don't know what this is gonna be say a contact page we're not actually going to make one but let's say you needed a contact page so now if i hit save here it's going to update on this page but if i go back to the home it's also here like it's updating both at the same time or if i go to my footer where i have company name i go i don't i don't mean that to be company name so let's just do a command p footer and this should say copyright 2021 kevin powell and hit save and it's updated here and if i go back and i go over to my blog page it's updated there as well because it's using this template across all of them and guess what we could even come in with some javascript and have this updated as well so it's actually like the current year all the time so an extra extra challenge for you to do if you want to come in here and make that a bit more dynamic so you don't end up with the wrong year at one point which is never fun so let's go and delete this page right here for now all right so we're starting to get there we're starting to get something fun to happen but there's a lot more to it and a lot more we can do but i just think just setting up templates like this is something people always ask about and you don't need something like php or something like that to get it to work you can do all this and have it coming out of static files at the end of the day which is really really awesome and really really cool another change i'm actually going to make here just because it makes your life a lot easier and you don't forget things if we come here and we wrap our main here it just means that we always know our content is inside of our main tag which is nice semantics and it means that along the way you won't forget it so i'm also going to come and delete that from here because for me when i'm creating a page i just want literally the content that i'm putting in there and not have to worry too much about the other you know making sure how it's set up i just want to know it's going to the right place automatically and so i can set that up just like that and now what i'm actually so let's go and do that also on my blog page for now we're going to have the individual article page that we need to update as well but let's just take these off for now there we go and delete that all right so the first thing i want to do is we have a blog page on my blog page as i said i don't have to generate the content for this page every single time i want this content to be automatically generated if i make a new blog post and as we saw if i come in here i made a blog folder with markdown files we saw already that in my public folder in the blog it was generating those into html files so they're all in their html files for every blog post because 11t automatically takes markdown files and turns them into html files so i want to make it if i add a new one it's going to go and create that for me i don't have to do any work it's just going to add it to this page done as done so let's see how we can do that so let's go and open the blog page itself that we created cool and you see everything is hard coded in here and hard coding things we don't want to do that as much as possible so let's just look at the page i have my section container i have a title that's coming in here then over here i have my list and then my list is broken up into all these little snippets article snippets pretty much okay so let's grab this list i'm going to take it from just the first li and i'm going to copy that and then i'm actually going to delete this entire list all the way down delete the whole ul and we're just going to leave it just like this hit save and everything just vanishes and we have we should make something to make the footer stick to the bottom on short pages but there we go we have it like this and you know we want we want to do a little bit more with this okay so what we can do to make this work is we can leverage 11t being able to loop through content now one thing that's really important to be able to loop through content is uh 11d has something called collections where you can organize stuff which is like through tags and all that so if i come and i look at my fourth article here and my title my author my date my image all of that you could come in here and you could add a tag and we could say it's a post um or it's tags tags post and because you can include multiple tags if you want and we're gonna see that in shortly but here i have my tags of a post and if you don't you might forget every now and then that you need to include a tags of post and that would suck because then it wouldn't show up on your blog so just to ensure if you have front matter like in this case the author i'm assuming could change but if ever you have front mattered here that is going to be the same every single time and it's never going to change what you can do is in my blog folder here i'm going to make a new file and we're going to call it blog.json and when we're in here we we can do whatever we want now it is a json file so we can't do front matter this way but we can still include front matter that we want to inject into every single page every single time uh but because it's a json file we're going to start by curly braces and then in the curly braces we can come in and this time it's a little bit different because we're in a json file but we can say layout and then you can define a layout now i'm not actually going to skip layout now just because i want to we're going to see what happens if we skip it and we're going to need a different layout for our blog articles anyway but what we can say here is tags are going to be post just to make sure that every single one of them does get a post on it and we're going to leave it like this for now we're going to make one other change shortly here as well so i'm just going to say that so every single one of my pages is getting the tag of posts no matter what which is important for what we're going to do next all right so what do we want to do we want to actually let's just come here i'm going to make a comment so there's what we'd already copied from our other page so we want to instead of having to manually do it we want it to be able to loop through all those posts that we had so you know we created our po our blog thing here to make sure all of these are considered posts so we want to be able to loop through all of those really really easily so what we can do for that is let's start off with our ul here so it's actually we have a bit of one with some classes on there and stuff so we'll copy that and we'll do a close ul like that and then what we want to do is come inside of that and we want to create a loop that's going to look at all the different things that are in there so to do that what we're going to do is we want to create a loop is a little bit like what we've seen but we're also going to add in some hyphens there too so it's going to be your curly brace percentage hyphen and then what we're going to do is create a loop we're going to say for post in collections.post and make sure it's collections not collection so for post in collections.post and then just before we forget we also want to make sure if you have a loop you also want to make sure that you do an end for to end your loop and so there we go we have a loop that's going to go in it's going to look for every post that's in my collections.post and if you're wondering what a collection is it's basically when you use your tags it will group it in a collection there is a special one called collections.all which will include all of your collections but because we are using tags we're going to use them in different ways we can do this right here so we're going to loop through all of those posts that we've created so here let's just make it really easy uh to begin with so we'll do an li uh so we have our li let's come here we have our article class of snippet so rtcol rt cold dot snippet so we can keep things like they originally were and then just to keep things simple for now we'll do an h3 of a snippet title so it's styled properly and here we can include our front matter and get the title of each one of our posts now because we are going through a loop and we need to tell it to look at each one of the posts in our loop what i'm going to do is say post dot data dot title so the post means look at for each post that we loop through look at that post go into the data so go into that metadata or the front matter that we had and find the title so if we did this properly i hit save and we should find my first my second my third my fourth they're all showing up super cool right so now it's just a matter of filling the whole thing in and doing a little bit more work on it so normally we had the h3 we had the image that was coming at the top too so here we had my image dot snippet image and interestingly on this we had a source so let's just go here and once again this this should be pretty simple so we have our post dot data dot image and if you're not sure on any of these just if you go and look at any of them you can see that i just called it image so it's going and it's finding the title now i want to find this image so my uh drew where is it post.image and the alt what we can do is we can do post dot data dot image alt since that was another one of the ones that i included so if we go back to here i have my image alt this is a test it's going to grab that so if i hit save on that now we should not only get my titles coming in but we should also get some images coming in and it's not because uh silly me i forgot to close my my curly braces right there so let's close my curly braces oh there we go now my images are coming in and the layout's working just because i already did the css for it so they're all falling in the right spot um but there we go so we have those coming through and i like just spacing things out just to make it a little cleaner to read um so we have my image and let's turn off word wrap for a second so we have my image my h3 uh the h3 we could turn the title into a link i'm gonna look at that after though because it is a little bit different but i'll fill out the rest of this because it's pretty straightforward and all the same and a little bit boring if you watch me do the whole thing um so i've got the rest of it in but there's a few things that are going to be a bit off and we're going to fix them one at a time so if we come and take a look you can see that and i've just done like post.author so it's bringing in my name and the date and now the date's a little bit funky so that's definitely one of the things that we need to fix there um also my links aren't going to be working just yet we're gonna look at how we can fix the links and they're in the wrong order um so normally if you go to a blog page the newest article is at the top the uh collections like this will always just go from the first one and it goes in the order that you've created them luckily we can just throw a pipe here and just say re-re-verse hit save and it's going to switch the order to them so that's the easy one that's the nice easy one that we can do right there to change the order for links links are a little bit different because what it's going to be is this post.url this is the reason it's post.url and not post.data.author is the data means like go to that post go into the metadata or that front matter we created and find the url in this case we're not finding it's not in the metadata it's just the url for that post so this is like it's being generated on its own so if we do a link like that it should hopefully continue reading it's actually working there we go so we're coming in these need to be fixed up we haven't got there yet so at least that's working and we can use that same thing if you want your h1 to be a link or your h3 so inside my h3 we could come in with a a and then the same thing here we could do a post url in there and then we just move this on over to the other side like that and so the title will be wrapped in a link and then we can click on the link and it will also bring us to our post so the nice thing with all this is now if i came in and i create a new file and do 20 21 slash we'll do 06-16 just so it's a different date my uh we'll say a a new rtcol dot md and let's just put in like lorem is lauren i'm going to work in here lauren's not going to work in here let's grab some from a different article let's just grab this paste it in there hit save if we go back to here if we go back to that other page that articles come in now it's missing a lot of that metadata we don't have an image we don't have the other things that are coming in here but you can see it already created the new page there and on that new one that i created we come in we can say uh title a new article hit save now that new article the title should there it is uh we can see it has a new article has shown up there we can come in and add a description hello world hit save and we get a description that should come in in a second there it is and so on and so forth so it becomes really easy you need another blog post you add another one it automatically gets inserted at the top of the page right where we need it to be i'm going to delete this one because we don't have much going on there we'll create a new one later on that's a little bit better though but we still have quite a few things that we need to get done to get this thing fully functional um so we switch the article order which is really good that's perfect there is another issue here in my opinion that's coming up which is uh now another issue is the date and this is just how 11t likes to generate dates is in this format and which is obviously a little bit problematic with how the dates are being generated so what we're going to do is i'm actually going to open up my terminal we're going to cancel here because we need to go into our config and make it so that doesn't happen anymore and we don't get the big string like this and so to do that what we're going to do as i said in my 11t config we're actually going to go all the way to the top here and we're going to set a const uh and we're going to call it date time and we're going to write require luxon and what we want to do is be able to change how it's sort of setting things up a little bit or how it's outputting the text uh so to be able to do that now we do our 11t 11 11 te so we want to make a new 11t config and in this time it's going to be instead of an add pass-through copy we're not doing anything like that what we want to do is add a filter uh we're going to add a filter and so i'm going to call it post date then here we're going to say our date object object just like that and we can have ourselves a nice little function so we want this to return so we return so we have something coming out of it and we're going to write a date time from js date and that's th this is our this is our js our javascript date that we're getting there so from our javascript date we're going to take our date object so it's it's grabbing this which is our date object so from here we're going to say two local uh two local string whoops two local string there we go let's turn word wrap on so it's a little bit easier so we have our date object two local string say our date time date underscore med just like that and so if i hit save on that let's turn word wrap off so again it's date time uh there we go we can see more of it uh date time from js date with our date object and then it's going to convert that to a local string using the date time date med that we have right there that's all coming from luxon so the date time like you know why date med like that that's just that's using the lux sign here which is a date formatting thing so if i save that now and then we open this back up and we write npm start whoops not starter we made npm start just like that um it's now we're able to use that now the thing is this is a filter so a filter doesn't work out of the box so if i go and take a look here we can refresh we can see it hasn't changed anything so what we want to do is go back to our i think that was our blog right yeah so where we have our blog and where the date is coming in which was uh here we go post date um and actually we could do that as a data date too because i've included it there but um the post date will actually grab it from the file name so if you start your file names with the date that's where it's going to grab the dates from so you don't necessarily have to include it as front matter and so here what i can do is post date and we can use the filter that we did and just as a reminder the filter that we did here is my post date so it just means we can use this post date right here so post date just like that hit save and now we have properly formatted dates that look a little bit nicer and i'm going to give a full shout out to stephanie eckles for this one from 11t rocks 11t rocks this one was something i was having some trouble figuring out so from here 11t config.js config samples and in here where is it where is it uh date shortcodes and filters so there we go and even actually here if you wanted to fix that that one at the bottom where you could bring in the year automatically uh but here's where i got that from so i was digging around for a while and luckily i found this this here and if you're learning 11 you want to know more about it and some useful resources the link will be down below for 11t rocks because it helped me out immensely so thank you very much stephanie um all right so we're getting there we have this all working all my articles are showing up which is awesome they all have the properly formatted dates but now when i click this we obviously need this to be formatted properly okay so for this one i did create a template already for us so that was the individual article so let's grab this so we can just take this whole thing i'm going to cut it and we're going to delete you from here uh you can move it and rename it i guess but we'll go back into the includes and i'll make a new file and we'll call this article dot n j k and we can paste it in uh just like before we don't need to have all of it all the way up to our main because remember we included the main in our base file so i can delete that and i can delete all of this right here and now we have an article here so here in our front matter we can say that the layout is base dot njk just like that and obviously we don't want to be coming in with things like my third article and this is a test and all of that so uh here once again we do want to set this up with the same way that we set things up earlier now this time we're not running through a loop or anything like that so i can just you have to think that this is being inserted directly in the page so we're not doing like our post.data.title we can just access title because the information is being inserted directly into this we're not looping through and pulling information from somewhere else to insert into another page this is to generate this actual page so i can just throw in title just like that uh so title here my uh this could be my uh open and close here is my image here it's going to be my image alt um and in this case actually we're gonna have i set it up to use a fig caption so we might as well use the alt text to generate our caption automatically within a figure just like that and so what i'm setting up here is we're gonna do this quickly and here what i can do is my content of safe and this is interesting what i'm doing right now because what we're doing is we're actually taking this and we're going to be taking other content that's going to get inserted to here and then this entire thing is going to get inserted into our base layout so we're sort of nesting or chaining together these different templates along the way so that's pretty cool and now what i want is i want every single one of my blog pages to use this template so i could go through and open up each one of my let's go to blog and then you open up each one of these and add that to your metadata or if you remember we created this blog.json which will do it anything that's included here will automatically get put on every single one so this layout we could say that this layout is going to use my article rtcol dot n jk make sure there's a comma at the end it separates it from here hit save and if we did this properly let's go back continue reading oh my goodness it worked and we have a layout that's functional and everything's working so from home we go to our blog all my blog articles are showing up here i click continue reading it's putting the title so it's using my blog it's it's using this article so it's using the article it's grabbing the title from that article inserting it here it's grabbing the image and the caption that i set up from the front matter all that's being done there and then it's inserting whatever content i need it in after that automatically it's just really really cool so i think that's really awesome and really neat that all of that is working and it's just it seems magical almost so if we added a new one the page would get generated the full page would get generated all of this would get put in and we have the blog that is going to be here it will automatically get added to my blog here we're almost done we do have a few things up to update still though and the main thing i want to focus on we're going to get this featured article area working and because right now these buttons aren't working and we just need a little loop here so it's the same type of idea and so we're going to get this section working and then after that we're gonna get our cms involved in here so we're getting there guys we're getting there a bit of a long one but we're getting there um now for this and the interesting thing is here you know i need to do the same thing that i did over here i need to grab all this thing and populate a snippet and well i already did that i just want to go through a bit of a different grouping of posts okay so the first thing i'm going to do is on all these posts you'll see i have a tags here of post and featured and the reason i have that is that's on my first one if i go here actually my second one let's delete that we don't want that we only want three featured articles but you could have as many as you want but as we go through these some of them i want featured and some of them i don't one thing i found out the hard way is that um if you add in the featured here it will like if we just say that the tag is featured it's actually going to remove the the one of posts so here if i just say that this is here uh let's just do that i hit save you will find out this is my fifth article so if i go to my blog you see the fifth one is actually disappeared because it switched it from post to featured so what i'm doing now is i'm just saying that if it's featured it also is post so it doesn't overwrite it we're gonna see when we set this up in the cms side of things though there's a nice little way to avoid having to like add posts in we can have that set as a default in there and we can add featured as a tag when we need to so that's just a nice little thing on the cms side that makes our life a bit easier so what we want to do is we only want to grab the ones that are featured and not the ones that don't have the featured tag on them so how can we do that so we've already created a loop that we could probably use but we only want it to grab the featured ones so let's go back to this blog for a second here and what i'm actually going to do is i'm going to take this whole thing i'm going to pull it out of here um so let's hit a [Music] we're going to grab this here and i'm going to do a cut and we're going to go back into my includes we're going to make a new include that's going to be rtcol snippet dot njk and we're going to paste that in here and you'll see why in a second so this makes this reusable i can use it wherever i want now so where i was already using it which was on my blog page we can now in this part here we can include it so include my in quotation marks article snippet dot njk uh just really fast if ever you put a space here or you have a space here whoops a space there it's going to break this it's not it's going to count that space as part of the file name so just make sure that they're always tight and you don't have spaces i've run into that problem in the past too so if i hit save on that actually let's delete this let's delete that whole thing and hit save and see my whole thing disappears so by bringing that back in hitting save it's taking that partial inserting it here and it's running it through that loop so now what i'm going to do is i'm going to grab this whole thing that we've already set up here we're going to go over to my index page and in my index page we have my featured articles my container my title my paragraph and then my ul so we can go through and let's just delete from here all the way down delete that whole ul and paste that same thing back in and we'll hit save and hopefully now on my home page if we go to home we should see all five of them fourth third second first i not save my let's go back to my fifth let's just make sure that's saved that should get generated and get put back in there we go my fifth one is now showing up now i don't want all five of them i only want to include the featured ones how can i do that i want you to think about it actually you're looking at this we've been playing around with it a lot how would you make it so instead of going and getting all of them it's only getting the featured ones so i hope you said here we have four posts in collections.post well i want my collection of featured and we're gonna hit save on that and now you can see i have my fifth my third my first the other ones are not included and if just for fun i go into my first one and i remove this right here hit save look at that now we're down to two so it's only going through and it's only including the ones that are have the featured tag on it if it's not featured it's not doing it it's using the same loop but it's looping through a different set of information so we've made it a lot easier to be able to do it if ever we need to update and have it update on all of my pages at the same time we have one include where we can change something here and it's going to change it everywhere so that could be maybe you don't want a button anymore you want to make this just a regular link well you just take this off we don't need that class anymore we turn that into a regular link and if we go back over to my blog page they're regular links over here too because it's using the same the exact same html everywhere inserting it everywhere ah so nice so there we go and again this is all coming out of static files at the end of the day on the user side so there we go this is all looking good i think actually my most recent articles is the only thing that's not working on my home page because i clicked on that before it might have edited that part out but this is going to my blog.html you can see here this the reason that image changes is because i used an unsplashed image there instead of an actual one um and actually the reason it's working is because i'm looking for my blog.html but as i said 11t always makes pretty links so everything gets if we go and look in my public it's making a blog that's then getting an index so i shouldn't have done in html i should have just had doc my blog there and then if we click on that it brings us over to here and then we get all our pages so just like that all of this section is done so we're going to the surprisingly easy part of getting this online and working with a cms all right so we want to get this up and online so the very first thing we have to do is get back into github or if you're doing this you you know we have git integration with vs code if you're doing it through your command line i've done everything here in like one big shot but um if you've been saving along the way all the better and we're just going to say we 11t fide the static pages and you know whatever we eleven defied the static pages so i'm gonna commit that all in one big shot we're not doing any version control here too much we're gonna push that up to the server and again if you're using integrated thing using the command line it doesn't matter as long as you get everything uh up and on to github because the next step after that once it's been put onto github and all your updates are there and live on github is to go over to netlify so i'm already here i have an account if you don't it's free to set up as you can see i have multiple sites here i have more than what you see here they're all running on netlify it's all for free they do have paid options and paid tiers but for most things that you probably want it for on a smaller scale there's no need to worry there's an upgrade and stuff but free plan all the way the only thing that's not included is the domain name just because we don't get free domain names but um all the hosting itself is free and it's really easy to you can either purchase a domain name through netlify or you can if you already have a domain it's the easiest thing in the world to link them together uh so i'm going to choose uh let's go back there a new site from git and i can choose github i'm already linked so you can see it's already authorized and we have my 11t blog site i've already added it to netlify uh by default i think you might you might have to go to configure the netlify app on github to find the repo that you want to add in sometimes it's all your repos other times it's not all of them it's only select ones and stuff like that so you just want to you know pick and choose um or you might just have a list of all of them you can search through your repos and all of that you want to find the repo that you're going to be using and you want to check here and look for the different things the owner there the main branch that's the one that we're running off of so you could actually have it deploy off sub-branches and you can actually have other branches deploy like you can have it create sites based on branches you can test things out look at only that branch live send it to other people and then if it's good to commit into the main branch then you can pull it in it's really cool nutlife is awesome and then you'll see the basic build settings here the base directory you'd think you might want to put something there just leave it blank we don't want to put anything there this is for different types of builds than something simple like we have now it already figured out that we want an npm run build so we're just going to leave that alone that is what we set up when we did our package.json here there we go our build right there so the build is this can do an npm run build so it means it's going to fire this it's going to build our site and then the publish directory it so it figured out on its own that i'm using 11t and as i said the underscore site is the default public directory in this case we've changed it so if you did change it like i did just make sure you change your published directory here to whatever your your public folder is wherever your your final files are living make sure you update that right there if you want to go into advanced settings you can we're not we're just going to hit deploy site and we're going to cross our fingers that it works um so it doesn't take too long to do but you'll see it says starting up so actually if we click we can watch this happen and you'll see it go through uh all the different steps that it's going to be going through here it really generally doesn't take very long uh to build a site especially because we're using 11t which builds tend to be pretty quickly and there we go it's all done it's finished the site is live the build script is a success so if you go to here now you'll actually see that for this site here here's our and you can customize this too let's let's go and look at it live on the internet first though so there it is it's all working just like magic there's my post go to my blog page this is live on the internet um so if you do want to go to i can go to my deploy settings and then i can go to domain management so you can actually change the custom domain that you have edit site name and you can come up with your own if you'd prefer to have one and you can also add custom domains whether you're purchasing one through uh netlify or you're bringing your own in from a third party um which is what i've always done and it's always been super easy to do so my site is up and live and it's working so you could stop here you could be happy it's online people have access to it and this is where what you would need to do if this is where you want to stop what you could do is you could come to here and let's just go to my blog and not in the public folder in my source folder i go to my blog and let's just copy this one here so i'm just going to copy that one and paste it and we'll rename it so that's 2021 06 16 dash uh ia new host so i have a new one there we're going to call this one my sixth we'll do it like that uh or you know what my yet another article and we'll delete the date because we don't need it and i'll delete this and what we'll do is we'll hit save so locally it's it's there but then what you'd want to do is go to your here and we can do uh added new blog post you commit it to your github branch you push it over there and what this is going to do is it as soon as it hits that branch netlife is going to see that there is a change so if we go to here you can see it's actually building again now so it saw a change to the main branch which is the production branch so as soon as it sees a change there netlify automatically rebuilds the entire site for us so in doing that we can go here we can see that it's building it i think it's probably almost done it's already published so i can refresh over here now and let's go to my home actually no it would be on the blog let's go over my blog oh my dates are a little bit screwed up um so actually we can look at how we can fix that too it's right here yet another article has shown up here live on the site just by pushing that change from i make my local change i push that change onto github netlify sees that it updates things and boom my article comes and it's live over here so that's just so so nice and so fancy and i just think that's really cool so that worked out great but what i'm most interested in now is just getting set up with the cms and this is really easy to do there's other ones out there sometimes getting set up with the cms is easier if you're doing it from the very very beginning but the net life i cms is surprisingly easy to get set up afterward so we're going to jump into the docs here just because we are going to need a few things from here but we can see how to add it to your site right there and again this will be linked down in the description below um and they give us a little bit of a rundown on different things we can do but the really basic thing is this right here so i'm gonna go back over to my local build and right here we're going to come into my source folder here we're going to make a new folder called admin and in admin we're going to make two files one of them is an index.ht html and the other one is a config dot y which is yaml right there uh so the index it just gives us something we can copy and paste right there so you know let's just copy and paste that right there and the other one that we can do is um you'll notice here there is the script here we're gonna have to add a bit of scripting to our pages as well for the login and everything but for now we pull this in it should work it says if you do have an issue with this they give an alternative so um there is also a way to get the setup with npm if you'd rather go the like doing it that way i'm just creating the files this way so you can choose how you want to work and then we can come down a bit and start setting things up so what i'm going to do is i'm actually going to copy this and we're going to bring that into our yaml file that's right here and we don't need this comment um my branch in this case it's it's still defaulting to master and github has changed master to main so we know that we're working off my main one and i can just leave gateway here so it's saying the back end is git gateway so it's based on git and the branch that it's going to be looking for is my main branch so that's set up we now have a back end ready to go for netlify to start getting things to be working and they do say if you're using bitbucket that they have special instructions there instead so you can go and check those out if you happen to be hosting on uh getbuck a bitbucket instead there is an editorial workflow which just means you can actually save posts as drafts and different things like that so it doesn't automatically publish so if you want to enable that you can it pretty much just uses branches to be able to maintain the different states of articles so whether it's a draft or whether it's for review and all of that so you could do a publish mode i'm not going to bother with that now but one thing that's really important is our media folder here and there's actually two we have a media folder and a public folder so we're going to want to set both of those up to tell it where the images should be saved and where things are going to look for their images basically so for that what we're going to do is we're going to come to here so that's the first one was our media folder and you know what let's make our life a little bit easier let's we can do that so we can actually see what we're trying to do so media folder we have to tell it where the our media files are currently living so don't think of the media folder as in relation to where this file is think of it where do they live from the root of your folder so they're in my public folder so we go into public so if you have a different name if it was underscore site you could do undersource site whatever it is wherever it needs to go then from there in my case i have my assets so if you have an images folder you could go into there and because i'm really setting this up for my blog i do have in my blog in my assets i do have a blog section where we can put our blogs if you'd rather it doesn't go to there you could have it go to assets and uploads you can have it go to assets and images you can go whichever one you want i'm gonna have it go to blog because i'm only setting this up for that if you're setting this up to also have like you know i'm setting this up right now just to be running a blog site if this is a blog and a portfolio and your portfolio items are also you can run that all through the cms too you can add new portfolio items so if you want to do it that way maybe having a blog folder here doesn't make as much sense but that's where the media folder is but then we also want the public folder here and the public folder is important to actually get the images to show up to get it to look get it to look for images in the right places pretty much so i want to make sure it goes to here and basically it's just the same thing without the public assets slash blog because this is where it's going to save the files to but once we're in that public folder like pages are living there they're not jumping all the way back to public that's that's their root folder so we're going to be hanging out just in assets and blog here so if you don't include this it could be that your images don't work once they're uploaded because they won't be looking for them or linking to them in the right way um and now we get to the more complicated part and all of this is in here it's these collections and collections is when you have a cms and you you new post and then you get all the diff you get like a gui right you have an interface where you can put in all your stuff we have to create all the different things we want there and you can actually create different types of collections here which is really interesting so we're going to write collections and we're going to skip this part here we're just actually they're showing us here this is the front matter and it's really really really linked to the front matter so you know what i'm actually going to do it's going to make our life a bit easier let's split that off to the side here so we can actually be looking at this and seeing our front matter at the same time so we know we're including all the different pieces of front matter that we need to include so my collections is in this case uh we're going to go to a new line and then we're going to say that the name is blog and then we want to label it so i'm going to label that as blog and everything you're going to see there's lots of names and you have to name and label pretty much everything so the label as you can see here is what's used in the ui and then this is used for like where you know in the roots so admin collections blog so how things are sort of set up so we have my label right there next we need the folder this is where it's getting the folder is where it's getting the original like where where are things coming from so they're actually coming from source uh blog in this case so that's really looking at my my document structure my blog posts originally live in the source and in here so what's going to happen is when i make a new blog post it's going to save it as a markdown file inside of here and then because it saves it in there that's going to trigger an update on my main branch of github and then github's going netlify is going to see that it's going to build the site and it's going to take that markdown file with all the different uh generated information from here as front matter and it's going to turn that into a blog post seems a bit complicated but it works really well so just the folder here isn't the finished folder this is the one that the where you would create them manually so if you're going to manually create a new blog post where is that going so right there so we also have the create true here just to make sure that people can actually create posts there's the slug here and the slug is going to control the um the file name and i'm actually going to use the same one example of what they have here just because it's the easiest way to do it so it's just like i've already been naming my files the date and then the name so it's going to do the same thing it's going to put the date and then follow it up with the slug and in this case the slug is the it's going to be like the title of the post that i put so we're going to leave it like that and that was the fun part the fields so the fields i mean we could get some information from this one but i'm going to hide that away because the fields are all based on what we see right here so for fields push return tab over hit a hyphen and now we get into our fields so for the first one um and you could format these in different ways i'm going to do it in a bit and actually we're going to do it like this just because i find it keeps things more clean but if you wanted to space things out over multiple lines you also could do that we're going to have a label so i want i want to be able to put in a title on my post so i write title then the name for that so we can have a name of title then so this is like it's going to show up as a widget so here i'm going to write widget and we have to say what type of widget is it and in this case it's a string um so string just means it's going to give me a like a text like a text error another it's going to give me an input type text basically it's going to let me write a string of text in so it can publish it so i have a title that i can write as a string so let's just duplicate that because the next one that we're going to need is my author so i'm just really going to follow author which is my author and that's also a string the next one we want is my date all right so let's add a we can do date the name is date um so for the widget we don't want a string we don't want to write it in we want a date time so now it's actually like you click it it's going to come up with the calendar and you can choose what date you want to set on that so we can have a date come in uh the next one is our actually we'll do the tags at the end um actually i don't even know what we could do here let's just duplicate this this could be title description i know i have it in a different order here but in this one i think it makes more sense if the title and description go together in our ui so description description so once again widget will be just a string um so for this one let's do our feed label featured image this could just have the name of image right here um so this is where actually i should have mentioned this before the label is what i'm going to see in the ui the name is what we're going to be seeing is what your actual um front matter thing is here so title is my title author is author that's why these are uppercase and these are lowercase but here i can do featured image but here i just need to put image like that because i need to make sure it's using this piece of front matter uh so let's actually copy this one now and find we can actually do an image widget so we can upload an image let's paste that other one in here so uh author this would be my image caption or it could be alt text because here it's my image alt and once again that one would just be a string so that's perfect and the last we need two more but one of them is going to be let's do our label is going to be uh body we'll call it body it's like the the core of my text right in this case with the body like that um the name is less important but we'll come in with our body right there and then the widget in this case we want our widget which is we actually have to write a blog post we don't want just like a text input so we can actually write mark down here mark down and it's going to give us a markdown editor that we can use to make our sites so that's pretty cool um the last thing i want to be able to do is the tags and i mentioned earlier on that like if we left it and we just put featured like you could overwrite that so we can actually set defaults on some of these as well for uh we're going to create a select list that's going to have a default um so i'm going to put this one after date and again the order that they're showing up here is the order they're going to show up in the ui so i'm going to do it here and so we have a label of tags capital since we've capitalized everything else name is going to be tags and then the widget with jit uh in this case give me a list and in this case we're also gonna have a default and my default is going to be uh post like that so by default it's going to have a post but if we want to add features to it we could add features and you could delete post technically but at least it's there as a default so we don't accidentally delete it or anything like that so there we go all of that is set up and now so we've sort of set up like the structure of what things are going to look like within our ui so this is cool we have a backend that's coming together let's hit save on that and we're going to publish it yet just because there are a few other steps to get this to work so let's go back over to the documentation and we're going to see so i mean if you do need they do have a page that actually shows you more of the different things you can choose from on all of this the widgets dock it goes over what all the different widgets are and the different options that you have and everything and they give you options of using them so just just so you know you can choose from a whole bunch of different stuff here which is kind of cool um but we don't want to do that right now we've set all that up um next we want to do is this the authentication so we have our cms in place let's ensure we have the net um and so this one is a bit more copying and pasting you've got to set things up uh so we need to go to our netlife site to be able to do this and we're going to go to the site settings and at first we're going to go identity down here and this is important because there's actually two places where there's an identity and this threw me for a loop and i spent like people were on a live stream i was looking all over for it and i couldn't find what i needed i was going nuts and so for this first part we're using the identity that's in the sub menu so you just go to your site overview site settings and the identity in the sidebar really important and then we enable identity so this means people can actually log in um you can see this is something you can pay more money for if you need like other levels of stuff but we're gonna keep it at the default uh what i am gonna do is registration is open i'm gonna edit this and say it's invite only just so not anybody can log into my site so we're gonna save that you can also use um external providers so we could actually make it so people can log in using github so let's enable github i think that makes sense so you don't have to create your own username and password if you have a github account you can log into your site that's kind of cool and you can do a little bit more here and set up some email oh you have to upgrade to set up the emails but there's other stuff that you can you know edit your template and etc etc but um now there's remember when we set up our configuration here we chose the back end of git gateway so there's one more thing we have to do just scroll all the way down and keep going keep going there we go services get gateway and click on that as well it's going to pop up there we go luckily it's hiding my api access token for me so i'm ready to go so let's jump back on over to my authentication it's going to talk more about that it mentions uh here we need these scripts and the reason i step this oh here's the gate gateway part um but we need to add these scripts so here it says with the back end to handle it you need a front end to connect to it so the opened source netlife identify widget so you just want to include this in this widget in two places so i'm going to copy this it says you want it in the head of the cms so in the index file you want it there as well as the head of the site's main index page so the first one we can do is here it says in the head of my admin so that's fine i'll save it right there um and then the other one what we're going to do is we want to go to our base file right because we need we want to make sure that it's going to be working everywhere so i'm going to go to my base file they do say to put it in the head i have set it up with defer and it's worked fine so i'm going to leave it there because i haven't run into any issues with it but i'll say they might be saying it needs to be in the head for a specific reason so just if you run into an issue maybe just take the deferre off but i've had the defer on and i've never had any issues with it so i'm going to save that and there's one more thing we need to do which is to include this script too and this is just to make sure the redirects work properly when somebody logs in so they don't just keep getting kicked out to the wrong spot so still on my base.njk file i'm going to go all the way to the very end right before my closed body and i'm going to include the script down there you could make this an external script and just link to it as well but this works fine for me so i'm going to leave that right there and now we should be able to log in to our uh our admin panel so i know that you can do some testing of this locally on your machine as well as doing it through github as well as doing it online i've always run into more success using this online i've run into some issues with it on the locally hosted version so what we're going to do is we're going to go and we're going to say added cms commit to main push origin and that shouldn't take too long that's done that means that if we go back to here we should see let's go all the way up oh there is one more thing we have to do actually i just thought of it uh so this is building so while that's building this is where i was looking for something i was in this identity i'm looking all over the place i can't find anything if you want someone to be able to log in you have to add them to it because remember we made it so it's invite only we made it not for anybody to to be able to get in so if you set this up to be invite only we can't do it it talks about in the docs the identity they mean this one up here so now we click to this identity here and you can invite a user so let's invite myself kevin kevin kevin powell.co i'm i'm gonna click send so i get an invite that should uh shoot me over an email so it is off screen but i promise you i got an email i'm gonna click the link and so it just says um accept the invite i just click a link that says accept the invite and let's pull this on over to here there we go you can see complete my signup so i can either create a password for myself or i can say continue with github so let's continue with github i can sign in don't want to save that there i'm logged in as myself that's wonderful and now my account is linked to github which is now linked to this site so let's go see what happens we're going to come to here and i'm going to write admin so it says forward slash admin i should get this oh no failed to load the config file what did i do failed to load i made a mistake all right so this is this is uh let's go back let's go back let's go back it's not a big deal it's a nice simple thing this is one of those things you run into and it's a really silly one i'll show you i've done this before which is why i know what happened so everything here hopefully is fine there's possibility that there's a small little error here but if i see here i have my admin in my source file if i go to my admin here i only have an index file i don't have so it built my admin but it's not sending my admin uh config file to the public area where it's required to be uh good old 11t so that just means i do need to go into my 11e we need a new pass-through filter uh so i'm just going to copy that and you could just set it up for i'm just going to say anything if it's in my admin file i want to make sure that it makes it into the finished version so let's save that let's go back to here just say fixed admin admin panel let's hope that worked and hit commit to main push it and fingers crossed this time it actually worked so let's jump back on over let's see what's happening over here site overview it's building shouldn't be too much longer now all right so it is now finished building so now let's go check it out we should be able to get this to work go to my site go to admin login with netlify identity continue with github i've already linked my github with that there we're logged in we're here look at that it's loading entries now i already think there might be a small issue because it hasn't loaded in my existing entries yet so that just shows me that maybe i set something up a little bit wrong because i should see all my existing blog posts here but let's just click new blog post and see and look at that we have my title my description my date i have a date time picker i can choose what date i want it to be published on here's my post i can do comma featured and then i have a new tag and that works choose an image let's go upload an image uh upload yes uh let's just go to my downloads folder and choose a piece of code right there let's open you so i have an image that's going to go choose selected so let's even let's let's see what happens here hello world how are you now you'll notice here's like the preview and it looks really ugly you can actually set this up to use like cs specific css for the preview so you'll get a better idea of what it's going to look like this is a short description right here i can put my name i'm just going to kevin into kevin powell just so we can see that it worked uh image caption um ins looking at inset not the best caption but then we can have our whole body come in uh let's just choose continue reading let's just copy and paste some stuff from here um you'll also notice that it's a rich text editor whoops wrong one so it's coming in as a rich text editor so you can actually switch to markdown if you prefer or here if you like this you can just you know hit bold hit bold add links do whatever you want set it all up and and fragment we can get rid of um and then we hit publish publish now and i should have published a new article as i said though it's possible oh no there they all they all did load in everything was okay it just took a minute for it to find them so there we go we just published a new article so if i go back to here we might even see did it already finish let's refresh my page here i think it's still building look at that it already finished it already finished building uh that new one so if i go back to my live site i'm on my live site let's go to my home page here and let's go to my blog there it is with my new image oh my goodness and let's go back to my homepage and i made that a featured article so it's showing up in my featured articles cool and i go you know what i don't want to have those featured articles i want to i don't want that to be a featured article i want to take that away i just go back to here hello world how are you i just come in here i can remove that i can change the image we can change our text a little bit let's say you know i have a very short description let's come in with a longer description for it there we go i guess even the description we could probably set that up as a markdown because it's sort of mucking things up right now so you could probably have that as a markdown instead and then you publish it and again if you want you can enable like a way to have drafts and to have reviews and all of that as well so as soon as you do that it pushes that change to it pushes that change when i hit publish to my main thing that triggers netlify to start building it it's building here right now it will not take long and then maybe if we're lucky if i refresh here nope not yet there we go it's updated it's gone from here because i took it off i go i took off the featured article i go to blog it's still here you can see it's the new text has come in so cool so wonderful and not that hard to set up and you could use this in a lot of different ways too you could definitely build this out and do a lot of other awesome things with this you could add in a portfolio to it you could do so many powerful things with it all built with 11t or any other static site generator going through the cms here it's not the prettiest cms in the world but it gets the job done and it's just so easy to set up right so what did you think about that do you see yourself using a static site generator like 11t and setting up the cms and all of that is it worth the trouble was it i didn't find it that bad to set up but i want to know what your opinions on it so leave a comment down below if you're already using one tell me which one are you already using what do you think about 11e i'd love to know and with that a really big thank you to codementor for bringing this video to you guys this again is a project from there that i helped create you can get a link to that project just down below that includes my starting template that i used as well as the finished version if you want to check out my finished code as well and if you don't want to do my project there's also a lot of other awesome projects there that you can use for inspiration and to challenge yourself and to grow as a front-end developer and if you need help with just your front-end journey in general you'd like to work with a mentor one-on-one code projects is there just for that of course another really big thank you to zach and randy who are my supporters of awesome over on patreon so thank you guys so much for your monthly support as well as all my other patrons you guys are the absolute best and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 29,941

Rating: 4.9555225 out of 5

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, jamstack, 11ty, eleventy, dev projects, devprojects, netlify, netlify cms, cms, ssg, static site generator

Id: 4wD00RT6d-g

Length: 83min 34sec (5014 seconds)

Published: Thu Jun 24 2021