Mick's Blog | Mick's Blog

最近写文章越来越多，基本上写完都是发到掘金上的，又希望别人通过github也能够阅读，然后又copy一份放到github上，无意间发现很多同学都在github上搭建了自己的博客（xxxx.github.io)，这样阅读起来的体验感就会提升了很多，所以我也想搭建自己的博客。看到vitepress的官网上面有免费的教程，便立刻动起手来。

创建项目

// 1. 创建文件夹并进入
mkdir vitepress-starter && cd vitepress-starter
// 2. 初始化pnpm
pnpm init
// 3. 安装vitepress 和 vue
pnpm add -D vitepress vue
// 4. 创建docs文件夹  并新建index.md 写上内容
mkdir docs && echo '# Hello VitePress' > docs/index.md

然后我们在package.json中配置脚本

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

这样就可以通过pnpm docs:dev运行起来了。此时你会发现docs文件夹下面多了个文件夹

如果想配置自己的博客，则需要在docs/.vitepress新建一个config.js，然后通过官网上面的描述去配置就可以了。

如果我们打包的话，打包的文件会放在docs/.vitepress/dist下面

部署

那如何部署呢？

.github/workflows/deploy.yml

在我们项目中新建.github/workflows/deploy.yml文件，然后根据官网的描述配置。

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: 16
          cache: yarn
      - run: yarn install --frozen-lockfile
      - name: Build
        run: yarn docs:build
      - uses: actions/configure-pages@v2
      - uses: actions/upload-pages-artifact@v1
        with:
          path: docs/.vitepress/dist
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v1