基于Vite使用VitePress搭建静态站点博客_vite-press

官方文档

VitePress官方文档

什么是VitePress？

VitePress是一个静态站点生成器(SSG)专为构建快速、以内容为中心的网站而设计。简而言之，VitePress把你的源内容写成降价，对其应用主题，并生成可以在任何地方轻松部署的静态HTML页面。

他是VuePress的小兄弟，基于Vite创建。
VuePress官方文档

一、初始化项目

注意：可以新建空文件夹创建项目，也可全局安装vitepress创建项目

1.安装依赖包

VitePress可以单独使用，也可以安装到现有的项目中。在这两种情况下，您都可以安装它: (也可以全局安装，建议：当前项目内安装)

# npm
npm add -D vitepress

# pnpm
pnpm add -D vitepress

# yarn
yarn add -D vitepress

# bun
bun add -D vitepress
1
2
3
4
5
6
7
8
9
10
11

2.初始化项目

# npm
npx vitepress init

# pnpm or yarn
pnpm dlx vitepress init

# bun
bunx vitepress init
1
2
3
4
5
6
7
8

文件结构

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json
1
2
3
4
5
6
7
8

3.运行命令

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "devDependencies": {
    "vitepress": "1.0.0-rc.24"
  }
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12

# npm
npm run docs:dev

# pnpm
pnpm run docs:dev

# yarn
yarn docs:dev

# bun
bun run docs:dev
1
2
3
4
5
6
7
8
9
10
11

4.访问 http://localhost:5173/

http://localhost:5173/

注意：默认端口号是vite的端口号，5173

5.效果

二、优化 可根据自己需求配置

选择默认主题+自定义主题的效果（个人觉得这个效果比默认的效果好看）

1.添加logo

1.默认主题

2.默认主题+自定义主题

后续配置全是基于【默认主题+自定义主题】的框架实现

2.为features添加icon和可点击效果

首页完整配置：

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "My Awesome Project"
  text: "A VitePress Site"
  tagline: My great project tagline
  image:
    src: /v-logo.png
    alt: 梦和远方
  actions:
    - theme: brand
      text: Markdown Examples
      link: /markdown-examples
    - theme: alt
      text: API Examples
      link: /api-examples

features:
  - icon: 声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】