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",
// },
],
});
配置完npm run docs:dev就可以看到效果了
接下来就在.md编辑自己想要写的文章
1、src目录下新建一个文件夹，自己规划一下文件名称，我这里取名node,主要存放node相关文档
保存渲染之后就是现在这样
接下来就是打包部署npm run docs:build
tips:打包根目录在config.js里面进行配置
如果直接域名访问base: “/”
如果不是，这个地址需要对应，比如base: "/docs/"对应的是http://www.niech.cn/docs/
如果想要部署到gitee或者github
新建一个仓库后选择服务，里面有类似page文档的功能，按照步骤创建，最后启动就完成了。
云风的知识库