Hello everyone, today in the hot weather of the hot summer, I have surfed through a tool that helps us create a static website of vue- that’s VuePress. If you pay attention, VuePress is a tool to help write on Vue ‘s doc page. Let’s go find it together.
What are static sites?
- Is a website that serves to store information.
- There is no client-server interaction except to embed a third party into the website.
- It has fast speed and no server, so it reduces and reduces the possibility of security holes
- Can contain HTML files, Mardown, .vue files so the ability to load web pages is very light and fast. It can help SEO significantly.
What is VuePress?
A “static site generator”, built and developed based on the Vue Framework. The first version appeared in early April and the current version is “0.14.1”.
Created by 2 parts: “minimalistic static site generator” and “default theme”.
Why use VuePress?
- VuePress will parse the markdown files which are structured into HTML files when building. Therefore, page load speed is very fast.
- With each created markdown file will be parse like the Vue template, we can use VueDevTool to check. Can use components to transfer into the markdown file
- VuePress SEO friendly, has a built-in search system – search by heading and subheading index.
How VuePress works
- A VuePress page is actually a SPA, also built on Vue Vue Router and webpack
- During the build process, we create a server-rendered version of the app and render the corresponding HTML when we access the corresponding route. This approach is inspired by Nuxt
- For each markdown the file is compiled into HTML with markdown-it and then processed like the Vue component template. This allows you to use Vue directly inside the markdown files and it’s great when we need to embed dynamic content.
You can refer to the installation as follows:
Default page routing
If we want to configure it, we can write it in
Slidebar : There are many types of slidebar according to our configuration, but when using slidebar: ‘auto’, each page will automatically assign corresponding slidebar.
Search box : The default Search box of VuePress, if you do not want to use this built in we can set search: false. Also can search by Algolia.
- .vuepress / styles / palette.styl: this file we want to override the default theme colors in vuepress, in addition we can define some more colors that we use. Only define color variables without defining the style in this file.
- .vuepress / styles / index.styl: add the styles we defined here to use http://stylus-lang.com/
Custom styles : We can override some styles in the default theme .vuepress / override.styl
i18n : in addition, VuePress also has i18n function which helps us easily change translations. It is necessary that we create folders that correspond to the prefix
Some of the benefits of using VuePress
Use Mardown to write content
Use Component in Mardown file
Use YAMP Front-matter in Markdown file
Support i18n easily
Support search in the default theme
Through a few of my share above hope to provide you with some things that you may need when working. Thank you for reading my shared article.