利用VitePress+GitHub Pages创建简易博客VitePress简介从 VuePress 改进的地方有

VitePress简介

VitePress 是 VuePress 小兄弟, 基于 Vite构建。我们喜爱VuePress，但是它是基于 Webpack 构建。为了一个只有几个简单页面的简单文档站点启动开发服务器所需的时间正变得让人难以忍受。即使是HMR热更新也需要几秒钟的时间才能在浏览器中显示出来。

从 VuePress 改进的地方有以下几点：

开发服务器启动更快
热更新更快
构建更快(内部使用 Rollup)

部署步骤

新建项目文件夹，在项目文件夹运行 cmd运行npm init初始化package.json
继续运行npm i -D vitepress安装VitePress

在package.json中添加脚本

"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }

运行 npm run docs:dev

打开local，会看到404，因为并未找到主页

接下来新建首页页面：在docs文件根目录下创建 index.md

markdown

---
layout: home

hero:
  name: 失望的石榴    # 标题
  text: 码字的小地方    # 副标题
  tagline: 🖖🖖🖖🖖🖖 # 标语
  image:
    src: /logo.png
    alt: logo图片
  actions:
    - theme: brand
      text: 快速开始
      link: /guide/what-is-vitepress
    - theme: alt
      text: 在 github 上查看
      link: https://github.com/wyy1300149192
features:
  - icon: ⚡️
    title: 高效学习，更快掌握
    details: 追求更好的学习方法，事半功倍
  - icon: 🖖
    title: 码字记录，温故而知新
    details: 时常记录与总结，加深理解、方便回顾
  - icon: 🛠️
    title: 多多实践，积累经验
    details: 实践非常重要，多做案例理解知识
---

页面预览：

页面路径规则，vitepress页面根路径为docs文件夹

如/knowledge/Css则文件路径：

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
|  ├─ knowledge
|  |  └─ Css.md
│  └─ index.md
└─ package.json

在 docs/.vitepress/路径下创建config.js配置文件，设置整个网站的配置

module.exports = {
    // 网站标题
    title: '失望的石榴',
    // 网站描述
    description: 'God help those who help themselves.',
    // 根地址 静态资源根地址
    base: '/blog/',
    head: [
        // 网站图标
        ['link', { rel: 'icon', href: '/favicon.ico' }]
    ],
    // 主题
    themeConfig: {
        nav: [
            { text: '知识', link: '/knowledge/Css' },
            { text: '生活', link: '/life/travel' },
            { text: '记录', link: '/rec/vitepress' },
        ],
        sidebar: { // 侧边栏，可以分组
            "/knowledge/": [
                {
                    text: "前端知识",
                    items: [
                        {
                            text: "Css",
                            link: "/knowledge/Css",
                        },
                        {
                            text: "Html",
                            link: "/knowledge/Html",
                        }
                    ],
                },
            ],
            "/life/": [
                {
                    text: "生活点滴",
                    items: [
                        {
                            text: "旅行",
                            link: "/life/travel",
                        },
                        {
                            text: "酒",
                            link: "/life/wine",
                        }
                    ],
                },
            ],
            "/rec/": [
                {
                    text: "学习记录", // 侧边栏标题
                    items: [
                        {
                            text: "vitepress", // 侧边栏项标题
                            link: "/rec/vitepress", // 侧边栏地址
                        }
                    ],
                },
            ],
    
        },
    },
}

主题配置 themeConfig对象中可配置头部右上导航栏（nav）和侧边导航栏（sidebar）

nav为一个数组，里面每一个对象对应一个导航栏项目

- text：导航标题

- link：导航地址

{ text: '知识', link: '/knowledge/Css' },
        { text: '生活', link: '/life/travel' },
        { text: '记录', link: '/rec/vitepress' },

sidebar为一个对象，对象key为设置在哪个路径下显示侧边栏，value设置侧边栏标题和侧边栏项目

sidebar: { // 侧边栏，可以分组
            "/rec/": [
                {
                    text: "学习记录", // 侧边栏标题
                    items: [
                        {
                            text: "vitepress", // 侧边栏项标题
                            link: "/rec/vitepress", // 侧边栏地址
                        }
                    ],
                },
            ],
    
        }

利用VitePress+GitHub Pages创建简易博客

VitePress简介​

部署步骤​

VitePress简介

部署步骤