ci.yml好了
yml在这个文件中，我们要做的事情还是打包以及部署
name: Build and Deployon: # 监听 main 分支上的 push 事件push:branches:- mainjobs:build-and-deploy:runs-on: ubuntu-latest # 构建环境使用 ubuntusteps:- name: Checkout# 将代码拉到虚拟机uses: actions/checkout@v2.3.1with:persist-credentials: false- name: Install and Build # 下载依赖 打包项目run: |npm installnpm run build- name: Deploy# 部署uses: JamesIves/github-pages-deploy-action@v4.3.3with:branch: static-pages # 部署后提交到的分支folder: dist # 这里填打包好的目录名称我们把这个文件提交上去，它就会在提交代码后自己完成打包及部署的工作 。
自动化部署
文章插图
文章插图
在代码提交上去后，它会按照我们工作流的步骤进行打包及部署
文章插图
并且上面可以查看整个工作流的日志，方便排查问题
文章插图
部署完访问地址还是一样https://bettersong.github.io/nanjiu
到这里我们基于
GitHub Actions实现的自动化部署流程就完成了，现在我们在本地修改完代码后就只需要将代码推送到远程，就能够实现自动打包部署了 。最后喜欢的同学欢迎点个赞呀～
原文首发地址点这里，欢迎大家关注公众号 「前端南玖」，如果你想进前端交流群一起学习，请点这里我是南玖，我们下期见！！！
经验总结扩展阅读
- 冰箱1至7档哪个最冷 如何使用冰箱更省电
- 12306人脸识别无法核验怎么办
- 全副捂装黑科技防晒靠谱吗 如何看待防晒衣宣称使用玻尿酸面料
- 冰箱是1冷还是5冷 冰箱有辐射吗
- 秋季冰箱温度调到几度为好 冰箱使用注意事项
- 冰箱秋天开几档最好 如何正确使用冰箱
- oled电视机的使用寿命多久 真的只有5000小时吗
- 海尔冰箱的使用寿命有多长 如何保养冰箱
- Vue前端框架基础+Element的使用
- 手记系列之二 ----- 关于IDEA的一些使用方法经验