搭建步骤

• 步骤 1: 创建并进入一个新目录

mkdir my-blog
cd my-blog

• 步骤 2: 初始化项目

git init
pnpm init

• 步骤 3: 将 VuePress 安装为本地依赖

pnpm add -D vuepress@next @vuepress/client@next vue

• 步骤 4: 在 package.json 中添加一些 scripts在新窗口打开

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

• 步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

• 步骤 6: 创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

• 步骤 7: 在本地启动服务器来开发你的文档网站

pnpm docs:dev

VuePress 会在 http://localhost:8080在新窗口打开 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

目录结构

.
├── docs
│   ├── .vuepress (可选,用于存放全局的配置、组件、静态资源等)
│   │   ├── components (可选,该目录中的 Vue 组件将会被自动注册为全局组件)
│   │   ├── theme (可选,用于存放本地主题)
│   │   │   └── Layout.vue
│   │   ├── public (存放一些公共样式，比如网站图标和头像，当然，也可以直接将图片放入图床)
|   |   ├── dist(这里存放打包好的文件，最后我们将打包好的文件上传到服务器就行)
│   │   ├── styles (这里放一些自定义样式，在这里我们可以修改主题色)
│   │   │   ├── index.styl(将会被自动应用的全局样式文件，会生成在最终的CSS文件结尾，具有比默认样式更高的优先级)
│   │   │   └── palette.styl (用于重写默认颜色常量，或者设置新的 stylus 颜色常量)
│   │   ├── templates (可选的, 谨慎配置, 存储 HTML 模板文件)
│   │   │   ├── dev.html（用于开发环境的 HTML 模板文件）
│   │   │   └── ssr.html（构建时基于 Vue SSR 的 HTML 模板文件）
│   │   ├── config.js (这里是博客的一些配置，导航栏、侧边栏、下载的插件都在这里配置)
│   │   └── enhanceApp.js (可选，客户端应用的增强)
|   ├── about(一个存放自己博客的文件夹，我们可以将不同的文章设置不同的文件夹进行分类)
|   |   ├── README.md(每个文件夹都要有一个README.md文件，否则导航栏配置不生效)
|   |   ├── 文章一.md
|   |   ├── 文章二.md
|   ├── javaScript(同上)
|   |   ├── README.md
│   └── README.md(这个md文档是首页的配置)
│ 
└── package.json（项目初始化时，根目录下自动生成的配置文件,定义了项目的基本配置信息及需要依赖的各个模块、指定运行脚本命令的npm命令行缩写等）

总结：

• 我们的配置都在 .vuepress文件夹下进行，只有首页的README.md与 .vuepress文件夹同级

• .vuepress文件夹下 config.js 是主要的配置

• 我们自己的文章目录与 .vuepress文件夹同级

• 每个文章的文件夹下都要有一份 README.md文件，否则导航栏配置不生效

首页

默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。想要使用它，需要在你的根级 README.md 的 YAML front matter 指定 home: true。首页文档参考，以下是一个如何使用的例子：

---
home: true
heroText: 一个小白分享各类资源的地方
tagline: 公众号：柳小白
actions:
  - text: 快速上手
    link: /catalog1/README1.md
    type: primary
  - text: 项目简介
    link: /catalog2/
    type: secondary
features:
  - title: 个人介绍
    details: 详情待确定中
  - title: 学习笔记
    details: 详情待确定中
  - title: 技术博客
    details: 详情待确定中
footer:  初入小白 | 还望各位大佬不吝赐教
---

你可以将相应的内容设置为 null 来禁用标题和副标题。

任何 YAML front matter 之后额外的内容将会以普通的 markdown 被渲染，并插入到 features 的后面。

导航栏Title

export default {
  title:"柳小白",
}

导航栏Logo

你可以配置默认主题模式，增加导航栏 Logo ，Logo 可以被放置在公共文件目录：

// .vuepress/config.js
import { defaultTheme } from 'vuepress'
export default {
  theme: defaultTheme({
    // Public 文件路径
    logo: '/images/hero.png',
    // URL
    logo: 'https://vuejs.org/images/logo.png',
  }),
}

导航栏配置

为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 NavbarItem 对象、 NavbarGroup 对象、或者字符串：

• NavbarItem 对象应该有一个 text 字段和一个 link 字段，还有一个可选的 activeMatch 字段。
• NavbarGroup 对象应该有一个 text 字段和一个 children 字段。 children 字段同样是一个 导航栏数组 。
• 字符串应为目标页面文件的路径。它将会被转换为 NavbarItem 对象，将页面标题作为 text ，将页面路由路径作为 link 。

