将半自动化部署到GitHub Pages的经验分享

2023-10-12 14:12:55

前言

在项目开发过程中，我们需要将项目发布到线上，以便于其他人访问。GitHub Pages是一个非常方便的平台，可以让我们轻松地将项目发布到线上。但是，如果我们每次都需要手动部署项目，那就很麻烦了。因此，我们需要使用半自动化部署的方式，来减轻我们的工作量。

项目目录

在项目中，我们需要创建一个名为deploy.sh的脚本文件，该文件将负责项目的半自动部署。deploy.sh文件的内容如下：

#!/bin/bash

# 切换到项目目录
cd /path/to/project

# 构建项目
npm run build

# 将构建后的项目复制到GitHub Pages目录
cp -r build /path/to/github-pages-directory

# 推送项目到GitHub Pages
git push origin gh-pages

1.半自动部署发布

1.1 创建脚本deploy.sh文件

在项目目录中，使用命令touch deploy.sh创建deploy.sh文件。

touch deploy.sh

1.2 执行第一步的文件

执行命令chmod +x deploy.sh，赋予deploy.sh可执行权限。

chmod +x deploy.sh

执行脚本deploy.sh，开始半自动部署。

./deploy.sh

错误提示如下

cp: cannot stat 'build': No such file or directory

如何解决这个问题？

这个问题是由于项目没有构建成功导致的。我们需要先构建项目，然后才能将构建后的项目复制到GitHub Pages目录。

先上答案

在执行脚本deploy.sh之前，先执行npm run build命令构建项目。

npm run build

执行后输出结果如下：

> project@1.0.0 build /path/to/project
> webpack

Hash: 34523421

Version: webpack 4.46.0

Time: 332ms

Built at: 2023-04-28 10:23:45

         Asset       Size   Chunks             Chunk Names
0. bundle.js  414 KiB       0  [emitted]  main
         + 6 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 KiB). This can impact web performance.
- bundle.js: 414 KiB