So you can just do this, npm init site and the name of the project, and you'll get an example project. But for our case, we're going to start from scratch so we can see how to use it. So let's go ahead and make a directory for our new project. I'm going to call it laracasts ssg-saber. Let's go into that. And let's go ahead and scaffold out a blank package.json. Okay. And I'm going to use yarn here because they use it a lot in the documentation. So I'm going to add saber.

So I guess we can do that now. And there's no pages here yet. So it will result in a default 404 page. So let's open that up. And there is our 404 page. So there's also this tutorial in the documentation, which will loosely follow throughout this video. So the first thing is to add a pages directory and add an index.view in there. So let's do that. pages/index.view.

So let's do that. pages/index.view. And let's scaffold this out. And let's say this is the main page. And now this should work. So let's refresh this. And there's the main page. Okay. So as you expect, as you add new files, that will create a new route for you. So let's make an about page.

So as you expect, as you add new files, that will create a new route for you. So let's make an about page. So about should just duplicate this. Duplicate about.view. This is the about page. Save that. And there should be an about page now. So by default, it adds the HTML extension here. So if you don't like that, you can configure it, which we'll do in a second. You can also add a new folder with an index file in there if you prefer to structure your

So if you don't like that, you can configure it, which we'll do in a second. You can also add a new folder with an index file in there if you prefer to structure your code that way. So let's make a new folder called contact. Let's put an index in there. Let's grab this. And this will be the index or the contact page. And if you do it this way, there will be no .html extension. So we can do contact. And this will work.

So we can do contact. And this will work. Cool. So if you don't like that HTML extension, you can remove that in the Saber config. So I'm going to open the main docs here, and I'll put that here. And if you go to permalinks, you'll see how to do that. So we can scroll down here. We can add a Saber config yaml file and just modify these permalinks. So let's do that. Saber config that.yaml, paste that in.

So let's do that. Saber config that yaml, paste that in. And these are the default values. So as you see for the page, we can just remove the .html. And for the post, which we'll get to later on, I'm going to remove the HTML as well and just make it /posts. Okay. So if I say that, I believe I have to restart my dev server if I make changes to the config. So let's do that. Okay.

Say another. Let's make it Markdown. And let's just say another page here. And let's put some content in here. Okay. And this should just work. So if we go to another, there it is. Okay. Now let's take a look at using layouts. So we have to create a new layouts folder here, and let's make one in there called default.view.

Now let's take a look at using layouts. So we have to create a new layouts folder here, and let's make one in there called default.blade.php. So layouts/default.blade.php. And let's add a new layout here. Let's make a div. And let me just put some text in here to see if the layout works. Main or default layout. So we want to put a slot as to where the content will go. So slot name="default".

So slot name equals default. Okay. So let's save that and let's go to our main page again. So our index. And to extend that layout, we can do this. So in our script section, outside of our export default, we can export a piece of data like this. And in here is where you would specify your layout. So layout is default. So now this content will be slotted in to the default layout.

So layout is default. So now this content will be slotted into the default layout. So if we try that out, let me just copy this because we're going to add this to the other pages as well. So the main page should now extend this layout. So back to the main page. And there it is. You see the text default layout. So let's go ahead and put a nav in there. So back to our default layout.

So let's go ahead and put a nav in there. So back to our default layout. And instead of this text, I'll put a nav in here. And let's put an unordered list with our pages. So li a. And let's see. The first one is home. Second one is about. So this is home, about. And then we have our contact page.

So let's do that. So about. Let's add it here. Oh, sorry, outside. Okay. For our contact, let's add it here. And for markdown, we can specify some YAML front matter variables, and we can specify the layout in there. So let's do that. We can do layout, and it's called default.

So let's do that. We can do layout, and it's called default. And that should work. So now all of our pages should have this nav. And it looks like it does. Contact did not work. Why not? Another. So another worked. Why didn't contact work?

So another worked. Why didn't contact work? Because I didn't save it. Cool. So I'm not going to do any styling in this video. Maybe I'll do a separate video for that. But in case you're wondering how to add CSS to your project, let's go ahead and do that. So I'm going to add a new file here. You can put this in a folder as well, but I'll just put it in the root. Let's call it main.css.

You can put this in a folder as well, but I'll just put it in the root. Let's call it main.css. And let's just do everything, say background, green or something, just to see if it works. And you can import that in your default layout or anywhere you want. And there are several ways of doing this, but I'm just going to do it in the script here. So right here, let's import, I believe if I just do main.css, will that work? Or yeah, because we're in the layouts folder, so we have to go up one. There we go. And you can also make use of the style tags in here if you like.

There we go. And you can also make use of the style tags in here if you like. So yeah, let me just comment that out. Okay. Now let's take a look at adding components. This is view. So you want to make use of reusable components. So let's put our navigation into a component. So let's go back to our default view, and let's make a nav component for this, say navigationMain.

