Guide

1. Init VuePress V2 Repo

1. Initialize your project

   git init
   yarn init
   

2. Install VuePress locally

   yarn add -D vuepress@next
   

3. Add some scripts to package.json, set source code dir as src

   {
       "scripts": {
           "dev": "vuepress dev src",
           "build": "vuepress build src"
       }
   }
   

4. Add the default temp and cache directory to .gitignore file (Warning: this file must be UTF-8 or ASCII to work correctly)

   echo 'node_modules' >> .gitignore
   echo '.temp' >> .gitignore
   echo '.cache' >> .gitignore
   

5. Create your first document

   mkdir docs
   mkdir src
   echo '# Hello VuePress' > src/README.md
   

2. Config NavBar and SideBar

1. Add config file at src/.vuepress/config.jsWarning:

   • base must be set to the repo name.
   • dest should be set to the output folder

   import { defineUserConfig } from 'vuepress'
   
   export default defineUserConfig({
       base: '/ziyu_zhou_personal_website/',
       dest: './docs',
       lang: 'en-US',
       title: 'Hello VuePress',
       description: 'Just playing around',
   })
   

2. Use default theme

   import { defaultTheme } from 'vuepress'
   
   export default  {
     theme: defaultTheme({
       // default theme config
         navbar: [
         {
           text: 'Home',
           link: '/',
         },
       ],
     }),
   }
   

3. Add Nav Bar Tutorial

   export default {
     theme: defaultTheme({
       navbar: [
         // NavbarItem
         { text: 'Foo', link: '/foo/', },
         // NavbarGroup
         { text: 'Group', children: ['/group/foo.md', '/group/bar.md'],},
         // string - page file path
         '/bar/README.md',
       ],
     }),
   }
   

   My config

   export default {
     theme: defaultTheme({
       navbar: [
         { text: 'Home', link: '/', },
         { text: 'About', link: '/about/' },
         { text: 'Projects', link: '/projects/' },
         { text: 'Guide', link: '/guide/' },
         { text: 'GitHub', link: 'https://github.com/zzyBen' },
       ],
     }),
   }
   

4. Add Side Bar Tutorial

   export default {
     theme: defaultTheme({
       // sidebar object
       // pages under different sub paths will use different sidebar
       sidebar: {
         '/guide/': [
           {
             text: 'Guide',
             children: ['/guide/README.md', '/guide/getting-started.md'],
           },
         ],
         '/reference/': [
           {
             text: 'Reference',
             children: ['/reference/cli.md', '/reference/config.md'],
           },
         ],
       },
     }),
   }
   

   My config

   export default {
     theme: defaultTheme({
       sidebar: {
         '/guide/': [
           {
             text: 'Guide',
             children: ['/guide/README.md', '/guide/getting-started.md'],
           },
         ],
       },
     }),
   }
   

3. Add original Harry Porter template

1. Add npm stylus package

   yarn add -D stylus
   

2. Copy the folders under ``.

   |-- .vuepress
       |-- components
       |-- public
       |-- styles
   

   Warning:

   • style in VuePress V2 must be set in .vuepress/styles/index.scss.

3. Register components

   yarn add -D @vuepress/plugin-register-components@next
   

   Tutorial

   import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
   import { getDirname, path } from '@vuepress/utils'
   const __dirname = getDirname(import.meta.url)
   
   export default {
     plugins: [
       registerComponentsPlugin({
         // options
         componentsDir: path.resolve(__dirname, './components'),
       }),
     ],
   }