VuePress 基础配置

安装Node.js

安装VuePress

yarn add -D vuepress # npm install -D vuepress

项目配置

初始化项目

yarn init -y # 或者 npm init -y

目录结构

├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── dist(生成静态文件的目录)
│       ├── public(存放静态资源)
│       └── config.js
└── package.json

首页

---
home: true
heroImage: /hero.png
heroText: LBVIIC's Notes
tagline: Less is more.
actionText: Blog
actionLink: https://hf.mk
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer:  Copyright © 2017-2021 LBVIIC
---

你可以将相应的内容设置为 null 来禁用标题和副标题。

任何 YAML front matter 之后额外的内容将会以普通的 markdown 被渲染，并插入到 features 的后面。

config.js配置

module.exports = {
    title: 'LBVIIC\'s Notes', 
    description: null,
    base: '/notes/', // 部署在非根目录，若为根目录删除本行
    head: [
        ['link', { rel: 'icon', href: 'https://hf.mk/favicon.ico' }]
      ],
    themeConfig: {
        nav: [
            //单文件
            { text: 'HTML', link: '/HTML' },
            //文件夹
            { text: 'CSS', link: '/CSS/' },
            //分组
            {
                text: '前端',
                items: [
                    { text: 'HTML', link: '/HTML/' },
                    { text: 'CSS', link: '/CSS/' }
                ]
            }
        ],
        sidebar: {
            //路径名
            '/Structure/': [
                //分组名
                {
                    title: '数据结构',   // 必要的
                    collapsable: false, // 可选的, 默认值是 true,
                    sidebarDepth: 1,    // 可选的, 默认值是 1
                    //分组下文件['文件名','显示名称']
                    children: [
                      ['','目录'],
                      ['1.绪论','绪论'],
                      ['2.线性表','线性表'],
                      ['3.栈和队列','栈和队列'],
                      ['4.树','树'],
                      ['5.图','图'],
                      ['6.排序','排序'],
                      ['7.查找','查找']
                    ]
                  }
            ],
        sidebarDepth: 0, // 侧边栏深度 默认为1 最大为2
        search: false, // 关闭搜索
        smoothScroll: true, // 开启页面滚动
    },
    markdown: {
        lineNumbers: true // 开启代码行号
      }
}

package.json配置

在package.json中添加以下代码

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },

部署

命令运行本地服务

访问http://localhost:8080即可预览网站

yarn docs:run

生成静态文件

放置在docs/.vuepress/dist目录中

yarn docs:build

部署到Github

在根目录新建deploy.sh文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
yarn run docs:build

# 进入静态文件的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# git push origin 本地分支:远端希望创建的分支
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

持续集成

在Github仓库的master分支中上传VuePress源代码，在gh-pages分支中上传build完成后的代码。

Github - Actions - 新建一个如下yml文件

每次Push代码后，Github Actions会自动将master分支中的代码build到gh-pages分支中。

name: VuePress

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false

      - name: Install and Build# This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          yarn install
          yarn run docs:build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: docs/.vuepress/dist # The folder the action should deploy.