Getting Started
WARNING
If you have created a vuepress v2 project, just move to Installation section.
Create a Project
First, you need a vuepress v2 project, just create a folder and run following commands:
cd {your-project-name}
yarn init
git init
yarn add -D vuepress@next
create a docs
folder and add a readme.md
file into the folder. Here is the example of readme.md
# Hello World
My first vuepress blog.
After this, create a .vuepress
folder in docs
and add a config.js
file into the .vuepress
folder. Here is the example of config.js
module.exports = {
title: 'My vuepress blog',
description: 'This blog is created by Vuepress v2 and vuepress-plugin-simple blog',
plugins: []
}
And the directory structure will like:
└─ docs
├─ .vuepress
│ ├─ config.js
└─ readme.md
└─ package.json
...
Learn more about Vuepress.
Installation
Install the plugin into project:
yarn add -D vuepress-plugin-simple-blog
# or npm i -D vuepress-plugin-simple-blog
Usage
Add plugin name to plugins
option of .vuepress/config.js
.
module.exports = {
// ...
plugins: ['vuepress-plugin-simple-blog']
// ...
}
Posts Directory
Create a post
folder in docs
, and put your articles into the folder. In my case, I'll put 2022-01-20-hello-world.md
and 2022-01-22-using-tailwindcss-in-vuepress2.md
into the docs/post/
.
Here is the example of 2022-01-20-hello-world.md
:
# Hello World
Hi, This is my first post.
And this is the example of 2022-01-22-using-tailwindcss-in-vuepress2.md
:
# Using TailwindCSS in Vuepress2
TailwindCSS is the best CSS framework that I recommand you to use.
In vuepress, there is a **easy way**...
The directory structure:
└─ docs
├─ .vuepress
│ ├─ config.js
+ ├─ post
+ └─ 2022-01-20-hello-world.md
+ └─ 2022-01-22-using-tailwindcss-in-vuepress2.md
└─ readme.md
└─ package.json
...
After you put it, launch your dev server and you can see the articles are all can visit by the link like {your-sites-domain}/post/xxxxxx/
.
Demo
In my case, there is the artcle name and the link:
docs/post/2022-01-20-hello-world.md
- link will be
{mysite}/post/hello-world/
(← click can visit)
- link will be
docs/post/2022-01-22-using-tailwindcss-in-vuepress2.md
- link will be
{mysite}/post/using-tailwindcss-in-vuepress2/
(← click can visit)
- link will be
Customization
See Customization part to learn about customization.