Build a super fast website with VuePress

Tram Ho

Currently, web applications are one of the tools to help people easily access information and share content to a large community. Because of its convenience, everyone wants to create a website to share, build a profile and portfolio for themselves, and the approach to building a website is even easier. In this series, I want to share with everyone the tools, guide people to create a website, a blog for themselves.

I will start with the first tool, which is VuePress .

About VuePress

VuePress was created to build static web pages or used to build a website to put documentation on it. To build a website with VuePress, you only need a little knowledge of Markdown so it is enough. Markdown is used to write content for the website, each Markdown file will be compiled by VuePress into HTML, users will have direct access to the HTML file compiled via VuePress. These pages are quite well optimized for SEO , as well as user experience when VuePress has the option for you to generate a Single Page App from vue, vue-router và webpack.

Let’s get started

First we ** init project ** okay

Adding the contents of the package.json file

In this package.json file, I have defined a few commands before, in it

  • vuepress dev docs : Used for the development environment, it will build a local server under your computer, give you a web address, and support reloading the web every time you make edits in the source code.
  • vuepress build docs : Will compile your entire project, Markdown files into static HTML files, and you can use them to deploy web to server, public to internet.

After creating the package.json file above, return to Terminal and run the commands again

Ta da, this is your site interface.

The project directory structure is also quite simple

The website configuration will be placed in docs / .vuepress directory

The content pages will be placed in the docs directory.

The links in the website are automatically VuePress by VuePress according to the hierarchy, taking the docs directory as the original, the Readme.MD files will correspond to the index page. For example:

Add a bit of code to make the site more vivid

Default page is also quite simple, right? For users to easily build their own web, VuePress has also built quite a lot of plugins, themes, we just need to install more libraries to use them.

Add a few plugins and libraries to the project.

And to use them, we need to configure a little bit in the docs / .vuepress / config.js file

As soon as you edit the config.js file, the site will automatically reload and display the latest content there.

And we have the Navbar , and a Sidebar on the left. VuePress also extremely convenient, we can configure Sidebar many levels, opening and closing things just by config in config.js file.

It looks a bit simpler too (lol), now you just need to add content to the Markdown pages to make your website more lively.

Conclusion

VuePress is really accessible, editing the content is quite simple during development.

Thank you for reading this far, continue reading the articles in this series 😄

Reference source

Share the news now

Source : Viblo