Some websites are less interactive and more informative. These websites just need a simple setup and we can manage and update them using Markdown. An example of such are documentation websites, online labs/guides, blogs, and even some commercial websites.

Vuepress reduces the time spent on setting up a website down to as simple as writing a configuration object and creating Markdown files. It then transforms and generates a website for you based on these two ingredients.

This lesson shows how to quickly get started with Vuepress and showcases some of it's important configs.

https://app.egghead.io/api/v1/lessons/vue-js-build-a-markdown-based-static-website-with-vuepress/subtitles

Build A Markdown-Based Static Website with Vuepress

Instructor: [00:00] Here, we have a simple Node project set up, and we also have VuePress installed. We can also add a simple script command to help us start the VuePress dev command.

[00:14] Unlike your regular Web project, your entry point should be a readme.md file. We can have a simple welcome message here, and then start VuePress with yarn dev. When we reload our browser, we should get the welcome message we had in the readme.md right in the browser.

[00:44] The next thing we need to do is to give our project a title. Right now, we can see the nav bar still looks empty. We can configure a title in the config.js file, which lives in the VuePress folder. Once we create this file, we can go ahead and export a configuration object, which contains the title of our project. There you go. We have our title in the nav bar.

[01:16] VuePress allows you to add a table of contents in the navigation sidebar. Start with creating a docs folder and adding two documents to it. We'll have doc-a.md and we'll have doc-b.md. We can also add test content. We'll have doc-b and some greeting message here. We also have doc-a and another greeting message here.

[01:55] We can now head back to the configuration file and add a theme config property. Then we can define the sidebar property as well, which takes a list of sidebar items. The first one is the doc item. It has just two children. We have docs/doc-a, and docs/doc-b. When we head back to the nav bar, we can see both doc-a and doc-b.

[02:46] The doc title makes one section in the sidebar, and it's collapsible. We can also add an extra section just to see how sections work on the side navigation. Just like we did previously for docs, create a new folder.

[02:59] We can name the folder API. It can also have a few contents. We'll have api-a.md with a greeting message and a code block. We'll also have api-b with another simple message and a code block.

[03:43] We now need to head back to the config.js file and update the sidebar configuration. We'll have title. We can name this API, and then we'll have the children also, which still contains two items. We'll have API/api-a, and API/api-b.

[04:04] When we save and check out the sidebar, we should have our API documentation as well with the code block, and the second one with the nodes.

Build A Markdown-Based Static Website with Vuepress

Share this video with your friends