We'll take this repo as an example to show you how to make this site as you like.

Don't forget to refer to official VuePress Guide to find out more.


Now, we care about the docs directory which includes:

├── guide
├── projects
└── .vuepress
    ├── components
    │   ├── Homepage.vue
    │   ├── MContent.vue
    │   ├── Projects.vue
    │   └── styles
    │       └── config.styl
    ├── config.js
    ├── override.styl
    └── public
        ├── icons
        ├── profile.jpg
        └── projects

The documents

The entry page is, followed by sub-pages under the directories guide and projects.

You can modify, delete and create your own directory and files according to your needs.

You should have basic idea of Markdown and YAML Front Matter.


The config files of this site are all placed under .vuepress directory. The only two you need to concern is config.js and public folder.


You need to place your images under docs/.vuepress/public directory, so that you can access them using /profile.jpg in the yaml section of the file.



The title of the site and the navbar is in the docs/.vuepress/config.js

Still in the config.js, under the themeConfig key.


If you don't like the homepage, simply modify the docs/ file to switch to another layout or just Markdown page.

There are two different types of sidebars: routing between multiple Markdown files and TOC of a single page.

This Guide contains separate files under docs/guide. To enable sidebar, you have to manually set this in the config.js.



As you can see in the docs/, most of the contents are written in the YAML front matter. Just modify the corresponding section and you should get yours.


Actually, it's a pure Markdown file. You can use the inline widget <MarkdownCard> to show your project, publication or portfolio. Check the example at docs/projects/

You can even add some more sections with Markdown to make this page a resume for you.

Customize Page

Adding a page is simple, create docs/Foo/ and you can access it with link /Foo/ in the context.

To automatically generate the sidebar of the current page, add sidebar: auto in the front matter section.

You can even tune the styles with <style> tag. Check here for more information.

Last Updated: 4/29/2018, 7:44:46 AM