【vue组件库搭建04】使用vitepress搭建站点并部署到github

前言

基于vitePress搭建文档站点，使用github pages进行部署

安装VitePress

1.Node.js 18 及以上版本

2.npm add -D vitepress

3.npx vitepress init

4.将需要回答几个简单的问题：

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

部署步骤

1.在github上创建仓库，如果没有Github账号，需要先注册一个。

2. 需要在config.mjs里面配置base，名称为github仓库名称

base: "/docs-demo/"

3.初始化git仓库

git init

4.添加gitignore文件

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

5.添加本地所有文件到git仓库，创建第一次提交，添加远程仓库地址到本地，推送项目到github

git add .
git commit -m "first commit"
git remote add origin https://github.com/AZCodingAccount/Demo.git
git push -u origin master

6.选择github actions

7.设置工作流

8.重命名并设置deploy脚本

脚本文件：参考的vitepress官方文档：https://vitepress.dev/guide/deploy#github-pages

❗node版本和pnpm版本需要一致

❗对于npm的部署可以参考这个博客[GitHub Action一键部署个人博客 | Ahao (helloahao096.github.io)](https://helloahao096.github.io/helloahao/posts/GitHub Action一键部署个人博客.html)

❗需要注意项目的根目录（.vitepress所在的目录）

name: Deploy VitePress site to Pageson:push:branches: [master]# 设置tokenn访问权限
permissions:contents: readpages: writeid-token: write# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:group: pagescancel-in-progress: falsejobs:# 构建工作build:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3with:fetch-depth: 0 # 如果未启用 lastUpdated，则不需要- name: Setup pnpmuses: pnpm/action-setup@v2 # 安装pnpm并添加到环境变量with:version: 8.6.12 # 指定需要的 pnpm 版本- name: Setup Nodeuses: actions/setup-node@v3with:node-version: 18cache: pnpm # 设置缓存- name: Setup Pagesuses: actions/configure-pages@v3  # 在工作流程自动配置GithubPages- name: Install dependenciesrun: pnpm install # 安装依赖- name: Build with VitePressrun: |pnpm run docs:build # 启动项目touch .nojekyll  # 通知githubpages不要使用Jekyll处理这个站点，不知道为啥不生效，就手动搞了- name: Upload artifactuses: actions/upload-pages-artifact@v2  # 上传构建产物with:path: .vitepress/dist # 指定上传的路径，当前是根目录，如果是docs需要加docs/的前缀# 部署工作deploy:environment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }} # 从后续的输出中获取部署后的页面URLneeds: build    # 在build后面完成runs-on: ubuntu-latest  # 运行在最新版本的ubuntu系统上name: Deploysteps:- name: Deploy to GitHub Pagesid: deployment  # 指定iduses: actions/deploy-pages@v2 # 将之前的构建产物部署到github pages中