Let's take a look at Jigsaw. Jigsaw is a static site generator that allows you to quickly build static sites with Laravel's Blade templating engine. Let's take a look at how to use it. So I already have an empty directory here. So let's go ahead and composer require jigsaw into that folder. Okay, that's done. Let's go ahead and initialize our project with this init command. So let's run this and it will create a project directory structure. Okay, so if we look at that in our code editor, we'll see it's making use of Laravel Mix to compile our assets. So there is the mix file. And if you look at the source directory, we have a default index.blade.php. And this extends a default layout called master, which you can find here. And it's also making use of Sass for CSS. So if you look here, you'll see the main Sass file. And there's nothing in there for now. So let's go ahead and run this.

which you can find here. And it's also making use of Sass for CSS. So if you look here, you'll see the main Sass file. And there's nothing in there for now. So let's go ahead and run this site. So we can make use of npm run watch. Actually, we have to npm install first. Let's do that. Okay, and let's go ahead and run our watcher. So npm run watch. Okay, that's done. So here is our default index.blade.php. And we can add any pages here. So let's do that. So I'm going to add a new one for about, we'll just duplicate this, say about.blade.php. And let's just change this to about. And you can also make a folder and have an index.blade.php within there if you want to structure it that way. So I'm going to make a new folder, let's say, contact. And within there, I'll have an index.blade.php. Okay, and let me just grab this

make a new folder, let's say, contact. And within there, I'll have an index.blade.php. Okay, and let me just grab this and put it in our contact and change this to contact. And that should work. Unfortunately, that should work. Unfortunately, if you add new files, you have to restart the dev server. So let's go ahead and do that. Okay, so now we have those two new pages. So contact and about. Cool. So let's go ahead and make a nav. So I'm going to go into the master layout, and split the nav right before the body. And I'm not going to worry about styling in this video. So you're stuck with the default styles in the browser. So let's make a nav element, let's make an unordered list, say three items. Okay. And the first one just goes home.

So you're stuck with the default styles in the browser. So let's make a nav element, let's make a ul, say three items. Okay. And the first one just goes home. Second one goes to about. Third one goes to contact. Okay, this should go to home actually. Okay. And let's see how that looks. Cool. And this should link accordingly. So you can also make use of partials if you have repeating code. And I'm going to put this nav in a partial. So I'm going to cut this. Let's say include. So the include syntax from Laravel works fine. Let's make a new folder called _partials. And let's call it nav. So let's go ahead and create that. So source, new file, partials/nav.blade.php. Okay, and paste that in. And this should still work. And just to double check, since I had a new file, as you can see, it says it's not found,

partials, nav.blade.php. Okay, and paste that in. And this should still work. And just to double check, since I had a new file, as you can see, it says it's not found, that's because we got to restart our dev server. Okay, and there you see it still works. Cool. Now, if you prefer Blade components, which were introduced in Laravel 7, you can do that too. So let's go back to our master. Let's make a new Blade component here. Let's call it x-nav. Let's close it out. And you have to put it within a _components folder. So let's do that. So components, let's call it nav.blade.php. And we can just put the same nav in here. So I'm just gonna grab this, put it in here, and save that. Make sure to save the master. And again, I have to restart my dev server because we have a new file. Okay, and the nav still works. But now we're using Blade components. So let's make sure the Blade component works. So you can pass in

to restart my dev server because we have a new file. Okay, and the nav still works. But now we're using Blade components. So let's make sure the Blade component works. So you can pass in variables here. I'm just going to hard code foo bar. Okay. And let's see if this works within the component. So let's just output foo in here. And it does work. Cool. So I'm just gonna stick with partials. Because when you're working with global variables, which we'll take a look at next, you're gonna have to pass it into the Blade component. And I think it's easier just to have a global and not pass anything in. So let me just go back to master and put the partial back in there. But you can make use of Blade components if you want. Okay. And we're back to the partial. Okay, now let's take a look at global variables. So if you want global variables available within your application, we can go into the config here and just add a variable here. So say we have a

