一文说清楚怎么在github上部署前端项目

背景

作为一个名合格的前端码仔，辛辛苦苦把静态页面写好了，领导或者某些人想要看看你的页面效果（也可以是一个demo），我们一般的做法可能是直接在自己的电脑上启动项目，然后以本地局域网网址的形式分享出去，但是这种做法的弊端是非常明显--如果不在一个局域网就玩不转了，还有最重要的是，无形中没有了装逼的机会（我可以部署网址让你在任何地方都能访问我的页面），哈哈~~~

当然，以上只是一种场景之一，有时候我们想搞个自己的小网站（可能不需要服务器或者一点点不大的后台支持就行）或者博客，这时就可以将我们的前端项目免费部署GitHub上了。。。这就是所谓的github pages提供的一个小可爱。。。

项目基本配置

用vue2.6+和vue cli3.0+做的一个前端项目，vue.config.js配置如下：

//项目生产环境打包的资源输出到data-view目录（其实这里data-view也是我的项目名称，这样方便管理）
const prodDir = 'data-view';
const prodSetting =
    process.env.NODE_ENV === 'production'
        ? {
              publicPath: `/${prodDir}`,
              outputDir: `${prodDir}`,
          }
        : {};
module.exports = {
    // transpileDependencies: ['vue-echarts', 'resize-detector'],
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    'font-size-sm': '13px',
                    'font-size-md': '15px',
                    'font-size-lg': '17px',
                    'goods-action-button-danger-color': '#7232dd',
                    'goods-action-button-warning-color': '#3eaf7c',
                    'background-color': '#0D1B49',

                    red: '#00BFFF',
                    'text-color': '#949FD5',
                    'dropdown-menu-height': '38px',
                    'dropdown-menu-background-color': 'transparent',
                    'dropdown-menu-box-shadow': 'none',
                    'dropdown-menu-title-active-text-color': '#00BFFF',
                    'dropdown-menu-option-active-color': '#00BFFF',
                    'cell-background-color': '#0D1B49',
                    'cell-vertical-padding': '8px',
                    'dropdown-menu-title-font-size': '14px',
                    'grid-item-content-background-color': '#1C2A5A',
                },
            },
        },
    },
    productionSourceMap: false,
    ...prodSetting,
};

上传项目到github

在github上新建仓库，如：data-view:

上传项目到仓库，常规的git操作，无需赘述。默认是master分支（据说后面github为了配合美国黑人运动即将要将master改为main。。。）

配置自动化部署脚本

在项目的根目录下新建deploy.sh文件，配置文件内容如下：

# deploy.sh
# 错误时停止
set -e

# 1、打包
yarn build

# 2、进入目标文件夹，这里跟项目打包输出的文件夹相同（如果项目中不修改默认为：dist）
cd data-view

# 3、以下命令是将打包输出的所有文件提交到本地仓库
git init
git add -A
git commit -m 'deploy'

# 4、将打包出的所有文件push到github远程仓库data-view的gh-pages 分支，如果远程没有这个分支也不要紧，会自动创建
git push -f git@github.com:phonet/data-view.git master:gh-pages
cd -

执行脚本

// mac环境命令，windows请Google怎么执行bash命令
bash depoly.sh

成功截图：

查看部署的url地址：

在github项目视图中,找到setting: 然后找到GitGub Pages,如下图：访问：phonet.github.io/data-view/ 看到部署成功了。

总结

这就是所谓的github pages，除了静态页面之外，还能部署带接口的页面，在此不多说了。具体适用于哪些场景，可以自己慢慢去体会吧。反正我觉得主要是自己想部署些页面玩玩。。。

以上项目是vue项目的部署，react的同理。下一步，如果觉得访问github网速过慢，可以将github上的东东同步到国产的gitee上，具体请看：blog.csdn.net/Marco_hui/a…