手把手教你将dumi自动部署到github！

站长

2023年01月17日 14:39 · 阅读数 40

今天这篇文章手把手教你如何使用dumi搭建博客以及使用github actions实现自动部署，一条龙服务，走起💃！

🌈我的成果：预览地址

前期准备

下载node

请注意：需确保node版本是10.13或以上（官网要求的）

// 查看本地node版本，不符合的话，自行去node官网下载

$ node -v
v10.13.0

创建github仓库

由于最终都是要部署到github的，不妨直接在github创建仓库来存放代码

手把手教你将dumi自动部署到github！

创建一个新的仓库，注意一下：

仓库权限需选择public，要不然不能免费部署到github，私有仓库部署是要收费的
不用勾选【Add a README file】，因为dumi的脚手架中自带README文件

拉取仓库代码

创建成功后，会跳到仓库代码的页面，我们复制一下ssh。

手把手教你将dumi自动部署到github！

打开终端，进入自己想放项目的文件夹，执行以下命令： $ git clone [ssh地址] 执行完之后，你会发现本地会多一个空文件夹。

搭建博客

由于我们搭建的是博客，只需要选择静态站点模式，进入上一步的那个文件夹，执行以下命令：

// 下载脚手架
$ npx @umijs/create-dumi-app
# or
$ yarn create @umijs/dumi-app

// 安装npm包
$ npm install

// 运行项目
$ npm run serve

执行完这些命令后，打开http://localhost:8080 ，就能看到博客最初的样子，后面的改造就看个人喜好啦！

手把手教你将dumi自动部署到github！

自动部署

手动部署还是不方便，这个时候就需要用上github强大的Actions功能了，跟着我一步一步来吧！

第一步：创建脚本

在根目录下创建.github文件夹，在.github下创建workflows文件夹，在workflows下创建ci.yml文件（ci.yml的文件名可任意填写，只需要yml后缀即可）

.github > workflows > ci.yml 手把手教你将dumi自动部署到github！

在ci.yml中写入以下内容：

# 项目名
name: dumi book test

# 只有在master分支发生push事件时触发
on:
  push:
    branches:
      - master

# 工作流
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 运行环境

    steps:
      # 拉代码
      - name: Checkout code
        uses: actions/checkout@v1

      # 下载node，我这里指定了15.x，这个版本可随意，高于dumi规定的node版本即可
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 15.x

      # 打包代码
      - name: Build Project
        run: |
          npm install
          npm run build

      # 部署到github
      - name: Deploy to Github
        uses: JamesIves/github-pages-deploy-action@4.0.0
        with:
          branch: build # 打包的内容放到build分支下
          folder: dist

ps：这里把打包后的内容放在build分支，是因为防止下次下载项目，把打包后的内容也下载下来了，放在build分支可以更好地作区分，且github也能拿到入口文件。

第二步：修改publicPath

要想github能正确拿到入口文件，需要在.umirc.ts中配置正确的publicPath，增加如下配置：

import { defineConfig } from 'dumi';

const repo = 'dumi-book-test'; // 项目名

export default defineConfig({
  title: 'dumi-book-test',
  mode: 'site',
  devServer: {
    port: 1998 // 自定义端口号
  },
  base: process.env.NODE_ENV === 'production' ? `/${repo}/` : '/',
  publicPath: process.env.NODE_ENV === 'production' ? `/${repo}/` : '/',
  
  // more config: https://d.umijs.org/config
});