当前位置：首页 > news >正文

VitePress搭建静态博客

news 来源：原创 2025/6/24 5:23:47

文章目录

🟢VitePress
🟢1、VitePress快速上手
- 1.1、项目创建
- 1.2、路由
- 1.3、路由配置介绍
✒️总结

🟢VitePress

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。最初的 VuePress 基于 Vue 2 和 webpack。借助 Vue 3 和 Vite，VitePress 提供了更好的开发体验、更好的生产性能、更精美的默认主题和更灵活的自定义 API。
VitePress官网
VuePress官网

在这里插入图片描述
使用 markdown、HTML、CSS、JavaScript、Vue 编写搭建自己的知识库

使用 Markdown 轻松创建文档知识库
vite 即使预览，网页自动发生变化
内置代码高亮、实时编码等功能
使用 Windi Css 设置样式
使用 MDC 组件，用 vue 做出好看的效果
内置对 LaTex 数学公式的支持
能直接使用前端图标库
能够导出 PDF、静态 HTML 文件

🟢1、VitePress快速上手

vitepress 是一个静态站点生成器，英文名为 SSG (Static Site Generation)。与它类似的还有 yuepress、hexo，python 语言也有 shpinx、mkdocs 之类的工具，react 也有 docusaurus。这些工具找到一个适合自己的才是最好的！
但是在这么多的工具里面，vitepress 是上手成本最低的，也是配置最简单的(需要会JavaScript)，界面也很漂亮，有适配移动端。只要写 markdown 文件与 javascript 配置文件，就可以快速搭建器一个网站。
vitepress 考虑到用户可能会需要定制化，所以提供了很多的接口与插槽，如果会用 vue 开发项目，就可以自己改。并且可以使用tai1wind css、 elements-plus 等框架，使用起来非常方便。

1.1、项目创建

操作笔记参考官网文档:https://vitepress.dev/zh/guide/what-is-vitepress
创建目录

mkdir vitepress-tutorial
cd vitepress-tutoral

安装依赖

npm add -D vitepress
或者
yarn add -D vitepress

初始化项目

pnpm vitepress init
或者
yarn vitepress init

按照问题填一下即可

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config? 
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run pnpm run docs:dev and start writing.

项目目录结构


├─ docs
│  ├─ .vitepress # 当前目录所在的位置就是文档的根目录
│  │  └─ config.js # 项目的配置文件，最重要
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

在这里插入图片描述
运行启动脚本


npm run docs:dev
或
yarn docs:dev

打开本地
在这里插入图片描述

1.2、路由

VitePress 使用基于文件的路由，这意味着生成的 HTML 页面是从源 Markdown 文件的目录结构映射而来的。

.
├─ guide
│  ├─ getting-started.md
│  └─ index.md
├─ index.md
└─ prologue.md

生成的 HTML 页面会是这样：

.
index.md                  -->  /index.html (可以通过 / 访问)
prologue.md               -->  /prologue.html
guide/index.md            -->  /guide/index.html (可以通过 /guide/ 访问)
guide/getting-started.md  -->  /guide/getting-started.html

生成的 HTML 可以托管在任何支持静态文件的 Web 服务器上。

1.3、路由配置介绍

import { defineConfig } from 'vitepress'// https://vitepress.dev/reference/site-config
export default defineConfig({title: "My Awesome Project",  //项目标题description: "A VitePress Site", //项目描述themeConfig: {// https://vitepress.dev/reference/default-theme-config// 导航栏nav: [{ text: '首页', link: '/' },{ text: '笔记', link: '/notes/' },{ text: 'examples', link: '/markdown-examples' }],// 目录sidebar: {'/notes': [{ text: 'notes1', link: '/notes/notes1' },{ text: 'notes2', link: '/notes/notes2' },]},// sidebar: [//   {//     text: 'Examples',//     items: [//       { text: 'Markdown Examples', link: '/markdown-examples' },//       { text: 'Runtime API Examples', link: '/api-examples' }//     ]//   }// ],//社交链接socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }]}
})