So let's go ahead and do this. And let's make a new project called Laracast SSG Gridsum. Okay, that's done. Let's go into it. And let's open it up in VS Code. And let's run our dev server with gridsum develop. Okay, let's open this up in our browser. So we can see the main site here. There's also a GraphQL Explorer down here, which we'll take a look at in a second. And there's some default code and pages and some styling set up for us already.

There's also a GraphQL Explorer down here, which we'll take a look at in a second. And there's some default code and pages and some styling set up for us already. So let's look at that in our editor here. So we have our source folder where all of our pages live. We have two pages here, the main page and the about page, which corresponds to these two pages. And there is also a layout page here. So you see a layouts folder and we have a default layout where these two pages extend from. So you can see the slot here.

This should make a new route for us and that should be accessible in the browser. So let's try that out. Go to contact. And there's our contact page. And if you want, you can make a new folder and put an index.view in there, and that should work as well. So let's make a new file or a new folder called team. Let's make a new file in there called index.view, paste that in as a team, and this should work as well. We also have information about the title here, which I forgot to change in the about, I mean,

So, like I said, there is a default layout and that's global. But if you want to use another layout, we can do that as well. So I'm going to duplicate this. I'm going to make a layout, which we'll use later on called post-layout.blade.php. And above the slot, let's just say this is post-layout to see if it works. And let's extend this layout for the contact page. So instead of layout, we can say post-layout, and then we have to import that as we usually do in view. So let's import post-layout from, and you can use this ~, which points to the source folder.

So let's import postLayout from, and you can use this tilde, which points to the source folder. So we have layouts and postLayout.view. And let's add our components key and say postLayout. And let's see if the contact page extends the postLayout. So let's go to contact. And there you see the postLayout being used. Okay. Now let's take a look at components. So let's switch this nav here into a component, because right now we have two layouts and

Now let's take a look at components. So let's switch this nav here into a component, because right now we have two layouts and this is duplicated. So I'm going to grab this. Let's make a new component called NavigationMain, okay. And let's import that as well. So I'm going to grab this whole script section here, and it's posted in here or pasted in here. Sorry.

So any information within your app, you should be able to query it with GraphQL. So if you look at your dev server, you'll see this extra URL, which you can click on. And we'll have this GraphQL playground where we can play with GraphQL. And it has my old project here, so let me just comment this out. If you're not familiar with GraphQL, that's okay. It's pretty straightforward. And there's really good autocomplete, which can help you learn it if you don't know it. So that's pretty much how I learned. I just played around and used the autocomplete. So as an example for the first query, let's grab the site name,

I just played around and used the autocomplete. So as an example for the first query, let's grab the site name, which you can find in the grid-sum-config. So grid-sum-config, you'll see the site name here. So to do that, we can do query and curly braces. And I believe you can do control-space for the autocomplete, but I have that bound to Alfred on my computer, so you can also use shift-space. And here is the metadata we want to query, so let's grab that. And within there, let's bring up the autocomplete again. And we have these options, and we want the site name.

So I'll say the path, and those are the pages in our site. So with that in mind, let's go ahead and take a look at making a blog with markdown posts. So the idea is to have a folder with markdown posts, and then somehow bring that into our GraphQL store here. So we can make use of a plugin to read from our file system, and another plugin to render our markdown. So if you go into here and search for plugins, you'll see the Gridsum source file system. So let's install that. And we also want Gridsum transformer remark.

and let's put this within our plugins array here. And this just says to use this plugin. And we have this new type of collection, and it's called blogPost. And the path to this is in content/blog, and any .markdown file. So let's go ahead and make that. So let's make a new file here. Let's say content/blog/01-my-first-post.markdown.

Let's say content/blog/01-my-first-post.markdown. Okay, so it made that new file. And I'm just going to paste some markdown in here and make another markdown file. So we have two of them. Okay, so I added two markdown posts. Let's make sure we add this templates section to our Gridsum config. So let's add that as well right underneath the plugins array.

to our Gridsum config. So let's add that as well right underneath the plugins array. And this is going to specify the path where you can access your blog posts. So I don't want the year, month, and day. So let's just say posts and then the slug. So we also have to make sure that this slug variable exists in our markdown. And I've added it as the YAML front matter to our markdown posts.

And I've added it as the YAML front matter to our markdown posts. Okay, now this should be able to read the contents of this folder. And this information should be available in our global GraphQL store. So let's run our dev server again, so npm run dev. And let's open up this GraphQL playground again. And this seems to be really memory intensive. I'm not sure if you can hear

but just know that you have to grab the edge and then the node to get the individual blog posts. So let's see if we can get information. And there we go. We can grab all of the YAML front matter variables in here. So let's say title, say slug. Let's get the path. And the content is the rendered HTML from the markdown. Okay, run that, and there we go. My second post and my first post.

Okay, run that, and there we go. My second Post and my first Post should be down here somewhere, there it is. And to get a single blog post, which we need when we're displaying a single Post in the browser, you can do this. I haven't commented out here, so I'll just make use of it. So it's similar to this. Let me just comment this out. But you have to give it a path as a parameter.

Let me just comment this out. But you have to give it a path as a parameter. And I'm grabbing the second Post here. And let's also add the content in here. And let's run that. And there's information about a single Post based on this path. Okay, so now the question is, how do we get this information into our application? So let's do that now.

how do we get this information into our application? So let's do that now. So the first thing we need to do is add this blogPost template in this templates folder. So let's do that. Say blogPost.view. And let's just add a postLayout here. So I'm gonna do postLayout. And let's close that. And let me just add the imports for that.

