img

# Into to Vuepress

VuePress is an amazing and very powerful static site generator. The blog you are seeing is made by vuepres itself. Main idea to make vuepress was for ease in maintaining documentation but it can also be used to make awesome personal blogs and can easily be deployed on many static site hosting like vercel netlify and github pages.

# How does it work?

Vuepress works by converting the markdown text into html. The plus point is that its rendered statically. Thats why it loads very quickly. All of the functionalities of vue router is native to vuepress.

Second advantage of vuepress is that you can declare global components like in vue and then use it in your markdown files which gives awesome flexibility to create and customise your blog pages.

# Installation

The recommended way to install vuepress is to use create vuepress-site generator (opens new window). Its a nice and easy tool to create and use nice and simple boilerplate vuepress app.

    yarn create vuepress-site [optionalDirectoryName]
    
    npx create-vuepress-site [optionalDirectoryName]
    
    // Make sure to add code blocks to your code group

    After installation, Change the directory to docs and install the dependencies.

    cd docs
    
      yarn
      
      npm install
      
      // Make sure to add code blocks to your code group

      After installing the required dependencies, run the dev script to start the server at http://localhost:8080 (opens new window)

        yarn dev
        
        npm run dev
        
        // Make sure to add code blocks to your code group

        # Directory Structres

        You will see a index.md file in the docs folder. This is your main file displayed on your main page. It is displayed on your front page. It takes the information from the frontmatter inside it. A sample index file is given below.

        img

        # Plugins and Themes

        Vuepress has an awesome support of official and community plugins as well as themes. It really helps improving user experience and seo. In the source folder, there is a file called config.js which holds all the configuration of our vuepress project including meta tags, github repository, title, plugins and much more. For example to install the vuepress social plugin we can just write

        npm install vuepress-plugin-social-share -D
        

        and then include it in the config.js.

        plugins: [
            'social-share',
                {
                    networks: ['twitter', 'facebook']
                },
        ]
        

        To use it in our markdown file, we can include it just like any other vue component.

        <social-share :networks="['facebook', 'twitter']"/>
        

        Themes can also be used in the same way.

        # Deployment

        It is very easy to deploy existing vuepress project. Just run

        npm run build 
        

        and deploy it on any static website hosting paas like github pages netlify vercel gitlab etc. Thankyou.

        Last Updated: 11/17/2020, 4:00:33 PM