使用VitePress搭建个人博客

已于 2024-01-24 09:49:37 修改
阅读量567 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js npm node.js
于 2023-03-21 14:29:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46607967/article/details/129687374
VitePress是一个基于Vite和Vue的静态站点生成器。要开始，确保你有node版本18及以上。首先，在新文件夹中运行`npminstall-Dvitepress`来安装。接着，使用`npxvitepressinit`初始化项目，并回答简单问题。最后，通过`npmrundocs:dev`启动开发服务器，像启动Vue项目一样查看你的博客项目。

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

VitePress官方地址

VitePress | Vite & Vue Powered Static Site Generator

1.创建

先决条件

1. node版本 18 或更高版本

首先创建一个空文件夹  用来存放你的个人博客项目

在空文件夹内 打开cmd  输入

npm install -D vitepress

此时 您的项目结构应该如此：

 继续在根目录cmd内输入

npx vitepress init

您会看到几个简单的问题：

输入启动命令

npm run docs:dev

如同启动Vue项目一样

成功

RyzenVega
关注
【vue组件库搭建04】使用vitepress搭建站点并部署到github
m0_73884922的博客
07-06 1308
VitePress，将 Markdown 变成优雅的文档，只需几分钟
blog:使用vitepress+vue3来创作的一个博客，带有 Gitalk 评论，暗黑模式，局部打印等功能
05-26
page date title describe true 2021-01-03 项目概述 项目概述 :rocket: 基于「VitePress」搭建的极简博客 现已完成: :check_mark_button: 渲染文章列表 :check_mark_button: 使用Vue 3 :check_mark_button: 文章目录 :check_mark_button: 文章按时间轴归档 :check_mark_button: 文章分类 2021-12-31 :check_mark_button: Gitalk 评论 2020-01-05 更新 :check_mark_button: 文章列表分页 2021-01-16 更新 :check_mark_button: 文章图片放大 :check_mark_button: 切换黑暗模式 :check_mark_button: 局部打印 准备开发~ :white_large_square: 文章上下页 效果预览 在线地址: 国内访问: 地址已经换了 还是因为懒，直接把 githubpages 的评论回调地址给换成了 所以 GitHubpag
使用VitePress快速搭建部署个人博客网站
二当家小D的学习资源库
04-29 2924
VitePress 是一个基于 Vue 3 和 Vite 构建的静态站点生成器，专门用于快速创建文档网站。而我们的Vue3官方文档就是选择了 VitePress 来展示 Vue 3 的新功能和用法，利用 vitepress 快速搭建个人项目到部署上线
手把手教你搭建属于自己的技术博客（基于VitePress）
kijio的博客
06-05 942
手把手教你搭建属于自己的技术博客，部署到云服务器和github。
使用vitepress搭建自己的静态个人博客 || 个人知识库
xiaodoudou的专栏
02-15 2030
VitePress 由 Vite 和 Vue 驱动的静态站点生成器 简单、强大、快速。就是你想要的现代 SSG 框架！SSG 说明:SSG（Static Site Generator）是一种用于生成静态网站的工具或框架。它将网站的内容和模板文件作为输入，然后根据预定义的规则和配置生成静态的HTML、CSS和JavaScript文件。与动态网站相比，静态网站不需要在每次请求时生成页面内容，因此可以提供更快的加载速度和更高的安全性。
【VitePress 搭建博客操作指南】
L-Blog
12-07 2605
由于我之前的博客有点审美疲劳了，外加使用的自己搞的cms系统，有点臃肿，所以在网上找了一下，VitePress是自己比较满意的。 了解VitePress详情：VitePress
(源码)基于VitePress的个人博客系统.zip
04-20
这是一个基于VitePress搭建的个人博客系统，提供简洁、直观的平台用于记录前端相关内容，如技术教程、常见问题及案例分析等，能帮助开发者快速获取信息并分享技术见解与经验。 ## 项目的主要特性和功能 1. 响应式...
前端开发_vitePress_个人博客模板_项目实践与知识分_1744171807.zip
04-09
本压缩包文件提供了一个基于VitePress的个人博客模板项目，它不仅包含了创建个人博客所需的所有基础文件，而且还通过项目实践的方式，向开发者展示了如何使用VitePress构建一个功能完善、具有良好用户体验的静态网站...
语雀知识管理_Elog同步工具_VitePress搭建_Gi_1744169211.zip
04-09
在本文中，我们将深入探讨如何使用语雀进行知识管理、Elog同步工具的作用以及如何使用VitePress来搭建个人的静态网站生成器。此外，我们将关注Gi这一特定的项目或版本标识，结合相关的文件名称列表，全面解析这一...
VitePress-ES6，基于 VitePress 框架搭建的《ES6 入门教程》静态站点，可用于快速部署技术文档或个人博客
08-02
一个基于 VitePress 框架搭建的《ES6 入门教程》静态站点，功能完全复刻阮一峰老师ES6教程的官方网站，以此为模板，可实现快速开发和部署，适用于个人、团队开发技术文档和博客系统等。 运行说明： 1.下载代码后，...
harlanzw.com:我的个人博客使用VitePress和TailwindCSS构建
05-22
harlanzw.com 这个仓库是我个人网站的项目。 它是使用VitePress（Vite + Vue3）和带有TailwindCSS的自定义模板构建的。 如果您想设置自己的个人网站，请随时克隆它。 设置 环境 受到推崇的： 指示 安装副yarn 运行应用程序yarn dev 用法 部署方式 仅针对S3 + Cloudfront设置部署。 GitHub部署 如果是这种情况，您可以进入Github存储库设置并设置密钥： AWS_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY 在主分支机构推送时，它将部署网站。 注意：IAM将需要获得许可才能推送到s3存储桶和cloudfront缓存无效。 手动部署 如果您想在Github仓库之外部署，可以运行./scripts/deploy.sh
c-blog:vitepress博客
04-19
食铁兽--齐尧 尝试git actions。。 v 0.0.1
VitePress从零教会你搭建属于自己的博客
最新发布
stc_ljc的博客
07-04 1037
vitepress 是一个静态站点生成器，英文名为 SSG (Static Site Generation)。与它类似的还有 yuepress、hexo，python 语言也有 shpinx、mkdocs 之类的工具，react 也有 docusaurus。这些工具找到一个适合自己的才这么多的工具里面，vitepress 是上手成本最低的，也是配置最简单的(需要会JavaScript)，界面也很漂亮，有适配移动端。只要写 markdown 文件与 javascript 配置文件，就可以快速搭建器一个网站。
使用 Vitepress 构建博客并部署到 github 平台
guoqkmiss的博客
04-28 4013
VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
Vitepress快速搭设博客&项目文档
delete_you的博客
04-03 1293
快速使用vitepress搭设个人博客，下一期将使用vercel部署静态页面
VitePress做一个自己的知识博客
weixin_68658847的博客
06-11 1407
VitePress做一个自己的知识博客
「VitePress」极简博客搭建
Moking的博客
11-18 5371
个人博客地址:www.moking1997.top 现已完成: 渲染文章列表 Gitalk评论 文章按时间轴归档 文章分类 viepress快速开始 mkdir vitepress cd vitepress && yarn init -y yarn add -D vitepress echo '# Hello VitePress' > index.md # 在本地启动服务器 npx vitepress # 构建静态文件 > .vitepress/dist npx vi.
使用vitepress搭建网站（保姆级）
03-15
### 使用 VitePress 搭建网站的详细教程 #### 1. 初始化项目环境 在开始之前，确保已安装 Node.js 和 npm/yarn。进入目标文件夹后初始化一个新的 npm 项目： ```bash npm init -y ``` #### 2. 安装 VitePress 通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值