export default {
  theme: defaultTheme({
    navbar: [
      // NavbarItem
      {
        text: 'Foo',
        link: '/foo/',
      },
      // NavbarGroup
      {
        text: 'Group',
        children: ['/group/foo.md', '/group/bar.md'],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
  }),
}

export default {
  theme: defaultTheme({
    navbar: [
      // 嵌套 Group - 最大深度为 2
      {
        text: 'Group',
        children: [
          {
            text: 'SubGroup',
            children: ['/group/sub/foo.md', '/group/sub/bar.md'],
          },
        ],
      },
      // 控制元素何时被激活
      {
        text: 'Group 2',
        children: [
          {
            text: 'Always active',
            link: '/',
            // 该元素将一直处于激活状态
            activeMatch: '/',
          },
          {
            text: 'Active on /foo/',
            link: '/not-foo/',
            // 该元素在当前路由路径是 /foo/ 开头时激活
            // 支持正则表达式
            activeMatch: '^/foo/',
          },
        ],
      },
    ],
  }),
}

侧边栏配置

• 你可以通过页面的 sidebar frontmatter 来覆盖这个全局配置。

  设置为 false 可以禁用侧边栏。

  如果你设置为 'auto'，侧边栏会根据页面标题自动生成。

  为了手动配置侧边栏元素，你可以将其设置为 侧边栏数组 ，其中的每个元素是一个 SidebarItem 对象或者一个字符串：

  • SidebarItem 对象应该有一个 text 字段，有一个可选的 link 字段、一个可选的 children 字段和一个可选的 collapsible 字段。 children 字段同样是一个 侧边栏数组 。 collapsible 字段来控制它是否可折叠。
  • 字符串应为目标页面文件的路径。它将会被转换为 SidebarItem 对象，将页面标题作为 text ，将页面路由路径作为 link ，并根据页面小标题自动生成 children 。

  如果你想在不同子路径中使用不同的侧边栏，你可以将该配置项设置为 侧边栏对象 ：

  • Key 为路径前缀。
  • Value 为 侧边栏数组 。

// .vuepress/config.js
export default {
  theme: defaultTheme({
    // 侧边栏数组
    // 所有页面会使用相同的侧边栏
    sidebar: [
      // SidebarItem
      {
        text: 'Foo',
        link: '/foo/',
        children: [
          // SidebarItem
          {
            text: 'github',
            link: 'https://github.com',
            children: [],
          },
          // 字符串 - 页面文件路径
          '/foo/bar.md',
        ],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
  }),
}

【不同子路径下的页面会使用不同的侧边栏】这种方式最常用

// .vuepress/config.js
export default {
  theme: defaultTheme({
    // 侧边栏对象
    // 不同子路径下的页面会使用不同的侧边栏
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          children: ['/guide/README.md', '/guide/getting-started.md'],
        },
      ],
      '/reference/': [
        {
          text: 'Reference',
          children: ['/reference/cli.md', '/reference/config.md'],
        },
      ],
    },
  }),
}

// .vuepress/config.js
export default {
  theme: defaultTheme({
    // 可折叠的侧边栏
    sidebar: {
      '/reference/': [
        {
          text: 'VuePress Reference',
          collapsible: true,
          children: ['/reference/cli.md', '/reference/config.md'],
        },
        {
          text: 'Bundlers Reference',
          collapsible: true,
          children: ['/reference/bundler/vite.md', '/reference/bundler/webpack.md'],
        },
      ],
    },
  }),
}

内容搜索

参考文档

部署到gitee

1. 在gitee上面我们新建一个仓库（目前仅支持公开仓库开通Gitee Pages 服务），用于存放我们的博客系统。

   

   仓库创建成功后如下图

   

2. 仓库建好后，就需要将我们本地的博客系统推送至仓库。

   • 进入blog目录，打开打开gitbash命令行工具，打包博客，执行命令：

     pnpm run docs:build

     

   • 我们可以参考gitee仓库给我们的步骤操作，将代码推送到仓库。

     # 逐行执行下列命令
     cd my-blog
     git add .
     git commit -m "初始化"
     git remote add origin https://gitee.com/bigfairy/my-blog.git
     git push -u origin "master"
     

   • 执行完上面的命令后，我们的代码就推到了仓库中去

     

   • 在仓库页面点击服务菜单，选择gitpage选项

     

   • 选择部署分支和部署目录，然后点击启动

     • 部署分支，不用改，默认master
     • 部署目录，选择docs/.vuepress/dist文件夹，刚刚我们执行打包命令生成的。

     

   • 部署好后就会出现一个我们的博客地址了

     

     如果期望地址不展示仓库名，新建仓库名保持个人空间地址一样即可。

     打开之后可能无法读取到静态资源，如下

     

     解决办法，配置部署站点的基础路径，如下:

     1. Gitee Pages网站地址是https://gitee.com/用户名/仓库名称.git

     2. 我的gitee仓库名是my-blog，路径：docs/.vuepress/，修改config.js配置文件在export default中添加base: '/my-blog/'。

     

     然后重新构建pnpm run docs:build，推送到gitee部署到gitee pages上去。

本栏目推荐文章
• 笑死~我的博客美化脚本分享
• 个人职业生涯规划
• [Python学习记]个人感受(持续更新）
• 个人博客详细设计说明书
• Blazor Wasm Gitee 码云登录
• 我的 .NET/C# 开源项目清单，同步维护于 Github 和 Gitee
• 个人的vscode配置调优
• PowerDotNet平台化软件架构设计与实现系列（17）：PCRM个人用户管理平台
• 第一篇博客————Markdown语法
• vuepress借助jenkins和svn实现文档自动化更新部署

VuePress gitee 个人 博客vuepress gitee个人 博客 静态vuepress博客 vuepress github pages博客 地址gitee个人 问题gitee博客hexo vuepress vercel博客 网站 说明书 个人 博客 github个人 博客hugo scrum个人 博客2023 github个人 博客hexo