Getting Start Your VuePress with CodeSandBox in 30 min

JinTeng — Mon, 15 Nov 2021 02:54:32 +0000

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

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.

.
├── .vuepress
├── README.md // <- index
├── CSS // <- path : /css
│   └── README.md // <- index of /css
├── JS
│   └── README.md
├── NOTE
│   └── README.md
└── package.json
│
└── ...

Child route

Those .md files in the first hierarchy directory will be built as .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

--------
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
├── 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/" }
    ]
  }
};

DEV Community: JinTeng