初探VuePress博客，从零构建到自动化部署

2023-11-09 20:51:46

前言

在这个信息爆炸的时代，拥有一个个人博客正变得越来越重要。它可以作为我们记录生活、分享知识、展示自我的平台。而VuePress，一个以Vue驱动的静态网站生成器，凭借其简单易用、功能强大等特点，成为众多开发者和博主的首选。

搭建VuePress博客

1. 安装VuePress

首先，需要在本地安装VuePress。可以通过以下命令完成：

npm install -g vuepress

2. 创建项目

安装完成后，创建一个新的VuePress项目：

vuepress init my-blog

3. 配置主题

VuePress提供了多种主题可供选择。为了保持博客的极简风格，这里我们选择使用VuePress官方的默认主题。

4. 编写内容

接下来，就可以开始编写博客文章了。文章内容可以存储在docs文件夹中。

5. 本地预览

在本地预览博客，可以通过以下命令：

vuepress dev

6. 构建并部署

当博客内容完成后，就可以构建并部署它了。

vuepress build

然后将构建后的文件部署到服务器上即可。

自动化部署

为了简化部署流程，我们可以使用GitHub Actions来实现自动化部署。

1. 创建GitHub Actions配置文件

在项目的根目录下创建一个名为.github/workflows/main.yml的文件，并添加以下内容：

name: Deploy Blog

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'
      - run: npm install
      - run: npm run build
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages
          folder: dist