使用VitePress快速搭建部署个人博客网站

最新推荐文章于 2025-07-04 00:03:37 发布

二当家-D哥

最新推荐文章于 2025-07-04 00:03:37 发布

阅读量2.9k

点赞数 23

CC 4.0 BY-SA版权

文章标签： vue 前端

本文链接：https://blog.csdn.net/u012491227/article/details/138251152

本文详细介绍了如何使用VitePress基于Vue3和Markdown构建个人文档网站，包括项目搭建的前置准备、命令行安装、项目结构（首页、博文结构）、部署流程以及GitHubPages部署。

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

🚀 作者：“二当家-小D”

🚀 博主简介：⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人，8年开发架构经验，精通java,擅长分布式高并发架构,自动化压力测试，微服务容器化k8s等

🚀 欢迎小伙伴们点赞👍、收藏⭐、留言💬

🍅文末获取源码联系配套笔记打包🍅

前言

VitePress 是一个基于 Vue 3 和 Vite 构建的静态站点生成器，专门用于快速创建文档网站。而我们的Vue3官方文档就是选择了 VitePress 来展示 Vue 3 的新功能和用法。VitePress 提供了简洁的语法和易于使用的工具，使得编写和维护文档变得更加简单和高效。

一、项目搭建

1.1 前置准备

Node.js 18 及以上版本。
通过命令行界面 (CLI) 访问 VitePress 的终端。
支持 Markdown 语法的编辑器。
推荐 VSCode 及其官方 Vue 扩展。

1.2 命令行安装

VitePress 可以单独使用，也可以安装到现有项目中。在这两种情况下，都可以使用以下方式安装它：

npm add -D vitepress

VitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令启动向导：

npx vitepress init

将需要回答几个简单的问题，除了第一个：

启动项目：

npm run docs:dev

二、项目结构

2.1首页home

首页的内容就是由 docs/index.md 文档生成的，由 markdown 文档生成前端页面

代码部分：

2.2博文结构

主要是有 nav 和 sidebar 部分，在 config.tsm文件设置，可以外部引入已经定义好的 nav 文件和 sidebar 文件

2.3博文内容

博文的内容就是由markdown文档生成的，可以在一个文件夹内专门设置里面的内容包括子内容，有点像路由结构

通过在 config.ts 设置 sidebar 导航，设置博客路由

三、项目部署

1.在Github上新建一个仓库，命名为vitepress-myblog-demo。之后，我们需要再去 config.tsm文件里，做相应的配置。具体如下图：

2.在根目录下建立一个文件，名为deploy.sh

具体代码如下：

#!/usr/bin/env sh
 
# 忽略错误
set -e  #有错误抛出错误
 
# 构建
yarn run docs:build  #然后执行打包命令
 
# 进入待发布的目录
cd docs/.vitepress/dist  #进到dist目录
 
git init  #执行这些git命令
git add .
git commit -m 'deploy'
 
git push -f git@github.com:fyp1212/vitepress-myblog-demo.git master:gh-pages  #提交到这个分支
 
cd -
 
rm -rf docs/.vitepress/dist  #删除dist文件夹

3.在 package.json 文件中设置命令行脚本命令