vitepress 几步轻松搭建博客

野生吃饼怪

已于 2023-07-30 11:49:09 修改

阅读量6.1k

点赞数 36

CC 4.0 BY-SA版权

文章标签： vitepress vue.js vite 前端 javascript

于 2023-02-26 13:50:24 首次发布

本文链接：https://blog.csdn.net/weixin_42232622/article/details/129224470

Vitepress是一个基于Vue3和Vite的静态站点生成器，适合构建博客、笔记和文档系统。它的特点是快速启动、小体积打包，以及易于配置和部署，允许用户仅用Markdown就能创建内容。安装过程包括初始化项目、安装Vitepress和Vue依赖、修改`package.json`脚本，然后运行开发服务器。配置涉及创建和编辑Markdown文件，以及设置导航和侧边栏菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ⅰ、什么是vitepress

💎 `vitepress` 使用场景

简单的说，只要会用 markdown 语法，就能构建自己的「博客、笔记、使用文档」等系统；

✨ `vitepress` 优势

优势	介绍
傻瓜式操作	只需要配置菜单和对应的 `markdown` 就能实现博客、笔记等系统自由
性能优势	基于 vue3 和 vite 超快的启动速度，和更小的打包体积「相比vue2 的 vuepress 更具有优势」
写的少，做的多	专注于编写并以最少的配置进行部署，真正的 SSG + SPA 架构疯狂
独特设计与主题	自带各种独特的主题，我们只需填充内容和配置「不需要向直接使用vue或react 那样逐步搭建」

🎨 `vitepress` 几步操作后，效果图

在这里插入图片描述

文章目录

Ⅱ、安装和搭建 vitepress

🎃 安装 👇

① 初始化一个文件夹

  mkdir vitepress-project      // 创建文件夹
  cd  vitepress-project        // 进入文件夹
  npm init                     // 初始文件夹

② 安装 `vitepress` 和相关依赖 `vue`

npm install -D vitepress vue

③ 在生成的 `package.json` 中，修改 `scripts` 脚本命令

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

④ 运行 vitepress

npm run docs:dev

🎨 配置 👇

⑤ 启动后，将自动生成 `docs` 文件夹

在这里插入图片描述

⑥ 创建和配置主页文件

在 docs 文件夹下创建 index.md 文件：用于填充主页内容 👇
index.md 参考 👇 ，（根据个人，自由修改）

 ---
layout: home
hero:
  name: 前端不秃头
  text: 个人博客
  tagline: 标语
  actions:
    - theme: brand
      text: 开始
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
features:
  - icon: ⚡️
    title:  vite 超快冷启动和热加载
    details: Lorem ipsum...
  - icon: 🖖
    title: Vue的力量与Markdown相遇
    details: Lorem ipsum...
  - icon: 🛠️
    title: 始终简单、最少
    details: Lorem ipsum...
---
<style>
:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}
</style>

效果如下 👇
在这里插入图片描述

⑦ 创建页面和目录的配置

在这里插入图片描述

在 docs 下创建 page 文件夹：用于存放每个子文档
（创建 2 个 markdown 文件，后面用于测试）
在.vitepress下创建 config.js 文件：用于配置目录 (路由) ，参考如下👇 ，

module.exports = {
    title: '标题',
    base: '/home',
    description: 'Just playing around.',
    themeConfig: {
        nav: [
            {
                text: '导航',
                items: [
                    { text: '页面1', link: '/page/page1' },
                    { text: '页面2', link: '/page/page2' }
                ]
            }
        ],
        sidebar: {
            '/page/': [
                {
                    text: '关于侧边栏',
                    items: [
                        { text: '关于1', link: '/page/page1' },
                        { text: '关于2', link: '/page/page2' }
                    ]
                },
 
            ]
        }
    }
}