So let's go back to our default view, and let's make a nav component for this, say navigationMain. So I'm going to cut this out. navigationMain. Let's close that out. And let's go ahead and make that. I'm going to import navigationMain from we're going to go up one. We're going to make a components folder, and we're going to say navigationMain.view. Let's go ahead and make our components key and say navigationMain. Okay.

Let's go ahead and make our components key and say navigation.main. Okay. So let's make that components/navigation/main.view. Let's paste that in. Okay. And let's see if this works. I'm going to save this too, and let's see if it still works. And it looks like it does. Cool. Okay.

Cool. Okay. Now let's work on making a blog with posts in Markdown. So let's go ahead and add a new folder in here called _posts. And that's where our Markdown posts will live. And we can make use of a Saber plugin to grab all of those posts. So say posts, let's make one called 01-my-first-post.md. And I'm just going to paste in some Markdown here, so you'd have to watch me do that. Okay. So I added two Markdown posts here, my first post and my second post.

Okay. So I added two Markdown posts here, my first post and my second post. And as you see, I have some YAML front matter here, and I'm also extending a different layout here called post. So let's make that we're going to be doing some different things in the post. So I'm making a new layout for it. So we can keep all of this stuff, but let's also just add something here to make sure it's the post layout. This is post layout. Okay.

This is post layout. Okay. And you saw earlier that Markdown files work. And you also saw that we configured our permalinks. So where is it? saber config. This is the permalink structure. So posts and slug. So let's go to that post, see if it works. posts 01, my first post.

So let's go to that post, see if it works. Posts 01, my first post. And there it is. Cool. And you can see it is extending this new layout that we just made. So let's go ahead and make a new page here that lists all of our posts. I'm going to go into the navigation, I'm going to make a new one here for, I'm going to name it blog. So I'll say blog, blog, and we'll make a new page here. So I'm just going to duplicate this and say blog.

So I'll say blog, blog, and we'll make a new page here. So I'm just going to duplicate this and say blog. And let's say this is the blog page, blog role page. And this looks good. Okay. So this is the blog page, and this is where we're going to list out all of our Posts. So if you look at the tutorial here, you'll see how to add Posts to the homepage. We have to make use of this first party plugin called query_posts, and then we have to add something to our config. So let's add this first.

something to our config. So let's add this first. Okay. And let's add this to our saver config. Okay, let's put it on the top here. And let's go ahead and run our server again. And if you scroll down here, you'll see we have to add this injectAllPosts flag to inject the posts that this plugin reads from our file system. So let's do that. Back to our code.

So let's do that. Back to our code. So this will be in our post layout. So let's add that. Sorry, not in our post layout, in our blog page here. So we can add that right underneath the layout. Okay. And we also have to accept a prop here called page. And this has information about the page. And this will also inject the posts into that prop.

And this has information about the page. And this will also inject the posts into that prop. So in our export default, let's just say props. And it's accepted the page prop. And you'll see what that is right now. So if we open our blog and open up DevTools here, let's go into the blog page. And you'll see that prop here. And this prop now has our two blog posts under posts, I believe right there. So we can see the two blog posts that we have in our posts folder. So there is the first one and has all the information we need.

So we can see the two blog posts that we have in our posts folder. So there is the first one and has all the information we need. So now we can just loop over that and display it. So let's do that. So let me just put an <h2> here, say posts. And now we can make an unordered list. And the list item, let's say $v4 equals $post. And we're looping over page.posts. And let's give it a key of the permalink, post.permalink. And we want to link to our blog posts.

And let's give it a key of the permalink, post.permalink. And we want to link to our blog posts. So let's make an anchor tag. Let's put the title in here. So we'll have something called postTitle. And the link, there's a permalink. And that automatically adds the slash posts from our config. So we can just do post.permalink. Okay. So let's try that out.

Okay. So let's try that out. And let's see if this links to our blog posts. And it looks like it does. My second post and my first post. And it does work. Cool. Okay. Let's take a look at code highlighting here. So we have to add another first party plugin.

Let's take a look at code highlighting here. So we have to add another first party plugin. And then add something in our config. Let's do that. So yeah, it's making use of PrismJS. And let's go ahead and add this to our config. So save our config. Let's put it right here. Okay. And now we should be able to make use of code blocks.

Okay. And now we should be able to make use of code blocks. And they should be highlighted. So we also have to add a CSS file or import a CSS file for a theme. So let me add a code block in one of my blog posts. So let's put it in the second post here. Let's just put it underneath here. I'm just going to paste it in. And then now I'm going to add this CSS file. As you see, it says to add it in saber-browser.js.

And then now I'm going to add this CSS file. As you see, it says to add it in saber-browser.js. And this file sort of just bootstraps some things on the client. So if you want to make use of plugins or import CSS like it shows here, you can put it in this file. So let's add that file. saber-browser.js. Paste that in. And you can use any theme here. You can even find ones off NPM.

So let's see if it is cool. Okay. So along with your syntax highlighting, you might want to use view components within your markdown. So Saber does support that. So let's take a look at how to do that. So I'm going to make a new component in here. Let's call it my-counter.view. And I'm just going to paste in a typical counter component here. And let's try to render this out in one of our markdown files.

