vuepress搭建个人博客以及部署-编程知识

vuepress，Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
vuepress官网
vuepress存在很多主题，也可以自定义设计主题，上传npm使用
这里采用vuepress-theme-hope主题模板进行制作
vuepress-theme-hope

创建项目命令yarn/npm/pnpm都可以

yarn create vuepress-theme-hope my-docs

这里记录几个关键点

一、目录结构

在这里插入图片描述
src/.vuepress: 用于存放全局的配置、组件、静态资源等。
src/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
src/.vuepress/theme: 用于存放本地主题。
src/.vuepress/styles: 用于存放样式相关的文件。
src/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
src/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
src/.vuepress/public: 静态资源目录。
src/.vuepress/templates: 存储 HTML 模板文件。
src/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
src/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
src/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
src/.vuepress/enhanceApp.js: 客户端应用的增强。
以上就是基础的文件结构

二、重点文件分析

配置文件config.js

import { defineUserConfig } from "vuepress";
import theme from "./theme.js";export default defineUserConfig({base: "/docs/",lang: "zh-CN",title: "云风网",description: "云风的知识库",theme,// 和 PWA 一起启用// shouldPrefetch: false,
});

导航栏配置navbar.js

import { navbar } from "vuepress-theme-hope";export default navbar(["/",{text: "node案例",icon: "pen-to-square",prefix: "/node/",children: ["webBuild",],},// "/node/",{text: "云风网",icon: "book",link: "http://www.niech.cn/",},{text: "CSDN",icon: "book",link: "https://blog.csdn.net/qq_43206280/",}
]);

主题配置theme.js

import { hopeTheme } from "vuepress-theme-hope";
import navbar from "./navbar.js";
import sidebar from "./sidebar.js";
import { MR_HOPE_AVATAR } from "./logo.js";export default hopeTheme({hostname: "https://mister-hope.github.io",author: {name: "Niech",url: "http://www.niech.cn",},iconAssets: "fontawesome-with-brands",logo: "/logo.png",repo: "vuepress-theme-hope/vuepress-theme-hope",docsDir: "src",// 导航栏navbar,// 侧边栏sidebar,// 页脚footer: "默认页脚",displayFooter: true,// 博客相关blog: {description: "一个前端开发者",intro: "/intro.html",medias: {GitHub: "https://github.com/nch1994/",Gitee: "https://gitee.com/niech_project"},},// 加密配置encrypt: {config: {"/demo/encrypt.html": ["1234"],},},// 多语言配置metaLocales: {editLink: "",},// 如果想要实时查看任何改变，启用它。注: 这对更新性能有很大负面影响// hotReload: true,// 在这里配置主题提供的插件plugins: {blog: true,search: true,// 在启用之前需要安装 @waline/client// 警告: 这是一个仅供演示的测试服务器，在生产环境中请自行部署并使用自己的服务器！// comment: {//   provider: "Waline",//   serverURL: "https://waline-comment.vuejs.press",// },components: {components: ["Badge", "VPCard"],},// 此处开启了很多功能用于演示，你应仅保留用到的功能。mdEnhance: {align: true,attrs: true,codetabs: true,component: true,demo: true,figure: true,imgLazyload: true,imgSize: true,include: true,mark: true,stylize: [{matcher: "Recommended",replacer: ({ tag }) => {if (tag === "em")return {tag: "Badge",attrs: { type: "tip" },content: "Recommended",};},},],sub: true,sup: true,tabs: true,vPre: true,search: true,copyCode:{},// 在启用之前安装 chart.js// chart: true,// insert component easily// 在启用之前安装 echarts// echarts: true,// 在启用之前安装 flowchart.ts// flowchart: true,// gfm requires mathjax-full to provide tex support// gfm: true,// 在启用之前安装 katex// katex: true,// 在启用之前安装 mathjax-full// mathjax: true,// 在启用之前安装 mermaid// mermaid: true,// playground: {//   presets: ["ts", "vue"],// },// 在启用之前安装 reveal.js// revealJs: {//   plugins: ["highlight", "math", "search", "notes", "zoom"],// },// 在启用之前安装 @vue/repl// vuePlayground: true,// install sandpack-vue3 before enabling it// sandpack: true,},// 如果你需要 PWA。安装 vuepress-plugin-pwa2 并取消下方注释// pwa: {//   favicon: "/favicon.ico",//   cacheHTML: true,//   cachePic: true,//   appendBase: true,//   apple: {//     icon: "/assets/icon/apple-icon-152.png",//     statusBarColor: "black",//   },//   msTile: {//     image: "/assets/icon/ms-icon-144.png",//     color: "#ffffff",//   },//   manifest: {//     icons: [//       {//         src: "/assets/icon/chrome-mask-512.png",//         sizes: "512x512",//         purpose: "maskable",//         type: "image/png",//       },//       {//         src: "/assets/icon/chrome-mask-192.png",//         sizes: "192x192",//         purpose: "maskable",//         type: "image/png",//       },//       {//         src: "/assets/icon/chrome-512.png",//         sizes: "512x512",//         type: "image/png",//       },//       {//         src: "/assets/icon/chrome-192.png",//         sizes: "192x192",//         type: "image/png",//       },//     ],//     shortcuts: [//       {//         name: "Demo",//         short_name: "Demo",//         url: "/demo/",//         icons: [//           {//             src: "/assets/icon/guide-maskable.png",//             sizes: "192x192",//             purpose: "maskable",//             type: "image/png",//           },//         ],//       },//     ],//   },// },},
});

公共侧边栏配置sidebar.js

import { sidebar } from "vuepress-theme-hope";export default sidebar({"/": [// "",// {//   text: "如何使用",//   icon: "laptop-code",//   prefix: "demo/",//   link: "demo/",//   children: "structure",// },// {//   text: "文章",//   icon: "book",//   prefix: "posts/",//   children: "structure",// },// "intro",// {//   text: "幻灯片",//   icon: "person-chalkboard",//   link: "https://plugin-md-enhance.vuejs.press/zh/guide/content/revealjs/demo.html",// },],
});