【Skills】2024博客迁移

前言

近半年都没怎么好好地整理之前的文档，都是碎片化地写在语雀上，没有放到博客，趁着最近国庆将之前的文档整理以下，全部放到网上。

由于之前对前端不是特别的熟悉，用的Hexo框架修改起来非常麻烦，也没有非常有动力地去改。正好最近学习了vue，对前端有了一个比较系统的认识，所以顺便将博客从hexo迁移到了基于vue开发vitepress。可以很方便地修改主题布局以及自定义组件。现在博客风格非常对我的胃口。哈哈哈。后续应该会添加更多的功能。

主题修改

使用的主题基于Pure Theme，添加了tailwindcss支持（吹爆，太好用了）可以不用去纠结起classname了。之前一直没发现那么好用。

具体修改如下：

修改原来的单栏布局为双栏，并取消了Aside Bar的显示。
修改了样式，适配主题。现在的主题色为 tailwind的 `orange-600。
修改了字体，替换为了更为通用的 LXGW WenKai Screen字体。
布局的样式全部使用了tailwind进行重构。

最终效果如下，还算比较满意。后续好好研究以下哪些动画库，添加一些动画效果。

主页截图

腾讯云OSS上传设置

图床的设置基本上遵循之前的使用习惯，使用PicGo搭配Typora进行文章的写作，但是之前使用的是imgur的图床，虽然是免费的，但是国内访问非常不稳定。所以这次换成了腾讯云。虽然收费，但是也很便宜，一个月都不到一瓶可乐的钱。

OSS的购买以及PicGo的配置参考了这篇帖子链接。

Github Actions 部署

action的部署脚本如下，内容基本来自于VitePress官网，但是直接使用官网的那个脚本并不完整。这里是进行了修改，主要修改替换的是环境初始化的最后部署的那一部分。

WARNING

需要注意一点的是，pure默认主题中的.gitignore文件时包含了/package-lock.json文件的，在本地运行的时候没有问题。但是在action初始化的时候会需要这个文件，需要在commit 的时候把这个文件添加上去。

yaml

# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
#
name: Deploy VitePress site to Pages

on:
  # 在针对 `main` 分支的推送上运行。如果你
  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
  push:
    branches: [main]

  # 允许你从 Actions 选项卡手动运行此工作流程
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
permissions: write-all

# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释
      #   with:
      #     version: 9
      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm # 或 pnpm / yarn
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: npm install # 或 pnpm install / yarn install / bun install
      - name: Build with VitePress
        run: | 
          npm run docs:build
          pwd
          ls -al
          echo "ROOT_DIR=$(pwd)" >> $GITHUB_ENV
      
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: ${{ secrets.ACCESS_TOKEN }}
          folder: ${{ env.ROOT_DIR }}/.vitepress/dist
          repository-name: jiamingyy/jiamingyy.github.io
          branch: master

  # 部署工作
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4