And let's close that. And let me just add the imports for that. And let's just say single blog post info goes here. Okay, so now if I did that right, hopefully the URL for blogPost should work. So let's say posts and 01, my first post. And there we go. We're getting the correct template. So now we just have to import the GraphQL query.

We're getting the correct template. So now we just have to import the GraphQL query that we created here. So this is for the single blog post. So this one here. So I'm gonna grab this. And let's go back to our code. And there's this new block called pageQuery, which we can make use of for any GraphQL queries that we need to make.

So first thing, I just wanna name it. You don't have to name it, but I like naming it. And second thing, it has to take a parameter so it can read it from the URL. So it's gonna take a path param. And that is a string and that's required. So this is just GraphQL syntax. And this is pretty much almost the same. So we have a blogPost, but we have to add what we want the variable

So we have a blog post, but we have to add what we want the variable that this file is gonna use. So we want a variable called blogPost. Okay, and instead of hard coding it, we can make use of the path that we have from above like this. And everything else should be the same. But now we should have access to this blogPost variable with information about this specific blog post.

But now we should have access to this blogPost variable with information about this specific blog post. So I hope that makes sense. So if I did this correctly, I'm gonna go in here. I'm gonna refresh this page. And I'm gonna close this because it's slowing down my computer. Let me just grab this. This is the query for all the blogPosts. And I'm gonna close this.

This is the query for all the blog posts. And I'm gonna close this. And if I open up in DevTools, if I did everything right, we should see that blogPost variable. And if you look here, you'll see it within this page computer property. And this is all the information about this particular blogPost. So now we can make use of it in our code.

about this particular blog post. So now we can make use of it in our code. So let's put the title here. So let's say H2. Say page.blogpost.title. And instead of this, let's render out the markdown. So we have to use the v-html directive so it actually renders it out and not just spit it out with escaped strings. So we can say page.blogpost.content.

and not just spit it out with escaped strings. So we can say page.blogPost.content. And hopefully I did this right and it should render out our post. And it looks like it does, cool. And let's check out the second blog post. Sorry, my second post. And there is our second post, cool. So let's go ahead and style this markdown like we've been doing in the other videos.

So let's go ahead and style this markdown like we've been doing in the other videos. So I'm gonna make use of this package and just npm install it. Okay, and then we have to add a wrapping div with a markdown body class. A markdown body class. And we also have to add these styles. So we can put this, let's put it, we can put it in here or we can put it in the post layout.

So we can put this, let's put it, we can put it in here or we can put it in the post layout. So I guess I'll just put it in here. So let's put it in here. Okay, and we also have to import that CSS. So let's do that within the script. So I'm gonna import, say github.markdown.css from node_modules folder. Okay, and now we can wrap this stuff in a markdown body.

And this is directly within the node_modules folder. Okay, and now we can wrap this stuff in a markdown body. So I'll say markdown body. Okay, and let me restart my dev server. And now our markdown is styled, cool. Okay, let's see if we can add some syntax highlighting for our code. So I'm gonna add a code block in my second post. My second post. So let's paste in a code block right here.

My second post. So let's paste in a code block right here. And let's see how that looks by default. It looks okay. But I'm gonna make use of a plugin for some syntax highlighting. So if you look through the plugins, you'll see one called Prism, which is probably more popular, but the one I like using is Sheeky.

So let's add it right here, okay. And the theme I wanna use is material theme. Pale Knight, which is almost the same as what I'm using right here in my code editor. So let me save that. This should be done. Let's restart our dev server. And there you see our code is now highlighted, cool. Okay, let's finish off by adding a blog role, which lists out all our blog posts and links to them.

Okay, let's finish off by adding a Blog role, which lists out all our Posts and links to them. So let's do that. I'm gonna make a new page called blog. And let's scaffold this out. This will extend from the normal layout. So let's say layout, and let's just say blog. And here is where our posts will go. So let's say posts here. And let's add this to our navigation.

So let's say posts here. And let's add this to our navigation. Let's also add the other pages we made. So home, about, I believe I made a contact page. Okay, let's see if this works, blog, okay. And let's go ahead and go back to our blog and run that query again, which I copied a few minutes ago. So we can say pageQuery, pageQuery. And let me just paste in that query.

So we can say pageQuery, pageQuery. And let me just paste in that query. And again, we just have to make a few changes. We can name it. You don't have to name it, but I like naming it. And then we have our Blog. I don't have to name it, but I like naming it. And then we have to specify the variable we want available on this page. So let's say blogPosts, put a colon,

we want available on this page. So let's say blogPosts, put a colon, and this should be the same. So now, if I do that, if I open up DevTools, you'll see we have this blogPosts variable available, and we have our edges, and these are the two blogPosts. So now we can loop over that and just display it here. So I'm going to remove the slug since we don't need it. We can get that from the path. And I'm going to replace it with a variable.

We can get that from the path. And I'm going to replace it with a variable that Gridsum automatically adds called timeToRead. And it just estimates the timeToRead based on how many characters are in the markdown file. So let me save that. And now we can loop over them in here. So let's say, let's make this an unordered list. li equals post. And so page.blogPosts.edges is the array.

L-I-V-4 equals post. And so page.blogPosts.edges is the array. And let's make the key the path. So post.path, okay. And let's make this a link to post.node.path. And let's say post title. And let's close that out. And let's say minuteRead. Let's put this in brackets. And we can output the,

Let's put this in brackets. And we can output the, sorry, this is post.node.title. Grab this, and we can grab post.node.timeToRead. Time to read. Okay, so hopefully I did all of this right. And it looks like I did. So it's linking to our posts. And we can see the counter for how long it takes to read. And everything is working correctly.