基础教程 | 用VuePress搭建一个简单的个人博客（附源码）

先附上自己个人博客页面：https://illusionno.github.io/
源码也在这里：https://github.com/illusionno/my-blog （如果觉得有帮助，可以点颗star✨）
使用的主题是vuepress-theme-reco@2.x，并在上面进行了一些调整。

💬注：美化版博客在blog目录下，基础版博客在simple-blog目录下！！

这里先介绍VuePress的基础使用，也就是目前大多数文档的那种简约风主题。

1. 基础版博客

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

1.1 VuePress初步搭建

1.创建并进入一个新目录

mkdir my-blogs
cd my-blogs

2.使用你喜欢的包管理器进行初始化

npm init -y

3.将 VuePress 安装为本地依赖

 npm install -D vuepress

4.创建文档，并先随便写些内容

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

注意：使用命令行写入内容时，README.md的编码格式如下，不然页面会乱码显示

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

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

6.启动本地服务器

npm run docs:dev

1.2 基本配置

先在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',   
         }
        ]
      }
    ]
  },
}; 

文档结构如下：

1.3 主页配置

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

主页README,md配置如下：

---
home: true
heroImage: /avatar.jpg
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /category1/
features:
- title: 简洁至上 
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: Copyright © 2018-present baitao
---

1.4 favicon图标自定义

将图片先转成favicon.ico格式：🔍在线制作ico图标

将图片放在 public 目录下：

在 config.js中添加以下配置，设置favicon.ico的路径。

  head: [
    [
      'link',{ rel: 'icon', href: '/favicon.ico' }
    ]
  ],

更多其他设置，可以查看VuePress官网：https://vuepress.vuejs.org/zh/

2. 美化版博客

目前VuePress的热门主题有如下几个：

可以选择一个自己喜欢的风格：https://ecosystem.vuejs.press/zh/
我这里使用的是 vuepress-theme-reco@2.x 主题风格，
🔍vuepress-theme-reco@2.x文档

在使用该主题时，需要注意不可参照方默认主题文档来配置，必须按照该文档进行配置。

使用 vuepress-reco模板快速开始:

npx @vuepress-reco/theme-cli init

根据提示进行选择，哪一个模板其实都可以，不过主页会有些区别。可以直接选择2.x，风格会好看些。

运行：npm run dev

再在上面进行魔改一顿：

（光标可以悬浮在头像上看看👀）