Jigsaw - Static Site Generator for Laravel

what's up guys Andre here and today I'd like to take a look at building static sites with jigsaw jigsaw is maintained by the fine folks over at Titan and is a static site generator built with Lehrer bells played templating engine so if you need a static site and you like using laravel jigsaw is a great choice so let's go ahead and take a look at some of the features of jigsaw so let's install it let's go to the docks and we have to create a directory let's do this so make her say jigsaw example and then CD into it and then compose a required jigsaw jigsaw example and then composer require it okay that's done what's next time so let's initialize our project here so we can run this jigsaw init command and there's also starter templates which we'll take a look at at the end of the video but for now we'll just go for the default template so jigsaw makes use of laravel mix to handle all your front end assets so we have to npm install everything first okay and now we can npm run watch to run a dev server and this should auto reload as you make changes okay so here's the default it's just a basic hello world with no styling no anything so let's take a look at the default folder structure in our code editor okay so we have a config which we'll take a look at with regards to the features of jigsaw the source folder has all our assets our layouts and our index page here so here's our index and if you're familiar with blade and the syntax is very familiar so it's extending from here and there's one master layout here's the master layout and using mix to compile the main CSS which in here and also take a look at the webpack mix yes if you want to make any changes to your laravel mix configure so as you expect if we make a new page here so let's just duplicate this index and it's make a about page this should work I think you have to restart the server though so let me just restart this oops this one and we started and now we should have an about page go slash about that should work cool also if you want you can add folders and add an index top plate that PHP within that folder and that should work as well so for example if I were to make a new folder called team and then within there talking about this I had a new index blade PHP it should be team and this should work but we have to restart server let me double check that do we really have to restart I think we do yeah so let me just restart so yeah every time you add a new page you have to restart unfortunately okay so now team there you go so I'm gonna add to this layout so we have a basic nav in here that has our pages that we just created so let's do that so I'm gonna paste in some CSS here just to save some time just some utilities so I can quickly whip up some CSS so let's go into our master and I'm gonna make a a nav here I've and I'm gonna give it a class flex item Center and justify between so I have the logo on the left and the nav items on the right and then I would give the body a class of container and the first one's gonna be h1 it's gonna be an anchor tag I'm just gonna go to the home page and we'll name it jigsaw and then the next flex item will be flex as well this is where the menu items will go items center and I'm just gonna stick with divs and put an anchor tag in here and this is going to about about enemy I had a class on this number four and this one will go to team and see how it looks and I think I want to set her it so I got to add a little more CSS class margin Auto or MX Auto I'm just copying tailwinds utilities so margin-left:auto margin-right:auto and now for the container let's just that this to MX auto so that should be centered okay so now about and home cool not gonna worry too much about styling here okay next I want to take a look at helper methods and the helper method that I want to create is this one in the example here and this just to text if the page is selected and as a class to it if you need it so I want her on this page and I want this to be have a selected class and same with team so in our config we can just add this selected key and it returns a closure and here is the code that returns selected if it's in the path let's grab this just go into our config right here and let's add that so I'll put it right here okay and now go back here in our lab we can add this to the class section and this will detect if it's selected or not and in my CSS I think I have a definition for selected they sittin yeah so I'll just makes it bold so let's go ahead and do this so it should be class let me just copy one of these and go back to our index or master and here we can replace this and same with over here and if I did this correctly this should make the menu item bold if it's on that page let me just change this to team and this should be team as well and see if this works okay so as you see if we go to the page sorry forgot to change this so the team that should be polled as well cool okay so let's make a blog so I want on the main page to have a blog role here and then if you click on it it goes to a specific blog post I also want to do it in markdown and jigsaw has marked down support of the box so if you just named our file dot MD it should work and it should convert it to HTML so let's go ahead and make a new folder in here called blog and it's add some more 10,000 there so I'm gonna make a new file let's call it blog post 1 MD and if it doesn't work down here just a few markdown elements and now since this is marked down and not a blade file we have to specify a few things so in our blade file we have this extends directive which lets us know which layout to use now we have to do that in yamo frontmatter so let's go ahead and do that so up here we can just specify some variables specific to this blog post and the first thing like I said we want to let it know which layout it extends so in our case it's layouts dot master actually I'm gonna make a new one so let's say they all stop blog so the section is the thing you want to yield so if we were extending master we'd want to yield body so let's go ahead do that it's gonna be body and you can specify any other variables here like the title a blog post one and say the author or something I'll show you how to render that in a second okay first let me make this new layout so I'm gonna duplicate this this one we called blog and now this nav is now repeating in both sections oh that's not good practice so what we can do is extract it to a partial just like in blade so you look for partials here it's exactly the same as in Arabelle so just make a new folder where's partials here so yeah just being a folder called underscore partials and then you can include it wherever you need it so let's do that your folder oops partials and it's called this nav I'm gonna paste that in whoops just grab there's nav here now we're gonna include it it's partials nav that and then I'm gonna put them in a paste that in read that that and it should still work let me just change the master one to this oh I did change the master one let me change the blog one okay so I might have to restart the server to do that quickly okay and everything still works cool but now let's see if our blog works so it should be blog and blog post one and there we go the markdown is automatically converted into HTML and rendered in the browser so you can also render out these custom variables that you made in the front matter so right here if you just render it out like this we can get the title and author or any custom variables that you made just like this so let's do this and go back into our blog template and let's put it right before the body and it should work there you go cool so yeah this is redundant or you can just not add it in the template I'll just leave it so I'm gonna make a few more blog posts behind the scenes just so we have more content to work with so few more markdown files in the blog folder okay so I added two more here and as you expect they should work in the browser I'll post two and three works as well okay now I want to add some styling for the markdown over here so I'm gonna use this library that has the minimal styling for the github markdown style and that is just over my last few videos so let's go ahead and pull the end I'm gonna use the CD in here so I'm gonna copy this and I'm gonna go into my template for my blog right here add it right here something okay now we need to add this extra CSS over here right here and then we also need to wrap the code we want in markdown body okay so let's do that so I'm gonna add a style tag here and paste that in and then in that that and I'm gonna let's wrap this history and a new div say they've got markdown body okay so this should now render some decent Styles see this works okay so there you have the CSS for github markdown okay now I wouldn't want to have an index for these blog posts so obviously we can do it manually take a look at that first so let's go write index and I'm just put it here so I'm doing ul by a and ugh-ugh post one blog post one and this should work okay that you link appropriately and that's cool so I'm gonna add the other ones in manually okay so there they are and a link appropriately but now I want to make this sort of dynamic so when we add a new blog post I wanted to automatically show here and we can accomplish that by using a feature called collections so where is it in the docs right here so defining a collection you can add an array in collections in the config and there's also a whole bunch of options so let's take a look at doing this so let's go to our config we want to have a new collection for posts so let's add that in the array here and we'll just leave the default config so now this is gonna look for a folder named posts or underscore posts and whatever files we put in there will be available in the collection so I'm just gonna leave this so I'm gonna make a new one called posts on your posts so I'm gonna put a few markdown files in here so let's start with one blog i'll name it my first post so you don't confuse with the other ones my first post MD and I'm gonna take what we have in here copy that this is in here and we have to add one more thing here in our llamo frontmatter and that's the slug so I'm gonna name it my first post and then go ahead and add a few more in here okay so I added two more here my second post and my third post and this should work if we just go to the URL so posts my first post sorry I think I have to restart the server okay so there it is now if we go into the blog role we can fetch the posts dynamically so I'll show you how to do that so back in our index I'm just gonna add an h2 here this will be the manual log roll and then this next one will be the automatic I'll grow and we now have a variable available to us called posts so we can just use the for each directive in blade to iterate over it so posts as post and we can just add a list item in here so let's write them a sorry href equals so to get the correct URL we do post URL so first you post get URL that and then to get the title we will just do post title okay see if this works and there you go my first post my second post my third post and it links correctly cool and there are more features here for collections which we won't take a look at but you can read through them if you like stuff for sorting pagination and stuff like that but we will take a look at remote collections which allows you to pull in data from a remote API and then you can pull it in to our local collections and do whatever we want with them so there isn't that there's an example here where is it yeah fetching collection from a remote API and that's what we'll do here so in our case we're gonna make use of the reddit API which I've done dozens of times before so if you're not familiar if you go to any subreddit and add dot JSON at the end you can get the information for that subreddit so in our case we'll do this subreddit okay so I'm gonna copy this I think it ends there and we'll change this to read it back here that I can fake another one it's called it reddit just the right one okay it is reddit so it's gonna extend layouts let's just make it extend at the blog it's fine or just a normal one actually and the items and you can see they're using they're using JSON decode file get contents to get the info from the remote URL and we'll just stick with that every time Davida reddit.com slash are slash json and we have to add this queries thing query string and now i want to iterate over each result and in my case i know i know the structure of data coming back so I know it's gonna be post data children is the thing I want to iterate over and the children are the posts so just look at that the JSON coming back so data children again I've done this like over a dozen times already so I know and here is the data we want available for each reddit post so in my case I want the ID that's gonna be post data ID I want the titles can be post data title I want the thumbnail and Shiva thumbnail but I'll just add anyways post data thumbnail and the content is the thing we actually want rendered in the browser and you can actually do marked out in here as well and we just want the image rendered out in here so I'm just gonna do the markdown for the image so this is the image going back the image URL so I think I have to restart my server again actually before I do that let's list them in our index plate so I'm gonna do this again copy that let's say reddit / r / r and then for each now we have a collection called reddit and we can just save it as post and we can do my post get URLs fine it'll just generate a default URL which I'm okay with and let's put the title in here that's very title okay so now when we start my server see if this works okay I think it's not working because for the layout that were extending it has to have the content key so I'm gonna make a new one here I'll read it and you can duplicate this one and instead of body has to be content I'll duplicate this and its name it reddit same thing but I want this to be contact okay now let me just restart this and now if I go to one there we go there's the image so obviously you can set a max width on the image but let's just pick another one there we go cool so now I want to quickly deploy this to NASA Phi so there's a section in the docs for deploying your site and here it says to add a new file dot T oml file and we'll have add this just put this in the root directory Oh new file let the fight that Tamil they started and now I have to make a github repo so I'm gonna make this like it is already a game repo it's not ok in it now we can add it commit first to commit and hub create and get push origin master okay now let's go to that defy let's search for jigsaw and here's the one we just created and it detected the natla file file and this should work so let's go ahead and deploy it a few moments later okay so that should be deployed now so if you click preview deploy and there it is so there's our manual block and there's our automatic block and there is our reddit posts cool okay the last thing I want to take a look at is using a starter template and we'll look at the blog one so instead of doing it in it just doing it blog there's also one for dogs and this one has a ton of features that come out of the box including all this kind of tailwind I'm just purge comes with syntax highlighting with highlight yes and also some search with fuse and view so here's how it looks like and it has some blogs some blog posts a newsletter sign up and it's very nicely designed you have a search here for blog this is using fuse I believe and yeah you can play around with this and you'll see a lot of the things that we learned throughout this video so there you have it guys we've managed to take a look at building a static site with jigsaw definitely a great choice if you're primarily a laravel developer and you like using blade as a templating language please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 6,590

Keywords: jigsaw laravel, laravel jigsaw, jigsaw tighten, laravel static site, laravel static site generator, jigsaw static site generator, jigsaw laravel basics, jigsaw laravel tutorial, jigsaw laravel markdown, jigsaw laravel collection, andre madarang, drehimself, laravel jigsaw static, laravel netlify

Id: SEDG7lcmIdw

Length: 27min 19sec (1639 seconds)

Published: Mon Mar 18 2019