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:
- 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: build # 你打包后存放的文件
修改.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分支
生成一个网址,就是你的最终网址: