通过Vuepress部署静态博客

2024年3月23日约 1396 字

前置知识：最好知道前端工程vite脚手架怎么用，也知道dev、build、deploy这些命令的含义。

介绍和环境准备

这个博客用的就是Vuepress，并且用了hope主题，对于仅仅是想好好写博客，不想折腾后端的人，已经够用了。这篇文章介绍整个Vuepress-hope部署的过程、使用方法以及使用过程中的一些小技巧。

这里我所有的操作都使用Windows11，Node.js用的18版本，node是需要下载和配置的。

构建工程文件

进入cmd命令行，输入create-vuepress-theme-hope <文件夹名>，这个<文件夹名>随机写，之后构建出的工程文件夹会使用这个名字，构建过程中的各个选项可以参考下面这张图，只有应用名称和应用描述需要改

构建完成后它会问你要不要看demo，可以输入y+回车看一下，也可以在命令行中输入npm rum docs:dev，然后访问localhost:8080来验证是否成功构建。

注

也可以去看看官方文档：安装/使用 | vuepress-theme-hope

简单使用

1. 工程文件目录介绍

src——存放个人md文件和vuepress组件，其中还包括：
- .vuepress/config.js——vuepress的配置文件
- .vuepress/theme.js——主题的配置文件
- .vuepress/public——静态资源
- .vuepress/sytles——自己的CSS样式
demo和posts——存放自己的博客文章，文件使用md格式
node_modules——nodejs模组
package-lock.json——npm 在安装包时自动生成的一个文件，用于锁定安装时的确切版本号，以确保在不同开发环境下安装的包的版本一致性。（相当于Maven）
package.json——是npm（Node Package Manager）项目的配置文件，用于记录项目的元数据信息和依赖项

其中重点关注.vuepress/theme.js和posts，theme.js里存放Vuepress hope主题打的配置，很多重要的设置是在这里做的；而demo、posts里面存放的文章是会在博客侧边栏中显示的，当然也可以在src目录下创建新的文件夹，也会自动显示。

2. 测试——在demo文件夹下新创一篇文章

先来测试Vuepress-hope中自动构建页面的功能，在posts文件夹下创建新的md文件，输入以下内容：

---
order: 1
title: 第一次使用Vuepress-hope
icon: pen-to-square
date: 2024-01-01
---

这里输入主要内容，上面的是front matter脚注，用于定义该文章的一些基本信息
其中order表示该文章在侧边栏中顺序，title就是文章的标题，icon表示文章在侧边栏中显示的前缀图像，date就是编写日期

打开命令行，输入npm rum docs:dev，访问localhost:8080，在侧边栏中找到文章，发现会自动包含刚创建的md文件

posts文件夹里一般就是存放自己写的博客文章，可以像Vuepress原生demo演示的那样，在posts文件夹中创建子文件夹，这样可以更加细分文章。

主题配置案例——增加GFM警告语法

GFM警告是比较常用的，刚好需要在theme.js文件配置才能使用，所以使用这个案例来讲讲怎么进行主题配置

1. GFM的展示效果和语法

GFM警告效果就是这样：

常用语法：

> [!important]
> [!info]
> [!tip]
> [!warning]
> [!caution]
> [!note]

2. 配置方法

找到src/.vuepress/theme.ts这个配置文件，找到markdown配置，然后在括号里面找个地方手动添加alert: true,

警告

这里有坑！官方文档写的好像不太对，而且你可能看到上图中有个配置项是gfm: true，很具有迷惑性，但它不是那些多彩气泡的配置。

3. 测试

在之前创建的那个md文件中添加以下内容：

> [!important]
> 1

> [!info]
> 2

> [!tip]
> 3

> [!warning]
> 4

> [!caution]
> 5

> [!note]
> 6

4. 其他主题配置

可以去看官方文档，了解更多主题配置，但是我说实话配置个GFM差不多够了，另外还需要备案的页脚配置，我这里先给个例子，后面有时间详细说一下怎么备案，以及怎么把备案图标放到静态博客里。

// 页脚
footer: "  <div style=\"display: flex; align-items: center;\">\n" +
    "    <img src=\"/备案图标.png\" style=\"width: 16px\" alt=\"\">\n" +
    "    <a href=\"https://beian.mps.gov.cn/#/query/webSearch?code=34182102000329\" rel=\"noreferrer\" target=\"_blank\" style=\"display: inline-block; vertical-align: middle;\">皖公网安备34182102000329</a>\n" +
    "    &nbsp;&nbsp;\n" +
    "    <a target=\"_blank\" href=\"https://beian.miit.gov.cn/#/Integrated/index\">皖ICP备2024069585号</a>\n" +
    "  </div>",
displayFooter: true,

侧边栏和导航栏配置

两者的配置文件分别位于\src\.vuepress\sidebar.ts和\src\.vuepress\navbar.ts

1. 配置侧边栏——隐藏demo、介绍页和幻灯片

直接注释掉就好

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://ecosystem.vuejs.press/zh/plugins/markdown/revealjs/demo.html",
    // },
  ],
});

2. 配置导航栏——仅做介绍

这里的配置非常简单，仅仅是看Vuepress-hope自带的例子很容易就能明白，不过要注意的是link和prefix不要连用，prefix要和children连着用，一层层指向特定的md文章，base目录是\src。