VitePress 生成静态网站并部署到 Github Pages

使用 VitePress 生成静态网站并部署到 Github Pages

1. 首先在 github 上创建一个代码仓库，然后在将代码克隆到本地。
   
2. 然后运行pnpm init初始化项目；接着运行pnpm i vitepress。
   
3. 接着创建文件夹 docs,再创建index.md

---
layout: home

hero:
  name: Cherry的博客
  text: 彩虹🌈软糖
  tagline: 逆水行舟，不进则退
  image:
    src: /cherry.png
    alt: Cherry
  actions:
    - theme: brand
      text: come on
      link: /articles/组件库环境搭建
    - theme: alt
      text: View on Github
      link: https://github.com/zrtch

features:
  - icon: 🛠️
    title: Another cool feature
    details: Lorem ipsum...
  - icon: ⚡️
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon: 🖖
    title: Another cool feature
    details: Lorem ipsum...
---

4. 然后在package.json添加脚本。

"scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs", # 将构建并存放结果到 `.vitepress/dist`
    "serve": "vitepress serve docs"  # 启动一个静态文件服务
  }

5. 然后在运行pnpm dev 就能在本地看见效果。

6. 最后我们再把它部署到 Github Pages上,由于官方是提供了部署脚本的，我们在项目根目录下新建 deploy.sh。

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件

pnpm run build

# 进入生成的文件夹

cd docs/.vitepress/dist

git init
git add -A
git commit -m 'add'

git push -f git@github.com:zrtch/Cherry-blog.git master:blog
# git push -f git@github.com:你的git名/你的git项目名.git master:你的git分支

cd -

然后在package.json里面新增发布脚本命令：

  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs",
    "deploy": "./deploy.sh" // 新增这行代码
  },

有个注意的点，就是在mac下,新建的 deploy.sh 默认没有可执行权限,需要 chmod + x deploy.sh，这样就可以 ./deploy.sh 直接部署了。

7. 最终只要打开github远程仓库选择pages设置分支保存即可。

8. 然后输入 https://zrtch.github.io/Cherry-blog/ 你们对应的地址即可。