【保姆级】VitePress 新建项目+部署Github Pages流程+常见报错处理

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

最近想搞个博客，挺喜欢VitePress简洁的风格，嘿嘿说干就干٩(˃̶͈̀௰˂̶͈́)，又是一篇超级体贴的保姆级教程》〉你值得拥有o(≧v≦)oو

构建vitepress项目

1. 新建文件夹

mkdir ViteBlog

1. 使用编译器打开该文件夹（本文以vs code为例）

1. 打开一个新的终端

1. 初始化项目(Mac方式)

yarn init

如果报command not found的错

就全局安装下yarn

npm install -g yarn

1. 本地安装 VitePress

yarn add --dev vitepress

1. 创建说明文档

mkdir docs && echo '# hehe' > docs/index.md

1. 添加脚本

  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs", # 将构建并存放结果到 `.vitepress/dist`
    "docs:serve": "vitepress serve docs"  # 预览前面构建的结果，也就是启动一个静态文件服务
  }

1. 在本地服务器上启动文档站点

yarn docs:dev

如果报如下error Command "docs:dev" not found.错误，检查下刚修改的文件保存没有(˶‾᷄ ⁻̫ ‾᷅˵)

正常执行会出现下图中的本地地址

按住command点击（Mac）或者复制进浏览器中打开

出现上面👆这个页面就说明创建成功啦٩(˃̶͈̀௰˂̶͈́)و🎉🎉🎉

尽量不要启用管理员权限，不然后后面修改文件，新增文件都很麻烦

部署Github Pages

1. 在Github上新建两个仓库：

• 一个放完整的项目

• 一个放项目build后的生成的dist文件夹里的内容（这个项目命名要按照用户名.github.io的格式）

1. 打开名为用户名.github.io的项目

一般情况按下图进行配置即可

然后稍等一下下就可以打开 aqin1012.github.io/ 查看啦Σ(￣。￣ﾉ)ﾉ

填坑

记录一个踩到的VitePress部署到Github Pages的巨坑

今天上午不管我怎么build、怎么发布，打开aqin1012.github.io/

都是下面这个样子(b_d)

为啥？。。木得样式？？？！！（应了那句名言：本地明明好好的……= =）

在我不断build的过程中，我决定打开index.html瞅一眼

我忽然意识到，，按照Github Pages创建静态网站的步骤，我只在项目中上传了build之后生成的dist文件夹📃里的内容（如下图红框框内的文件），所以这个项目中并没有/aqin/和/img/这两个目录。。。

那为啥我会build出这两个目录嘞？

果然，我在我的配置文件config.js中惊喜的发现了下面这些……

好吧=[,,_,,]:3

我发现了导致图片没有被build进来的最根本的原因是我没把存放图片的文件夹放在public目录下，只有放在这里的静态资源才会被打包。。。

于是我将img文件夹移进了public文件夹下，并注释掉了base: "/aqin/",，再次build

完美(¯︶¯)，push到Github

进入到配置Github Pages的页面

这里由于之前配置过（可以度娘🔍下配置配置教程，建议参考官网），所以是会自动部署的（但需要时间），可以在Action处查看部署情况

单击打开网址aqin1012.github.io/

啊啊啊，终于有样式叻(●°u°●) 」🎉🎉🎉

PS>我又仔细看了官方教程，发现是有这些相关提示的（呜呜呜呜呜呜🤦‍♂捂脸ing）

来来来我们一起好好看官方教程( ･ὢ･ )

vitepress.vuejs.org/guide/deplo…