vuepress搭建个人博客以及部署

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

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

yarn create vuepress-theme-hope my-docs

这里记录几个关键点

一、目录结构

vuepress搭建个人博客以及部署_第1张图片
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就可以看到效果了

vuepress搭建个人博客以及部署_第2张图片
接下来就在.md编辑自己想要写的文章
1、src目录下新建一个文件夹,自己规划一下文件名称,我这里取名node,主要存放node相关文档
vuepress搭建个人博客以及部署_第3张图片
vuepress搭建个人博客以及部署_第4张图片
vuepress搭建个人博客以及部署_第5张图片

保存渲染之后就是现在这样
接下来就是打包部署npm run docs:build
tips:打包根目录在config.js里面进行配置
如果直接域名访问base: “/”
如果不是,这个地址需要对应,比如base: "/docs/"对应的是http://www.niech.cn/docs/

如果想要部署到gitee或者github
新建一个仓库后选择服务,里面有类似page文档的功能,按照步骤创建,最后启动就完成了。
云风的知识库

你可能感兴趣的:(个人开发网站搭建,前端,express,个人开发)