在github上创建仓库
初始化git仓库
git init
添加gitignore文件
node_modules
.DS_Store
dist
dist-ssr
cache
.cache
.temp
*.local
添加本地所有文件到git仓库
git add .
创建第一次提交
git commit -m "first commit"
添加远程仓库地址到本地
git remote add origin <https://github.com/AZCodingAccount/Demo.git>
推送项目到github
git push -u origin master
选择github actions
设置工作流
添加口令
生成的口令第一时间复制保存，后续将不再展示。
重命名并设置deploy脚本。脚本文件：参考的vitepress官方文档：**https://vitepress.dev/guide/deploy#github-pages**
可以使用pnpm，也可以使用npm。使用npm 参考 GitHub Action一键部署个人博客 | Ahao (helloahao096.github.io)
使用pnpm使用脚本，重命名为deploy.yml：
name: Deploy VitePress site to Pages
on:
push:
branches: [master]
# 设置tokenn访问权限
permissions:
contents: read
pages: write
id-token: write
# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:
group: pages
cancel-in-progress: false
jobs:
# 构建工作
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
with:
fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
- name: Setup pnpm
uses: pnpm/action-setup@v2 # 安装pnpm并添加到环境变量
with:
version: 8.6.12 # 指定需要的 pnpm 版本
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: pnpm # 设置缓存
- name: Setup Pages
uses: actions/configure-pages@v3 # 在工作流程自动配置GithubPages
- name: Install dependencies
run: pnpm install # 安装依赖
- name: Build with VitePress
run: |
pnpm run docs:build # 启动项目
touch .nojekyll # 通知githubpages不要使用Jekyll处理这个站点，不知道为啥不生效，就手动搞了
- name: Upload artifact
uses: actions/upload-pages-artifact@v2 # 上传构建产物
with:
path: .vitepress/dist # 指定上传的路径，当前是根目录，如果是docs需要加docs/的前缀
# 部署工作
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }} # 从后续的输出中获取部署后的页面URL
needs: build # 在build后面完成
runs-on: ubuntu-latest # 运行在最新版本的ubuntu系统上
name: Deploy
steps:
- name: Deploy to GitHub Pages
id: deployment # 指定id
uses: actions/deploy-pages@v2 # 将之前的构建产物部署到github pages中
实际上使用的版本：
name: Deploy
on:
workflow_dispatch: {}
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- run: npm ci
- name: Build
run: npm run docs:build
- uses: actions/configure-pages@v2
- uses: actions/upload-pages-artifact@v1
with:
path: .vitepress/dist
- name: Deploy
id: deployment
uses: actions/deploy-pages@v1
需要注意项目的根目录（.vitepress所在的目录）
配置base，base必须配置，否则打包会丢失css样式。
<aside> 💡 base必须配置，否则打包会丢失css样式！！
根目录配置 /，那么对应 https://yiov.github.io/
仓库 vitepress 配置 /vitepress/ ，那么对应 https://yiov.github.io/vitepress
</aside>
export default defineConfig({
base: '/', //网站部署的路径，默认根目录
// base: '/vitepress/', //网站部署到github的vitepress这个仓库里
//fav图标
head: [
['link',{ rel: 'icon', href: '/logo.png'}], //部署到根目录
['link',{ rel: 'icon', href: '/vitepress/logo.png'}], //部署到vitepress仓库
],
})