install

Create and change into a new directory.

mkdir vitepress-starter && cd vitepress-starter

Then, initialize with your preferred package manager.

yarn init

yarn add --dev vitepress vue

mkdir docs && echo '# Hello VitePress' > docs/index.md

Add some scripts to package.json.

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },
  ...
}

Configuration

Without any configuration, the page is pretty minimal, and the user has no way to navigate around the site. To customize your site, let's first create a .vitepress directory inside your docs directory. This is where all VitePress-specific files will be placed. Your project structure is probably like this:

theme

Nav

Sidebar

Prev Next Link

Edit Link

Last Updated

Layout

Home Page

Team Page

Footer

Search

Carbon Ads

自动部署

Github

Create a file named deploy.yml inside .github/workflows directory of your project with the following content:

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: yarn
      - run: yarn install --frozen-lockfile

      - name: Build
        run: yarn docs:build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vitepress/dist

网页标题栏 ico

favicon.ico 文件放置到 /docs/public 即可 。

外链

themeConfig: {
    logo: '/@32px.svg', // 文件文字 /docs/public
    socialLinks: [ // 设置图标外链
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: '...' },
      // You can also add custom icons by passing SVG as string:
      {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
        },
        link: '...'
      }
    ]
  }

底部信息

themeConfig: {
  footer: {
    message: 'MIT License.',
    copyright: 'Copyright © 2022-present Carveybunt'
  }
}

评论

目前评论的使用方式并不是很优，尝试了几种方式，基于现状也找不到更格式的方式了，这个也可能和vitepress的宗旨（并不是vuepress的下一代）或者还没到正式版优关系

使用方式是在想开评论的文章最后加一个 <Comment />

.vitepress/config.js 这个文件中的 comment 部分换成自己的仓库,才能正确的保存评论

...
comment: {
    repo: 'airene/vitepress-blog-pure', //你自己的用户名和仓库名
    themes: 'github-light',
    issueTerm: 'pathname'
}
...