VuePress 制造个人文档网站

作者：Ezreal

背景

VuePress 是一个根据 Vue 的静态网站生成器，它能够将咱们编写好的 MarkDown 文件主动解析为 HTML 文件，它有以下几个特点：

  • 简练：以 Markdown 为中心的项目结构，以最少的装备协助你专心于写作。
  • Vue 驱动：享用 Vue + webpack 的开发体验，能够在 Markdown 中运用 Vue 组件，又能够运用 Vue 来开发自定义主题。
  • 高性能：VuePress 会为每个页面预烘托生成静态的 HTML，一起，每个页面被加载的时分，将作为 SPA 运转。

下面带咱们一起建立根据 VuePress 的个人文档网站。

建立过程

1. 建立 VuePress 环境

依据官网的快速上手进行操作，以下步骤与官网的操作有所区别：

创立文件目录

mkdir ezreal-code-doc && cd ezreal-code-doc
  • 自己在某个文件夹下创立指定目录 ezreal-code-doc 即可；

包管理器初始化

yarn init
  • 这儿默许运用 yarn 作为包管理器；

装置 VuePress 为本地依靠

yarn add -D vuepress

在 package.json 中增加 scripts

node 版别在 17 以下的履行脚本：

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

出现这个过错是因为 node.js V17版别中最近发布的OpenSSL3.0, 而OpenSSL3.0对答应算法和密钥巨细增加了严格的约束，或许会对生态系统造成一些影响；

在node.js V17曾经一些能够正常运转的的应用程序,但是在 V17 版别或许会抛出这个反常

node 版别在 17 及以上的履行脚本：

{
 "scripts": {
  "docs:dev": "set NODE_OPTIONS=--openssl-legacy-provider & vuepress devd .",
  "docs:build": "set NODE_OPTIONS=--openssl-legacy-provider & vuepress build .",
  "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
  "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  }
}

启动服务器

yarn docs:dev

我这儿供给了项目模板，咱们能够去下载运用：github.com/EzreaLwj/ez…

2. 建立目录结构

官网的目录结构是在把一切的文件都存储在 docs 目录下，但是下面的文件直接存储在项目的根目录下。

2.1 创立装备目录

.vuepress 下的文件是整个文档网站的装备文件

VuePress 制造个人文档网站

  • public：存储静态资源文件：网站图片，logo 等；
  • templates：存储 HTML 模板文件；
  • config.ts：是大局的装备文件，能够装备侧边栏，导航栏，网站介绍（head 标签和 meta 标签）；
  • dist：是项目打包后的文件；

其中 config.ts 的文件根本结构如下：

import sidebar from "./sidebar";
import navbar from "./navbar";
​
module.exports = {
  title: "是时分表演真实的技能了",
  base: '/', // 运用相对途径，读取相对途径下的静态文件
  head: [
     ['link', {rel: 'icon', href: '/logo.png'}],
     [
      "meta",
       {
        name: "keywords",
        content:
          "Ezreal, 编程学习路线, 编程知识百科, Java, 编程导航, 前端, 开发, 编程共享, 项目, IT, 求职, 面经",
       },
     ],
   ],
  extraWatchFiles: [".vuepress/*.ts", ".vuepress/sidebars/*.ts"], // 热更新
  themeConfig: {
    nav: navbar,
    logo: '/logo.png',
    lastUpdated: 'Last Updated', // string | boolean
    sidebar: sidebar
   }
}
​

2.2 创立文档目录

VuePress 制造个人文档网站

  • 在项目的根目录下创立 共享文章 的目录；

每一个项目的目录都对应一个路由：

文件的相对途径 页面路由地址
/README.md /
/共享文章/README.md /共享文章/
/共享文章/个人经历/README.md /共享文章/个人经历/
/共享文章/个人经历/2023年度总结.md /共享文章/个人经历/2023年度总结.html
  • 每一个 README.md 文件在页面路由地址上对应其文件夹的途径；
  • 除了 README.md 之外的文件的文件相对途径在页面路由地址上是对应其转化后的 HTML 文件；
  • 如果有多层目录，则页面的路由地址也会有多层途径，如表格上的第四行；

3. 导航栏装备

在 config.ts 下，咱们能够对导航栏进行装备，其对应的 key 为 nav：

module.exports = {
  themeConfig: {
    nav: navbar,
    logo: '/logo.png',
    lastUpdated: 'Last Updated', // string | boolean
    sidebar: sidebar
   }
}
​
  • 这儿咱们自己写了一个 navbar 的组件，接纳的是一个数组类型；

navbar.ts：

export default [
    {text: '共享文章', link: '/共享文章/'},
]
  • text 是导航栏名称，link 是链接地址，其链接为/共享文章/对应的文件为 /共享文章/README.md

作用如下：

VuePress 制造个人文档网站

4. 侧边栏装备

在 config.ts 下，咱们能够对侧边栏进行装备，其对应的 key 为 sidebar

module.exports = {
    themeConfig: {
        nav: navbar,
        logo: '/logo.png',
        lastUpdated: 'Last Updated', // string | boolean
        sidebar: sidebar
    }
}
  • 这儿咱们自定义了一个 sidebar 组件，接纳的是一个目标类型；

sidebar.ts

import {SidebarConfig4Multiple} from "vuepress/config";
import shareSideBar from "./sidebars/shareSideBar";
// @ts-ignore
export default {
    "/共享文章/": shareSideBar,
    // 降级，默许依据文章标题烘托侧边栏
    "/": "auto",
} as SidebarConfig4Multiple;
  • key 为 /共享文章/，值为 shareSideBar，表明当咱们的 URL 途径为 /剖析文章/ 时，即烘托 /剖析文章/README.md 文件时，会在侧边栏烘托咱们在 shareSideBar 组件装备的信息；

shareSideBar.ts

export default [
    "",
    {
        title: "个人经历",
        collapsable: true,
        children: [
            '/共享文章/个人经历/2023年度总结'
        ],
    },
    {
        title: "技能共享",
        collapsable: true,
        children: [
            '/共享文章/技能共享/根据MySQL与Redis扣减库存的方式.md',
            '/共享文章/技能共享/git 常见指令以及常见问题.md',
            '/共享文章/技能共享/常见接口限流方法.md',
        ],
    },
    {
        title: "问题排查",
        collapsable: true,
        children: [
            '/共享文章/问题排查/记一次内存溢出问题解决.md',
        ],
    }
]
  • shareSideBar 是一个数组类型，title 表明某个侧边栏的名称，children 下面就表明咱们需求显现的文章；

作用如下：

VuePress 制造个人文档网站

项目布置

腾讯云开发 CloudBase

咱们根据腾讯云开发 CloudBase 进行布置，云开发是一个云原生的 Serverless 云平台，支撑静态网站，容器等多种托管能力，并供给简洁的布置东西 CloudBase Framework 进行一键布置。

VuePress 制造个人文档网站

  • 首要咱们需求购买一套资源，个人版就合适；

在项目根目录装置 CloudBase CLI

npm install -D @cloudbase/cli

初始化应用

cloudbase init
  • 这儿需求挑选咱们刚刚购买的资源；

布置 VuePress 应用

cloudbase framework deploy
  • 这儿需求填写咱们的项目根目录的名称，打包指令，打包后的文件位置（.vuepress/dist）；
  • 在最后会显现一个可访问的 URL 途径，表明项目已经布置完成；

参考地址：github.com/Tencent/clo…