VuePress – Make personal blog in one note

Tram Ho

VuePress at a glance

For anyone personally, most likely everyone wants to own their own blog pages or CV pages. In this article, I would like to introduce to you a tool to do this which is both fast and convenient and excellent, which is VuePress .

VuePress was born to minimize the time to build blog sites, static web (websites without client-server interaction). The most essential thing for you to be able to use VuePress is probably the use of markdown . If you have written articles on Viblo before, then surely you are no longer unfamiliar with markdown . With this markdown syntax, VuePress compiles into HTML for you. In addition, we can also customize the language on our website, and VuePress also supports the default interface that is quite easy to use and eye-catching.

Setting

To install the VuePress project, you just follow its documents.

Above is I use yarn to create, you can do the same with npm .

After finishing the project, the first thing to think about is how to run the project. One cool thing about VuePress is that it automatically generates the route according to the file structure we create. If anyone has worked with Nuxt.js , it will be similar in route creation. It would look like this.

Relative PathRouting
README.md/
blogs/README.md/blogs
config.md/config.html

Knowing how to define its route, all we need to do is create a README.md file to generate the route.

To run you to the package file add this small paragraph

Then run yarn dev and go to http: // localhost: 8080 / up and you will see Hello VuePress printed neatly in your browser. This will also be the default interface that VuePress does for us, to configure more things for the website, we will look at things below.

Something cool

Basic configuration

Without the configuration our website will be quite rudimentary and simple, to do more special things we need to configure them.

In VuePress to configure, we need to create a .vuepress directory, inside this directory create a config.js file to write config. Let’s take a look at the remarkable configurations.

Note: I will refer to the interface of the homepage of VuePress to always have an intuitive look.

  • title : The title of the web page will be defaulted to the top menu nav bar
  • description : defines the meta tag in the head tag
  • head : defines additional tags inside the head tag, corresponding to the passed values ​​[tagName, {attrName: attrValue}, innerHTML?]
  • host : defines the host used in the dev environment
  • port : defines the port used to run the environment.

Using Vue in Markdown

Since VuePress is based on Vue.js , of course we will have features written based on Vue.js. We can also use interpolation , directive , escaping or even the components .

To use components in VuePress , we define * .vue files inside .vuepress/components .

then when calling components in markdown will look like this

Multi language

Like many other websites, the ability to use multiple languages ​​in the website is also quite interesting, we can get more traffic if our website has many languages ​​to reach many languages. people. VuePress will help us do this too.

To be able to use multiple languages ​​in VuePress, you need to meet the file structure as follows, that is, you need to create files corresponding to the language configured.

Default interface configuration

Nav menu

We can add other items on the nav menu

We can also use other attributes like in normal a tag like target="_blank" , target:'_self' , rel: false

Or moreover, you can also create more dropdown menus

Sidebar

Create a little more animated side bar

  • title : The name of the menu item, which is required
  • path : Link to that menu item
  • collapsable : By default will automatically collapse the nested links, if you set it to false, it will always open the nested links.
  • sidebarDepth : Default is 1, this is the depth of the nested links inside that page, corresponding values ​​like h2, h3. If you write viblo, you will pay attention to these nested links in Table of contents .

Search Box

By default, when you run the application up, VuePress has built this search box.

It is also possible to create placeholders for this search box

Last updated based on Git

VuePress will automatically get the timestamp of the last commit file on your repo to display like this in the home page footer of VuePress like this.

Quite cool in this feature, right. To do this you just need a small config as follows.

It is unlikely that this feature will be available, if you set the value of lastUpdated to a string, it will be displayed in front of the change time according to your git.

Plugins

In addition, VuePress provides us with a lot of other cool plugins that you can learn more about here if you want to learn.

Let’s say you use the plugin @ vuepress / plugin-back-to-top . To add a plugin to the project

then add config.js to use it.

Achievement

Finally, you just need to take an example post on Viblo and copy it to the file in your project to have a picturesque website, a little improvement is the same as VuePress’ document page always =))

And this will be the result.

Conclude

Above, I just demo some of the popular features in VuePress how to build a blog as fast as possible. To be able to understand more deeply, please read its documents and explore more interesting features. Source code I put here for those who want to refer: https://github.com/imphunq/vuepress-demo

Share the news now

Source : Viblo