But I had trouble with the hot module replacement, so we'll just do it manually here. And if you do it manually, you can even install it on an existing application. So let's go ahead and do this. So let's make a new folder. Let's call it LayerCasts SSG VuePress. And let's cd into that. Okay. Let's yarn init to make a package.json. And I'm just going to press Enter for all of this, okay? And we can install VuePress locally.

And I'm just going to press Enter for all of this, okay? And we can install VuePress locally. And it recommends using yarn, as you can see with this warning here. So I'll stick to using yarn for this video. Let's grab this, and let's install it locally. Okay, that's done. Let's make a docs directory and make a file named readme.md and put a heading in there. You can do this manually too, but I'll just copy and paste it for now. So this is going to be the default page when we open up our dev server. And now we have to add this to our package.json.

So this is going to be the default page when we open up our dev server. And now we have to add this to our package.json. So let me just grab these scripts. Let's go into our package.json. I have to open it in my code editor. And let me go to my package.json, and let's put the scripts right underneath here. And now we can run yarn docs dev, and that should boot up our dev server. So yarn docs dev, and this should show that one page that we made right here with hello VuePress. Okay, so there is the default page, which corresponds to the docs readme.markdown.

And now we should have an about route here after it reloads. There it is. Or you can create a new folder and have a readme.md within that. So readme.md corresponds to your index.html in other static site generators. So let's make a new folder, say team and make a new file called readme.md and say team, put some paragraphs in here. And this should work as well. So team. Or I guess you have to do team like this. Cool.

Or I guess you have to do team like this. Cool. Okay, let's take a look at the configuration. So you're gonna have to make a lot of changes in the config. So your documentation site is functional. So let's make a .viewpress folder and have a config.js file within that. So let's add that within docs.viewpress.config.js. Okay. And I believe it also supports config.yaml files, but we'll stick to that JavaScript and we'll just add this by default.

Now if you look at where this link points to, you can see that it points to a guide page, and you can change that here. But let's just stick with that and add a new folder or a new file for guide. So I'm going to stick to the folders approach here and say, guide, readme.md, and add a guide here, and let's add some paragraphs. Okay, and let's see if this works. Cool. Okay, now let's take a look at adding things to the navigation bar. So if you look at the ViewPress documentation, they have a bunch of links up here. So if you go back here to nav bar, you can add links like this.

And for this one, I believe what I add about, and I think you need a trailing slash here. So let's say about, and what was the last one? I think I made one called team. So let's add that team and team. Let's see if this works in the sidebar. And it looks like I added it, but it's not rendering here for some reason. So yeah, that didn't work because if you don't put a folder as we have for about, so I just have an about.md that markdown, it adds this HTML suffix. So you have to add that manually. So that's what I did.

So they have a group called. So this is for the theme. Let's go back to the main view press docs. So they have one group called guide and one group called advanced. And within here, it has a bunch of children and same for advanced. But if your documentation is pretty straightforward, like I have, then you can just stick to a single sidebar with a bunch of pages. Okay. What else do we have here? We have front matter.

What else do we have here? We have front matter. So if you go into one of our markdown files, we can add front matter up here. And you can reference these variables within the documents. So let's say title guide to using VuePress. And you can just make use of those variables straight within here. So front matter title. And that should render out. And let's make sure to name this correctly. Oh, sorry, I think you need a $ sign here.

And let's make a new one called ExampleComponent of view. And I'm just going to paste in a component here. And it's just a basic counter. And it also shows a greeting. So let's say that. And it's going to one of our markdown files. And let's just use that component right underneath the code. So if I say ExampleComponent, and close it out, hopefully this should render and does right there. Cool.

But we're just looking at the default theme in this video. But if you want to override some of the default colors, you can do that by overriding this file, and just changing these variables. So let's add a styles_palette.styl file. And we can just paste that in. So say styles_palette.styl, which is stylus. And if you don't know stylus, you can just use normal CSS. And that will work fine. So I'm going to paste in the colors. And I'm going to change the main accent color to blue, just to see if this works.

Let's see if that works. Okay, and the medium-zoom plugin just allows us to click on the image and zoom in. So let's see how we would do that. Just yarn add medium-zoom. And then just add it to the plugins array in our config. So I'm going to stop this, paste this in. Let's go ahead and add this plugins array in our config. I'm going to put it at the top. Okay. And let's restart our dev server.

So what I've shown you is just a handful of the features, which can get you started on writing your documentation. So to deploy your documentation, just check out the package.json file and you can run the yarn docs build command. And this will generate a folder which you can just throw up on any static site host, like Netlify or Vercel or pretty much any host these days. So yarn docs build. And now we have this dist folder. So let's go into that. ViewPress dist.

So let's go into that. ViewPress dist. Sorry, docs. ViewPress dist. And if you list the files out here, this is what you would deploy to your host. So I'm just going to do a local server here. I have one called server. It's just a php server. And let's see if this looks like the same thing we've been doing. And it looks like it works.