如何快速搭建可以自动化部署的博客

1. 创建一个github账号，假如用户名为 xiaoming

2. 创建一个仓库，名字必须为 xiaoming.github.io，前面的名字必须和你的用户名一致

3. 根据vuepress文档，初始化项目并上传到之前创建的项目

注意：要用master分支而不是main

快速上手

4. 修改vuepress项目配置

修改package.json, 注意指定的构建目录

注意：不要使用官方文档的docs目录，改成vuepress dev src

"scripts": {
  "dev": "vuepress dev src",
  "build": "vuepress build src"
}

5. 修改.vuepress里的config.js,

const path = require('path')
module.exports = {
  title: 'xxx',
  dest: path.resolve(__dirname, '../../docs'), // 关键是这一行 意思是打包到docs文件夹
}

如何配置请参考官方文档 基础配置

6. 项目根目录创建 .github/workflows/ci.yml, 并拷贝如下文件内容

name: Publish page

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm i
          npm run build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # 
          FOLDER: docs # The folder the action should deploy.

7. push提交代码

8. 打开action 等待构建完成，生成打包后的分支gh-pages

9. 打开仓库设置

10. 打开pages

11. 如下配置

12. 开始写博客吧

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。