AppDividend
Latest Code Tutorials

VuePress Tutorial For Beginners

VuePress Tutorial

1,945

Get real time updates directly on you device, subscribe now.

VuePress Tutorial For Beginners is the today’s leading topic. VuePress is composed of two parts: a minimalistic static site generator with a Vue-powered theming system, and a default theme optimized for writing technical documentation. Each page generated by VuePress has its own pre-rendered static HTML, providing excellent loading performance and is entirely SEO-friendly. Once a page is loaded, however, Vue takes over the static content and turns it into the full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site.

VuePress Features

  • Built-in markdown extensions optimized for technical documentation.
  • Ability to leverage Vue inside markdown files.
  • Vue-powered custom theme system.
  • PWA Support.
  • Google Analytics Integration.
  • A default theme has:
    • Responsive layout.
    • Optional Homepage.
    • Simple out-of-the-box header-based search.
    • Customizable navbar and sidebar.
    • Auto-generated GitHub link and page edit links.

VuePress Tutorial

First, we will install the VuePress on our local machine. So let us do it.

Step 1: Install VuePress.

Create a project directory called vpress.

mkdir vpress

Go into that directory.

cd vpress

I am using Yarn as a package manager, so let us pull the package using the following command.

yarn add vuepress

If you are not using Yarn, then you can pull through NPM.

npm install vuepress --save

Now, open the project in your favorite editor.

code .

Step 2: Create a folder inside the root.

Inside the project root folder, create one folder called docs.

Now, in that folder, make one markdown file called a README.md.

If you have previously written the Github Documentation then you familiar with Markdown Files. Also, you are familiar with README.md file.

In the README.md file, just write the following line of code.

# Hello World

Okay, now we need to run the project.

Step 3: Run the Project in development server.

Go into your root folder, and open the terminal and hit the following command.

npx vuepress dev docs

 

VuePress Example Tutorial

Switch to your browser and go to this URL: http://localhost:8080/

You can see the Hello World. Here # means h1 tag equivalent to HTML. It is simple Markdown syntax.

You can add the scripts to package.json file.

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

Now, stop the server by control + c and then start the server with the following command.

Related Posts
1 of 12
npm run docs:dev

You can also generate the static assets using the following command.

npm run docs:build

By default, the built files will be in docs/.vuepress/dist, which can be configured via the dest field in docs/.vuepress/config.js The created files can be deployed to any static file server.

Step 4: Configuration.

For creating a configuration file, we need to first create a folder inside the docs folder called .vuepress.

Inside .vuepress folder, create a  javascript file called config.js file.

// config.js

module.exports = {
  title: 'First VuePress Project',
  description: 'Exploring VuePress'
}

Okay, if your development server is running, then you can see that the page now has a header with the title and a search box. VuePress comes with built-in headers-based search – it automatically builds a simple search index from the title, h2, and h3 headers from all the pages.

 

VuePress

There are more configurations that you can apply, for example, base, title, head, Google Analytics, Port number and other stuff.

Step 5: Asset Handling

In our project, docs folder is mainly reacting as a root folder, so we need to create one folder called images inside docs folder, and them move any local image to that folder. We can access using this syntax.

README.md

# Hello world

![An image](./images/Krunal.jpg)

You can see, now we can see the image in our page.  You can check out the more options here.

Step 6: Create second md file inside docs folder.

Okay, now create second Markdown file inside docs folder called Demo.md. Write the following line inside that file and save it.

# This is second demo

Now, see the project in the browser.

 

VuePress Markdown Tutorial

You can see here, the content is displaying in the browser and after clicking that link, we can redirect to a new route, and that is Demo.html. 

We have not defined any route but still, VuePress takes that second file as another route, and after clicking that link we redirect to that page. How cool is that!! It automatically figures it out by itself.

You can check out the markdown extensions. It is handy for creating content.

In future, we will build an entirely static website with the help of VuePress.

Conclusion

It is the perfect framework for the creating technical documentation and blog. It is server-side rendered so entirely SEO friendly. VuePress Tutorial For Beginners is over.

 

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.