基于VuePress+gitee搭建个人博客

搭建步骤

  • 步骤 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 可以被放置在公共文件目录：

// .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 服务），用于存放我们的博客系统。

    图1

    仓库创建成功后如下图

    图2

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

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

      pnpm run docs:build

      图3

    • 我们可以参考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"

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

      图4

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

      图5

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

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

      图6

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

      图7

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

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

      图8

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

      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上去。最终效果如下

posted @ 2023-07-16 22:38  柳小白  阅读(298)  评论(0)  编辑  收藏  举报