开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情

一、简介

1.1 什么是VuePress

本质：Vue驱动的静态站点生成工具

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面

1.2 VuePress特性

简明优先
- 内置 Markdown 拓展
Vue驱动
- 在 Markdown 文件中使用 Vue 组件的能力
- Vue 驱动的自定义主题系统
性能高效
- 预渲染静态页面HTML
PWA 支持
Google Analytics 集成
一个默认主题：
- 响应式布局
- 可选的主页
- 简单、开箱即用、基于标题的搜索功能
- 可定制的导航栏和侧边栏
- 自动生成的 GitHub 链接和页面编辑链接

二、快速上手

创建一个项目路

mkdir vuepress-starter && cd vuepress-starter

2.使用你喜欢的包管理器进行初始化

yarn init  
# 或者 npm init

将 VuePress 安装为本地依赖（不推荐全局安装）

yarn add -D vuepress 
# npm install -D vuepress

创建你的第一篇文档

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

在 package.json 中添加一些 scripts

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

在本地启动服务器

yarn docs:dev 
# npm run docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器

三、基本配置

主题设置

docs/.vuepress/config.js

module.exports = {
    title: "my",
    description: "This is a blog.",
    base: '/vBlog/',  // 这是部署到github相关的配置 下面会讲
    markdown: {
        lineNumbers: true // 代码块显示行号
    },
    themeConfig:{
        sidebar: 'auto',//自动获取侧边栏内容
        sidebar:{
            "/node/":[
              ["", "node目录"],
              ["path", "作为前端也需要知道的路径知识"],
              ["stream", "node核心模块-stream"]
            ],
            "/web/":[
              ["", "前端"],
              {
                title: "css",
                name: "css",
                collabsable: false,
                children: [
                  ["css/", "目录"],
                  ['css/1', "css常考面试题"]
                ]
              }
            ]
          },
        nav: [{text: "主页", link: "/"      },
            { text: "node", link: "/node/" },
            { text: "前端", 
              items: [ 
                { text: "html", link:"/web/html/"},
                { text: "css", link:"/web/css/"},
                ]
            },
            { text: "数据库", link: "/database/"   },
            { text: "android", link: "/android/"   },
            { text: "面试问题", link: "/interview/" }
          ],
      }
}

四、部署

在项目根目录下创建 deploy.sh

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm 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
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:aaaa/vBlog.git master:gh-pages
cd -

然后在package.json中添加

"scripts": {
    "deploy": "bash deploy.sh",
  },

此时注意报错信息，可能未设置sshKey

五、总结

实际上VuePress的配置、用法还有很多，可以在markdown里面使用Vue组件等，有些功能我也在尝试过程中，建议大家一定要去看相关文档!

上面我讲述了基本搭建，之后就可以拥有自己的博客了，心动不如行动，大家快快去搭建自己的博客吧！！

vuePress 自定义博客--基本环境搭建