使用Netlify自动化部署Vitepress

May 11, 2024 · 12min

创建Netlify账号

账号注册地址

创建一个Vitepress项目

打开cmd执行该命令创建一个vitepress项目

pnpm add -D vitepress

初始化项目

pnpm vitepress init

image-20240511010603299

运行项目

pnpm run docs:dev

浏览器打开此地址

image-20240511010720916

出现这个说明项目创建成功

image-20240511010658517

在项目根目录创建一个.girignore文件(用于忽略不用上传到github的文件)

.gitignore文件内容如下

node_modules
.DS_Store
dist-ssr
cache
dist
.cache
.temp
*.local

image-20240511011435612

之后把代码托管到你自己的GitHub上

进入Netlify

登录账号进入Netify,点击Add new site

image-20240511011749954

选择第一个选项

image-20240511011901898

选择GitHub

image-20240511011950258

授权完毕后选择你的Vitepress项目

image-20240511012113684

输入你喜欢的网站地址

image-20240511012225729

输入构建命令和打包地址

构建命令:

pnpm run docs:build

打包地址:

.vitepress/dist

image-20240511013145525

等待部署完毕

当这里出现之前输入的网址,即部署成功

image-20240511013258559

访问一下,没有问题

image-20240511013336428

在这之后,你每次更新提交你的代码,Netlify就会自动帮你重新部署一次,让你的代码永远都是最新的

CC BY-NC-SA 4.0 2024-PRESENT © hujiacheng