小舟随波，自在无忧：VuePress 与 GitHub Actions 协奏曲下的无忧部署

2023-11-06 13:03:24

VuePress，一个简洁高效的静态网站生成器，正受到众多技术博客爱好者的青睐。而 GitHub Actions，作为 GitHub 的持续集成服务，则为自动化构建和发布提供了完美的舞台。当 VuePress 与 GitHub Actions 携手起舞，便奏响了自动构建、自动发布的华美乐章，让开发者们能够更加轻松、高效地搭建博客，将思想的火花随心所欲地释放。

前奏：VuePress 入门曲

VuePress 是一款基于 Vue.js 构建的静态网站生成器，它以简洁、高效著称，特别适合用来搭建技术博客或文档网站。使用 VuePress，开发者可以专注于内容创作，无需为网站的构建和部署操心。

1. 初识 VuePress

1.1 安装与初始化

npm install -g vuepress
vuepress init my-blog

1.2 编写 Markdown 内容

---
title: 我的第一篇博客
date: 2023-03-08
---

# 欢迎来到我的博客

这是我的第一篇博客文章，在这里，我将分享我的技术心得和生活感悟。希望你们能够喜欢！

1.3 本地预览

vuepress dev

2. 进阶 VuePress

2.1 主题选择

VuePress 提供了丰富的主题可供选择，开发者可以根据自己的喜好进行挑选。

2.2 插件扩展

VuePress 还支持丰富的插件，可以帮助开发者实现更多功能，如代码高亮、评论系统、搜索功能等。

2.3 部署发布

VuePress 支持多种部署方式，如 GitHub Pages、Netlify、Vercel 等。开发者可以选择自己喜欢的平台进行部署。

正曲：GitHub Actions 登场

GitHub Actions 是一个持续集成服务，它可以帮助开发者自动化构建、测试和部署代码。GitHub Actions 提供了丰富的动作（Actions），可以帮助开发者实现各种自动化任务。

1. 邂逅 GitHub Actions

1.1 创建工作流

name: CI/CD

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build

1.2 部署到 GitHub Pages

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist