2/14/22, 2:06 PM Getting Start Your VuePress with CodeSandBox in 30 min - DEV Community

JinTeng
Posted on Nov 15, 2021

Getting Start Your VuePress with CodeSandBox in

30 min
#blog #netlify #vuepress #codesandbox

https://dev.to/jingteng/getting-start-your-vuepress-with-codesanbox-in-30-min-5859 1/7
2/14/22, 2:06 PM Getting Start Your VuePress with CodeSandBox in 30 min - DEV Community

Why VuePress?
Minimal setup with markdown-centered project structure helps you focus on writing.
VuePress generates pre-rendered static HTML for each page, and runs as an SPA
once a page is loaded.
How to Quick Start?
VuePress starter template for CodeSandbox helps you create the project with one
single click.
Continuous deploy your works by connecting a Git repository to a Netlify site and
keeping the two in sync.
Basic VuePress Tutorial

https://dev.to/jingteng/getting-start-your-vuepress-with-codesanbox-in-30-min-5859 2/7
2/14/22, 2:06 PM Getting Start Your VuePress with CodeSandBox in 30 min - DEV Community

Editing your Homepage

Your Homepage(Index) is a README.md . There is a default VuePress template.
---
home: true

heroImage: /hero.png

actionText: CSS →

actionLink: /css/

features:

- title: "Code Snippet"

details: JavaScript, CSS

- title: "Document"

details: Note

- title: "Link"

details: Note

footer: Copyright © Jing, Li

---

Config the Router to Content Pages

Routers are mapped to your file structure.
https://dev.to/jingteng/getting-start-your-vuepress-with-codesanbox-in-30-min-5859 3/7
2/14/22, 2:06 PM Getting Start Your VuePress with CodeSandBox in 30 min - DEV Community

├── .vuepress

├── README.md // <- index

├── CSS // <- path : /css

│ └── README.md // <- index of /css

├── JS

│ └── README.md

├── NOTE

│ └── README.md

└── package.json

└── ...

Child route
Those files in the first hierarchy directory will be built as
.md .html files and can be
accessed.
eg.
├── CSS // <- path : /css

│ ├── README.md // <- index of /css

│ └── page-one.md // <- /css/page-one.html

Sidebar of Content (Auto Sidebar for Single Pages)

The sidebar of content is auto generated by markdown titles.
There are two methods to set your content sidebar of all pages.
Method 1 - set in config.js
module.exports = {

title: "Pika Code",

description: "Front End Notebook",

themeConfig: {

...

sidebar: 'auto'

}
};

Method 2 - set in specific page with yaml format

https://dev.to/jingteng/getting-start-your-vuepress-with-codesanbox-in-30-min-5859 4/7
2/14/22, 2:06 PM Getting Start Your VuePress with CodeSandBox in 30 min - DEV Community

--------

sidebar: auto

--------

Navigation
You can set your navigation items in .vuepress/config.js .
module.exports = {

title: "Pika Code",

description: "Front End Notebook",

themeConfig: {

nav: [

{ text: "CSS", link: "/css/" },

{ text: "JS", link: "/js/" },

{ text: "NOTE", link: "/note/" }

}
};

Child Nav
HTML Head
favicon
Add a favicon.ico in .vuepress/public .
Quick Start
1.install "VuePress + CodeSanBox" template
2.Update Directory Structures
.

├── .vuepress

│ ├── components

│ ├── theme

│ │ └── Layout.vue

│ ├── public // <- put assets

│ ├── styles

│ ├── templates

│ ├── config.js // <- config your title, nav ...

│ └── enhanceApp.js

├── README.md // <- index

https://dev.to/jingteng/getting-start-your-vuepress-with-codesanbox-in-30-min-5859 5/7
2/14/22, 2:06 PM Getting Start Your VuePress with CodeSandBox in 30 min - DEV Community

├── guide // <- path : /guide

│ ├── page-one.md // <- /guide/page-one.html

│ └── README.md // <- index of /guide

└── package.json

└── ...

3.Update Config
module.exports = {

title: "Pika Code",

description: "Front End Notebook",

themeConfig: {

nav: [

{ text: "CSS", link: "/css/" },

{ text: "JS", link: "/js/" },

{ text: "NOTE", link: "/note/" }

}
};

Discussion (0)
Code of Conduct • Report abuse

JinTeng
LOCATION
London
JOINED
Mar 26, 2021

Trending on DEV Community

Media Query with CSS Grid
#html #css #webdev #productivity

Is Java Still Worth Learning in 2022?

https://dev.to/jingteng/getting-start-your-vuepress-with-codesanbox-in-30-min-5859 6/7
2/14/22, 2:06 PM Getting Start Your VuePress with CodeSandBox in 30 min - DEV Community

#programming #react #java #career

What are the qualities of a Principal Engineer (or equivalent title)?

#discuss #career

https://dev.to/jingteng/getting-start-your-vuepress-with-codesanbox-in-30-min-5859 7/7