title: 将Dumi自动部署到Github,构建自己的网站
date: 2022-09-29 16:37:41
tags: 
- Dumi
- React
- UmiJs
categories: 
- React

想拥有自己的网站但是苦于没有钱购买昂贵的服务器，为何不用github免费部署属于自己的网站，不管是组件库还是个人笔记...

本次案例使用Dumi作为演示Demo

将Dumi自动部署到Github,构建自己的网站

安装

// 下载脚手架
$ npx @umijs/create-dumi-app
# or
$ yarn create @umijs/dumi-app
​
// 安装npm包
$ npm install
# or
$ yarn
​
// 运行项目
$ npm run serve

启动后如图所示：

剩下的页面搭建就需要各位自己动手了...

部署

开发阶段的代码经过打包才可以部署到服务器，但是又不想重复性手动打包上传，这时就可以利用GitHub提供的Actions功能了

在根目录新建.github/workflows/ci.yml文件：

请根据情况自行编写

不要一味的复制粘贴，请根据应用场景修改代码

# 项目名
name: dumi book test
​
# 只有在main分支发生push事件时触发
on:
  push:
    branches:
      - main
​
# 工作流
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 # 你打包后存放的文件

修改.umirc.ts文件：

文件配置项肯定不止这些，这些仅仅是需要的

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}/` : '/',
  
  // 更多配置项config: https://d.umijs.org/config  
});

提交

在整个项目都准备好之后就要上传到github仓库了：

# 初始化git
git init
​
git add .
​
git commit -m "首次提交"

你的项目源代码上传在main主分支，而打包后的在build分支。可以进入看执行过程：

设置Pages

在Setings设置Pages，设置在分支部署服务，选择build分支

生成一个网址，就是你的最终网址：