VitePress 是 VuePress 的下一代框架，是基于 Vue3+Vite 构建的静态网站生成器。
一、初始化创建
- 创建一个目录，并进入这个目录
mkdir vitepress-starter && cd vitepress-starter
2. 初始化（一直回车即可）
yarn init
3. 本地安装 VitePress
yarn add --dev vitepress
4. 创建第一篇文档
mkdir docs && echo '# Hello VitePress' > docs/index.md
5. 在 package.json.添加一些 script
{
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
}
6. 在本地服务器上启动文档站点
yarn docs:dev
VitePress 会在 http://localhost:3000 启动一个热重载的开发服务器。
二、网站基本框架搭建
- 目录结构的创建
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ guide
│ │ └─ index.md
│ ├─ public
│ │ └─ favicon.ico
│ ├─ htmldocs
│ │ ├─ index.md
│ │ ├─ htmlone.md
│ │ └─ htmltwo.md
│ ├─ cssdocs
│ │ ├─ index.md
│ │ └─ cssone.md
│ └─ index.md
└─ package.json
- 配置 .vitepress/config.js 文件，它应该导出一个 JavaScript 对象
module.exports = {
title: '吴京豪的文档网站', // 网站标题
description: '总结归纳学习中的知识', // 网站的描述
base: '/base/', // 部署时的路径 默认 / ，使用二级地址 /base/
head: [['link', {rel: 'icon', href: '/favicon.ico'}]],// 添加网站图标
// 主题配置
themeConfig: {
// 导航栏配置
nav: [
{text: '首页', link: '/'},
{text: '指南', link: '/guide/'},
{text: 'HTML/CSS', items: [
{text: 'HTML5', link: '/htmldocs/'},
{text: 'CSS3', link: '/cssdocs/'}]},
{text: 'JavaScript', link: '/jsdocs/'},
{text: '面试题', link: ''},
{text: '关于作者', link: ''},
],
// 左侧导航栏配置
sidebar: {
'htmldocs': [{text: 'HTML5', children: [
{text: '概况', link: '/htmldocs/'},
{text: '入门', link: '/htmldocs/htmlone'},
{text: '进阶', link: '/htmldocs/htmltwo'},]}],
'cssdocs': [{text: 'css3', children: [
{text: 'css文档', link: '/cssdocs/'},
{text: 'css文档1', link: '/cssdocs/cssone'}]}],
}
}
}
三、部署
在 docs/.vitepress/config.js设置正确的base。
在项目中创建包含如下内容的 deploy.sh文件
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e &&
# 生成静态文件
npm run docs:build &&
cd docs/.vitepress/dist &&
git init &&
git add -A &&
git commit -m 'deploy' &&
git remote add origin git@github.com:<username>.git &&
git push -f -u origin main:gh-pages &&
cd -
package.json文件中加入
"scripts": {
"deploy": "sh deploy/website_github.sh"
}
运行 yarn deploy部署
四、其他
搭建好了之后采用 Markdown 语法编写内容。
这些配置已经满足我的需求了，以后会逐渐完善的，更多的配置参考官网。
