FØund404
0%

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

发表于 更新于 分类于

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

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

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

安装

1
2
3
4
5
6
7
8
9
10
11
12
// 下载脚手架
$ npx @umijs/create-dumi-app
# or
$ yarn create @umijs/dumi-app

// 安装npm包
$ npm install
# or
$ yarn

// 运行项目
$ npm run serve

启动后如图所示：

image-20220929173738357

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

部署

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

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

请根据情况自行编写

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 项目名
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文件：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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仓库了：

1
2
3
4
5
6
# 初始化git
git init

git add .

git commit -m "首次提交"

image-20220929173505885

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

image-20220929203550264

设置Pages

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

image-20220929203717333

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

image-20220929203816825