基于VuePress搭建一个简单的个人博客

我的个人博客： orbisz-Blog

源码：orbisz/my-blog: 个人博客系统

使用的主题是vuepress-theme-reco@2.x，并基于该主题进行了一些调整。

Git安装教程

Git Bash是git(版本管理器)中提供的一个命令行工具，外观类似于Windows系统内置的cmd命令行工具。可以将Git Bash看作是一个终端模拟器，它提供了类似于Linux和Unix系统下Bash Shell环境的功能。通过Git Bash，用户可以在Windows系统中运行基于Bash的命令行，使用一些常见的Linux命令以及Git命令。

下载地址

开始安装，按照默认选项，一路next就可以了。

安装完成后，在任意文件夹右键打开git bash，或者搜索栏搜索git bash

首先介绍VuePress的使用

基础博客

使用VuePress简单搭建，原生主题：

VuePress初步搭建

创建并进入一个新目录

mkdir blog
cd blog

使用包处理器进行初始化

npm init -y

安装VuePress本地依赖

 npm install -D vuepress

创建文档，随便初始化文档内容

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

注意 README.md 的编码格式必须是UTF-8，不然会显示乱码。

在 package.json 中添加一些 scripts指令

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

启动本地服务器

npm run dev

先在docs目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。
再在 .vuepress 文件夹下添加 config.js文件，它用于配置网站的标题和描述。
现在的项目结构如下：

在config.js中添加顶部导航栏和侧边栏配置：

module.exports = {
  // 添加标题和描述
  title: "MY BLOG",
  description: "description of my blog",
  themeConfig: {
    // 顶部导航栏
    nav: [
      { text: "首页", link: "/" },
      { text: "CSDN", link: "" },
      { text: "Github", link: "" },
    ],
    // 侧边栏
    sidebar: [
      {
        title: '分类1',   // 必要的
        path: '/categroy1/',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
        collapsable: false,// 是否可折叠，默认为true
        sidebarDepth: 1,    // 可选的, 默认值是 1
        children: [
         {
          title: '分类1-1',   // 必要的
          path: '/categroy1/one',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
        
         },
         {
          title: '分类1-2',   // 必要的
          path: '/categroy1/two',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
        
         }
        ]
      },
      {
        title: '分类2',  
        path: '/categroy2/',    
        collapsable: true, 
        children: [
         {
          title: '分类2-1',  
          path: '/categroy2/one',     
        
         },
         {
          title: '分类2-2',  
          path: '/categroy2/two',   
         }
        ]
      }
    ]
  },
}; 

文档结构如下

博客页面如下

博客主页如下

VuePress 遵循 “约定优于配置” 的原则，静态资源图片存放在 .vuepress 文件夹下的 public 文件夹中。

更多其他设置，可以查看VuePress官网：首页 | VuePress

主题博客

可以从VuePress的热门主题中选择适合自己的主题：

首页 | VuePress 生态系统
我这里使用的是 vuepress-theme-reco@2.x 主题风格：
🔍vuepress-theme-reco@2.x文档

使用主题时，注意必须按照该文档进行配置。

使用 vuepress-reco模板初始化

npm install @vuepress-reco/theme-cli@1.0.7 -g
theme-cli init

选择2.x版本的。

运行

npm run dev

在该主题按自己的喜好进行修改：

将博客部署到github pages上：使用github pages部署vuepress搭建的博客 | orbisz-Blog