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

Key Takeaways

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