Okay, now let's take a look at global variables. So if you want global variables available within your application, we can go into the config here and just add a variable here. So say we have a contactEmail, we can just say, andre@andre.com. Okay. And now let's go into our contact page. And let's output that here. Let's say, so we have this page variable available, and contactEmail, and that should work. Let's go into our contact page. Okay. And let's say we have a contactEmail. And you can also have global helper functions. So if you go into the docs, you'll see a section here for helpers. And you'll see a helper function here that checks the page you're on and returns selected. So this is a pretty common helper method that you add to your applications usually. So let's grab this and go ahead and paste it in our config. Let's put it right here, make sure to import String. And let's use it in our nav. So if you scroll down,

usually. So let's grab this and go ahead and paste it in our config. Let's put it right here, make sure to import string. And let's use it in our nav. So if you scroll down, you can just use it like this, I'm just gonna grab one of these. Let's go back to our partials/nav. And let's put it on these three, see if it works. Okay. And this one will be empty. This one will be about and this one will be contact. And we have to add a new selected class on our CSS. So I'm just gonna do that here selected. And to say font-weight, bold. Let's see if this works. Okay, so it does. Okay, next, I want to take a look at markdown. And it's supported right out of the box. So markdown should render to HTML. So let's go ahead and add a new folder called blog and put a markdown file in there. So let's say, blog, let's make a new file called 01_post.md. And within here, I'm just going to paste in

ahead and add a new folder called blog and put a markdown file in there. So let's say, blog, let's make a new file called 01_post.md. And within here, I'm just going to paste in some YAML front matter here. So this just extends a new layout called markdown, which we'll make in a second. And we want to put it in the body section. And this is just a whole bunch of markdown elements to see if it renders in HTML correctly. So let's go ahead and make that new markdown layout. So I'm just going to duplicate this, call it markdown.blade.php. And that should be fine for now. I'm just gonna get rid of this. And again, new file. So we have to restart our dev server. Okay, so now, if we just go to blog/01_post, that should render correctly. And it does. So now if I wanted to have a new section here, which lists out all my blog posts, we have to do that manually. And I'll show you how to do

01 post, that should render correctly. And it does. So now if I wanted to have a new section here, which lists out all my blog posts, we have to do that manually. And I'll show you how to do that dynamically right after. So back to our code here, we can just add a new section here for listing out our blog posts. I'm just gonna duplicate this. Let's say blog.blade.php. Let's say blog here. And we can just make a ul li a. And like I said, this is just manual. So blog 01 post. And we can just say my first blog post here. And it's going to our nav and add that. So just add this, say blog. This is blog two. Okay, and new file. So restart dev server. Okay, so there is our blog. And there is our first blog post. Cool. Now, if you want to style the default HTML that gets rendered out from the markdown, you can make use of the Tailwind CSS typography plugin if you're using Tailwind.

is our first blog post. Cool. Now, if you want to style the default HTML that gets rendered out from the markdown, you can make use of the Tailwind CSS typography plugin if you're using Tailwind. But since I'm not using Tailwind, I'm just going to use this library here, which styles the markdown to a GitHub flavored markdown style. So you can npm install it if you want, but I'm just going to use the CDN. So let's grab this. Let's grab the link tag. Let's go into our master layout. Sorry, not our master, our markdown layout. Okay, space that in here. Okay, and what else do we have to do? We have to give it these default styles. So I'll put this in our main.scss. Just paste it underneath here. Okay. And then we have to wrap our markdown in this markdown body class. So let's add that. So again, back to our markdown.blade.php, and it's wrap this section where the markdown gets rendered in a markdown body class. So markdown body. Okay. And if I did

posts. So again, let's make a new folder called posts. Let's make a new blog post in here, say 01, my_first_post.md. Actually, it's going to our config first. And it's put that collection in here because I copied it. Okay. And I'm not going to put the author in here. I'll put the author directly in the yaml front matter. And the path is going to be posts. I don't want to date. And the file name is fine. Okay. So back to my_first_post. So here, it's going to paste in some markdown here, along with some yaml front matter variables. And I'm going to go ahead and make another post here so you can see the collections working. Okay, so I added another post here. And now we want another page, similar to this, that lists all the blog posts, but they should be done dynamically now. So let's go ahead and just copy this blog. So duplicate, let's call it posts instead. So post.blade.php. Okay. And let's change it to posts.