And I'm just going to paste in a typical Counter component here. And let's try to render this out in one of our markdown files. So let's do it within my secondPost. So my-counter. But you also have to import it just like you would in a Vue single file component. So we have to add a script section here and we have to import it. Import my-counter from. And where is it? We have to go up two because we're within the posts folder.

And where is it? We have to go up two because we're within the posts folder. One more. And now we're in the components folder. Let's say my-counter.view. And let me just move this up. And here is where we can export default and have that components key. Say my-counter. Okay. Let's see if this works.

Okay. Let's see if this works. I think I forgot the quotes here. Okay, try again. And did that work? Yeah, it did work after I refreshed. And there is our Counter component within our markdown file. Okay, let's style our markdown like we've been doing in the other videos. So I'm going to make use of this library again, which styles your markdown similar to GitHub. So let's go ahead and make use of this.

So I'm going to make use of this library again, which styles your markdown similar to GitHub. So let's go ahead and make use of this. I'm just going to yarn add this. Okay. And we have to add this CSS here. So I'm going to put this within our post layout. So let's go to post and let's add this in our style block. Okay. And we also have to make use of the CSS file and then wrap our code in a markdown body class.

And we also have to make use of the CSS file and then wrap our code in a markdown body class. So let's do that. So we can just import the CSS directly in here. So I have this from earlier, we can make use of this and we're just grabbing it from the node_modules directory. So we can just say GitHub markdown CSS. And there's a file in there called GitHub markdown CSS. Okay. And now we just have to wrap this.

Okay. And now we just have to wrap this. So I'm going to remove this. And I'm going to wrap this in a markdown body. So let's say markdown body. Okay. And now this should be styled. And my dev server is not running. Okay. So now our markdown is styled correctly.

Okay. So now our markdown is styled correctly. So I forgot to add a few things here. So this is the page that shows the Post, but I want to show the title and the author and maybe even the date. So let's do that. So again, here we have to accept that page prop. And that's where we'll get the information from. So say page. So now that we have that, we should have access to the YAML front matters in this markdown.

So say page. So now that we have that, we should have access to the YAML front matters in this markdown file. So let me refresh that. Let's open up dev tools. And there's the page prop. If you open that up, you can see all the information here. So let's just put the title and the author in here, or you can make use of any of the YAML front matter. So say page.title and page.author, let's put buy here.

Now let's work on adding titles to our pages here. So if you look at the tutorial here, you'll see there's a section for that. And Saber is making use of the popular view-meta library to do this. So you just have to add a head method in your layouts and we can accomplish this. So let's grab this. Actually before we add this, let's just scroll down a bit and add a site config with a title in our Saber config. So let's do that first. So I'm going to put that up here. Okay.

So I'm going to put that up here. Okay. My blog is fine. And I believe I have to restart because I changed my config. Okay. And now if you look at what we had up here, we can add this head section. So let me grab this and put it in our layouts since all of our pages are extending those layouts. So let's go to default first. And let's also make sure we are accepting the prop, the page prop here.

So let's go to default first. And let's also make sure we are accepting the prop, the page prop here. So say props page. And I believe I already have it for the other one. I do. Okay. So let's go ahead and paste that head section in here. And if you look at it, it's looking for a page title for this current page. And if it has one, then add that before the global title that we just added. But if not, then just use the global title.

So it adds it before the site wide title. And the same goes for the other blog post, but for the normal pages, it doesn't have a title. So we have to add that. So let's check this first. Okay. It does work. So for the normal pages, we just have to add it, say for the index, you just have to add it in here. So this would be home.

Home. Contact. Let's check the another page. And there we go. Cool. Okay. One more thing I want to take a look at is this progress bar. So it makes use of this endProgress library, and it adds a progress bar as the user navigates to each page. So as you see, we just have to add this code in sabreBrowser.js.

to each page. So as you see, we just have to add this code in SabreBrowser.js. So let's copy this. Go to SabreBrowser, paste that in here. And I'm not sure if I have to npm install and progress or if it's built in. So let's see if this works. Okay, so we do have to add it. So let's yarn add progress. Let's run that again. And now we should have a progress bar, as you see, as we navigate through our different

Let's run that again. And now we should have a progress bar, as you see, as we navigate through our different pages. Cool. So the last thing I want to take a look at is deploying our site. So if we look at our package.json, there is a script to build our site. So we can just run yarn build, and that will build our site for production. So yarn build. And this generated a public folder. And this is the folder you would upload to your static site host, like Netlify, Vercel,

And this generated a public folder. And this is the folder you would upload to your static site host, like Netlify, Vercel, or GitHub Pages. So if you go into public, you can see those files there. So I'm just going to run my php server here to make sure it does work, like we've been doing in our dev server. It looks like it does. Cool. Home, about, you can see the progress bar working, contact, and our blog posts work as well.