使用github的action自动部署到github-pages中创建部署的deploy.yml文件，在项目的根目录下面.github\workflows\deploy.yml完整的代码：使用的是pnpm进行依赖安装。name:部署VitePresson:push:branches:-docs#这段是在推送到docs分支时触发该命令jobs:build-and-deploy:runs-on:ubuntu-lateststeps:-name:Checkoutcodeuses:actions/checkout@v2with:ref:docs#这一步检查docs代码-name:SetupNode.j
使用VitePress搭建个人博客VitePress官网GettingStarted|VitePressVitePress是一个静态站点生成器（SSG），旨在构建快速、以内容为中心的网站。环境配置Node.js(nodejs.org)Node版本18或更高版本**使用node-v**查看node版本初始化项目创建文件夹并进入到项目的目录mkdirvitepress&&cdvitepress初始化项目npmvitepressinit这里会带有设置向导┌WelcometoVitePress!│◇WhereshouldVitePressinitializetheconfig?│./docs│◇Sit
前言✅作者：TuNan✨个人主页：图南的个人主页😉欢迎关注🔎点赞😍收藏⭐留言💌1.新建一个blog文件夹先决条件Node.js版本16或更高版本。用于通过命令行界面（CLI）访问VitePress的终端。具有Markdown语法支持的文本编辑器。推荐使用VSCode)以及官方Vue扩展。VitePress可以单独使用，也可以安装到现有项目中。在这两种情况下，你都可以使用以下命令安装它：2.安装vitePress在命令行输入以下命令npminstall-Dvitepress3.设置向导执行以下命令第一个是让你选你文档存放的目录第二个是文档的名称第三个是文档的描述第四个是文档的主题npxvitep
VitePress部署到GithubPages后发现样式全错乱怎么办？当我们部署到Githubpages线上后，发现全是样式错乱的，也就是无样式，怎么办？在此简单记录一下这个时候我们作为前端开发者，可以打开浏览器调试看看就发现了，是静态资源地址不对，如下 这个时候，我们只需修改theme/config.js中的基本路径即可，因为我们的访问地址是https://msyuan.github.io/vitePress-project/这样的，所以配置修改成如下即可exportdefault{base:"/vitePress-project/",}再次发布就OK了。github项目地址：https:
接上一节：从零用VitePress搭建博客教程(4)–如何自定义首页布局和主题样式修改？上一节其实我们也简单说了自定义页面模板，这一节更加详细一点说明，开始之前我们要知道在vitePress中，.md的文件是可以直接编写vue的代码的。比如我们现在来自定义一个前端网址导航页面八、自定义一些页面模板1、编写组件代码想自定义页面模板样式，该如何做呢？我们先在theme/components下新建siteList.vue文件，编写模板，代码如下：template>网址分类模块-->sectionclass="site-section">标题-->h2class="title">{{props.tit
接上一节：从零用VitePress搭建博客教程(6)-–第三方组件库的使用和VitePress搭建组件库文档 我们搭建完成vitePress后，那么接下来就是如何部署到线上服务器，这里使用GithubPages，免得自己购买服务器，当然你也可以自己购买服务器来部署（比如阿里云服务器）。在部署之前，我们先简单了解下GithubActions和GithubPages一、基本概念认识1、理解GithubActions中文文档地址：https://docs.github.com/zh/actions简单说，GithubActions就是GitHub官方提供的自动化（CI/CD）服务，通过它可以完成自动
接上一节：从零用VitePress搭建博客教程(5)-如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录？九、第三方组件库的使用我们经常看见UI组件库的文档，这里我们就用element-plus第三方组件库为例子，搭建组件库文档examples：作为组件库示例目录，我们以Button组件使用为例1、安装element-pluspnpminstallelement-plus2、引入element-plus安装完成后，在theme/index.js引入element-plus相关文件importDefaultThemefrom"vitepress/theme";impo
接上一节：从零用VitePress搭建博客教程(3)-VitePress页脚、标题logo、最后更新时间等相关细节配置六、首页样式修改有时候觉得自带的样式不好看，想自定义，首先我们在docs/.vitePress新建一个theme文件夹，用来存放自定义布局和主题修改的相关文件，如下所示theme下再新建custom.css和index.jscustom.css我们用来写修改样式的，当然也可以安装css预处理器来写样式。index.js是入口文件，用来注册组件和配置自定义布局的。VitePress对CSS预处理器有内置支持：.scss、.sass、.less，.styl和.stylus文件。不需
接上一节：从零用VitePress搭建博客教程(2)–VitePress默认首页和头部导航、左侧导航配置五、默认主题相关细节配置关于默认主题的标题，logo、页脚，最后更新时间等相关细节配置，我们也是通过文件config.js中的themeConfig选项配置的，以下所有配置都是在themeConfig中完成的1、修改顶部网站的logo和标题默认情况下，网站的logo会引用config.title配置的站点标题。如果想修改网站的logo标题，则可以在themeConfig.siteTitle选项中设置定义标题。exportdefault{themeConfig:{siteTitle:'前端吧q
开始使用文章目录开始使用写在前面创建项目安装vitepress启动项目vitepress的目录结构写在最后写在前面关于为什么要写这个教程，原因有二，其一是因为vitepress才刚出来，中文版的教程不详细，英文版的教程可能大部分人看起来比较麻烦；其二是因为作者最近刚用vitepress搭建了一个组件库展示网站，就想趁此机会写个文档吧😄！以后可能会出开发自己组件库的教程，如果有兴趣可以私信我，人多的话可能就会提前安排上🎉，目前文档已在我的GitHub仓库了，是我参加青训营的团队一起完成的，但是文档的搭建是我一个人负责的，悄悄夸一下自己👍。如果大家想看看效果，其实我没有部署到GitHub上，这个以