they should be done dynamically now. So let's go ahead and just copy this blog. So duplicate, let's call it posts instead. So post.blade.php. Okay. And let's change it to posts. And now since we defined that collection in our config, so we should have a posts variable available to us globally now. So we can just loop over here. So let's do that. So let's do foreach $posts as $post. Let's put this in there. Let's put this in there. Okay. And now we can just grab the post URL using the $post->getUrl() method. And we can grab the title here. So say, $post->title. And any variable you define in your yaml front matter should be available here. So I also have an author field. So let's say by $post->author. Okay. So I added a few new files here. So I have to restart my dev server again, and hopefully I did everything correctly. Okay.

So I also have an author field. So let's say by post author. Okay. So I added a few new files here. So I have to restart my dev server again, and hopefully I did everything correctly. Okay. I forgot to add it to the nav. So let's do that. That would be a nav. Okay. So add a new section here called posts. It's going to duplicate this posts. Okay. It's dangerous to posts. See if this works. Okay. New section. And let's see if this works. Okay. So it's showing up. So this is dynamic. It's just reading directly from my file system. And if I click this, there's a post for post one and there's the post for post two. So everything is working correctly. Okay. Let's make some improvements here. For example, you probably want the title and the date and the author showing here. And you can add that in the markdown if you want. But it's probably better to make a new template for this post. So let's go ahead and do that.

date and the author showing here. And you can add that in the markdown if you want. But it's probably better to make a new template for this post. So let's go ahead and do that. So I'm going to duplicate the markdown template. Let's say post.blade.php. And within here, we can add those new sections. So for example, if you want the title, let's put it in an h2 and we can just say pageTitle. And as long as that variable is defined in the markdown variable here, then this should work. So let's also add the date and the author. So let's say, but within a div, I'm just going to say pageDate. Let's put the author in here, pageAuthor. Okay. So now we just have to change our layout in our markdown files. So this is now post and same with this. And I have to restart my server again. Okay. So let's give it a try posts. And there it is. Cool. So we have to use the php date function to format that.

Post and same with this. And I have to restart my server again. Okay. So let's give it a try posts. And there it is. Cool. So we have to use the date function to format that. So let's do that back to our post layout. Also want to wrap this in a paragraph tag and this, we can just make use of date. So we can do date and say F J Y. And the second parameter is pageDate. Okay. Get rid of this. And let's see if the date formats and it does. Cool. So yeah, definitely make use of collections if you're planning to make a blog with markdown. So collections are not limited to your local file system. You can also pull data from an external API or any other external source. So I'm not going to do that here, but I'll show you the documentation is pretty much the same as what we did here. But now if you go to remote collections, you are pulling the collection from

but I'll show you the documentation is pretty much the same as what we did here. But now if you go to remote collections, you are pulling the collection from an external source. So if you see here, they are using file_get_contents. And I guess you can make use of Laravel's HTTP library. Actually, you might not be able to, because it's not a Laravel app. Anyway, it's just grabbing information from here, which is an external API. And once you do that, you have control over it, just like you do with local collections. So after you have all your content ready, you want to deploy your site. And the beauty of static sites is that it's really easy to host. And let me show you the command to generate your static site. So just run NPM run production. And this will make a new build _production folder, I believe, which should be ready for production.

command to generate your static site. So just run npm run production. And this will make a new build production folder, I believe, which should be ready for production. So if I open that up, you'll see this build production folder. And if you look at that, this is what you would upload to your static site host. So just about any host will work. You can see some examples here, you can make use of GitHub Pages. Netlify is probably the most popular one these days, just add a netlify.toml file. And then this will build on Netlify servers, or you can use anything else. And like I said, just add this folder into your static site host. One last thing I want to show you is the available templates that Jigsaw has. So there is one for a typical blog. And there's one for a documentation site. So if you just want to grab this and put your own content in here,

So there is one for a typical blog. And there's one for a documentation site. So if you just want to grab this and put your own content in here, you'll have a nicely designed blog or documentation site ready. So here's the blog template, has a whole bunch of features, even has a search in here. It's using Fuse search. And you can take a look at the documentation one as well, which has a starting page and a nice sidebar for navigation for all your documentation pages. So yeah, if you're in need of a static site and already like working with Laravel and Blade, be sure to check out Jigsaw.