使用Github Actions将Vue项目部署到Github Pages

最新推荐文章于 2024-09-26 08:13:56 发布
最新推荐文章于 2024-09-26 08:13:56 发布
阅读量553 收藏 2
点赞数
分类专栏： 工具 文章标签： github ci/cd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43783363/article/details/109732805
版权

GitHub Actions 是 GitHub 的持续集成服务，是一个非常强大的功能，用它可以实现很多自动化功能。现在我们来使用Github Actions将我们做好的Vue项目部署到Github Pages上。

本项目源码：Tuzilow/github-actions-demo

Github Actions是什么？

持续集成通常由很多操作组成，比如运行单元测试、登录远程服务器、打包代码等等，Github将这些操作称为actions。
这些actions在不同项目中也是类似甚至是完全相同的，是完全可以共享的。而Github就根据这个特点创建了一个actions市场，可以发布自己的actions和使用其他人的写好的actions。

基本概念

  • workflow：持续集成一次运行的过程，即一个工作流程
  • job：任务，一个工作流程由一个或多个任务组成
  • step：步骤，每个任务由多个步骤组成，逐步完成
  • action：动作，每个步骤可以执行一个或多个动作

创建一个Vue项目

使用Vue CLI创建一个Vue项目

vue create github-actions-demo
cd github-actions-demo

在项目根目录下创建一个vue.config.js，修改publicPath为将要发布的Github Pages的子路径，比如发布后的地址https://tuzilow.github.io/github-actions-demo/，那么publicPath就要设置为/github-actions-demo/

module.exports = {
   
  publicPath:
最低0.47元/天 解锁文章
如何通过 GitHub Actions 使用 SSH 自动化部署到阿里云 ECS 实例
吃面不喝汤的博客
09-28 1123
通过 GitHub Actions 和 SSH 自动化部署，可以显著提高你的开发效率和部署的可靠性。本文介绍了如何生成 SSH 密钥、将公钥添加到阿里云 ECS 实例、将私钥添加到 GitHub Secrets，以及编写 GitHub Actions 工作流来实现自动化部署。希望这篇文章对你有所帮助！
Vite + Vue3 部署 GitHub
paopao_pop的博客
05-22 678
因为在 yml 文件中是监控 push 事件，所以会自定发布。新建文件夹 .github 然后再建一个文件夹 workflows。因为静态资源是可以部署到 GitHub 上，自己顺便学习部署网站。在 Actions 里可以查看进度，成功以后就会生成一个地址。因为我使用的是 Vite 工具，官方有提供相应 Demo。打开项目 GitHub 地址，点击 Settings。记录自己的第一个 GitHub 部署项目。新建文件 main.yml 文件。直接使用官方文档 demo。
GitHub Pages 配合 GitHub Actions 实现文档网站自动部署
weixin_43487782的博客
12-12 1987
最近在用 docusaurus 做一个文档网站，通过 GitHub Pages 进行部署，每次部署的时候，需要在本地执行构建命令，然后将构建产物提交到 GitHub 上面，比较麻烦。因此这边用了 GitHub Action 实现持续集成。 持续集成由很多操作组成，比如拉取代码、执行测试用例、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。 我们先来了解一下一些术语： workflow（工作流程）：持续集成一次运行的过程，就是一个 workflow。 job（任务）：一
Gitee 如何自动部署博客 Pages？推荐用这个GitHub Actions!
u012384510的博客
12-23 1106
大家好，我是若川。最近组织了源码共读活动，感兴趣的可以点此加我微信 ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》...
VuePress2.0 + Github Actions部署到Github Pages教程
weixin_43019353的博客
05-19 891
选择权限，看不懂不懂全勾Read and write。就代表构建失败，可点进去查看原因。这代表成功，看到红色的。构建成功会发现多了个分支。
vue项目使用github actions自动部署
潇蓝诺依的博客
09-14 1542
文章目录1.Personal access tokens2.项目设置3. 配置项目路径4. 配置文件最后 1.Personal access tokens 将token复制下来，下一步会用到。 2.项目设置 将名字保存下，后面会用到 3. 配置项目路径 package.json 配置 homepage //"homepage": "https://[用户名].github.io/[仓库名称]", "homepage": "https://xiaolannuoyi.github.io/vue-r
使用github的pages配合action自动部署vue项目
12-13 1484
如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。GitHub 做了一个，可以搜索到他人提交的 actions。另外，还有一个的仓库，也可以找到不少 action。
探索GitCode Actions：一键部署静态页面的高效工具
gitblog_00030的博客
04-18 649
探索GitCode Actions：一键部署静态页面的高效工具 deploy-pages GitHub Action to publish artifacts to GitHub Pages for deployments 项目地址: https://gitcod...
学习记录之 github部署vue项目
弋码的博客
06-01 672
使用github部署vue项目
04.使用 github actions+docker 自动部署前后端分离项目 zhontai (.net core+vue)
我不懂，可我不傻
07-18 969
Github Actions是什么？是 GitHub 提供的一种持续集成/持续部署（CI/CD）工作流程自动化服务,助力项目的自动化构建、测试和部署。依托于平台，本文将分享使用 GitHub Actions 完成对一个.Net Core+Vue 的前后端分离项目 zhontai 的构建，并使用 docker 部署到云服务器(阿里云)
使用 Github Actions 工作流自动部署 Github Pages
weixin_50367873的博客
10-16 1871
首先在github上创建仓库，如果建立的仓库名称是username.github.io，则最后访问的地址username.github.io/。首先job里配置运行这个脚本需要的虚拟机环境，这个虚拟机环境由github提供，可用的包括windows、linux、macos等环境，具体看官方文档。actions顾名思义就是一堆动作，是一个持续集成服务，持续集成包含了拉代码、运行测试、编译代码、登录远程服务器，发布到第三方服务等等的操作，GitHub将这些操作称为actions。
2023年最新 Github Pages 使用手册
热门推荐
SiShen654的博客
08-24 1万+
GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，（可选）通过构建过程运行文件，然后发布网站。可以在GitHub Pages 示例集合中看到 GitHub Pages 站点的示例。可以有两个方式：仓库内创建 404.md，但是开头需要配置 yml 格式------...仓库内创建 404.html
使用Github-Actions实现在Github Pages上自动部署SPA项目
fafafafa_fa的博客
05-21 550
每次提交代码之后都需要手动打包更新部署，这样的反复操作过于繁琐。github-actions便可以解决上述问题。通过创建工作流并在其中添加对应的指令，将触发条件设置为推送代码，我们就可以实现自动化部署项目，只需要进行代码的推送即可。指令需要写哪些内容？1. 安装npm。后续指令要用到npm2. 执行npm install。安装项目中用到的依赖3. 执行npm run build。打包项目。
Vitepress部署到GitHub Pages，工作流
weixin_73480865的博客
03-31 1546
- uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释。# - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释。执行 npm run docs:build，npm run docs:preview，生成dist文件。# 使用 `master` 分支作为默认分支，请将其更改为 `master`# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成。# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列。
GitHub Actions 部署到 GitHub Pages 教程
最新发布
gitblog_00801的博客
09-26 597
GitHub Actions 部署到 GitHub Pages 教程 ghaction-github-pages GitHub Action to deploy to GitHub Pages 项目地址: https://gitc...
只用Github免费功能，上线仿抖音开源网站，Vue.js是什么？使用Github Action+Pages免费发布网站
u014752461的博客
07-14 1080
本次使用的项目是近期Github上爆火的一个项目，名字就叫抖音，已经有8,000多的star。作者使用了最新的Vue技术栈，模仿了抖音移动端的短视频效果，有媲美原生APP的丝滑体验。项目地址：GitHub - zyronon/douyin: Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on MobileVue是一个很流行的js框架，用于构建前端UI。
Github actions 部署vue项目
懒牛不爱梳毛
12-24 4157
如果你本着show me the code的原则，想把自己写的Vue项目拿出来让大家看看。如果你不想花大把的银子去给马爸爸买个1个核1G内存1M带宽的云服务器。那你还在等什么，现在就来薅巨硬爸爸的羊毛吧！！！ 关于 actions actions是个什么东西呢，其实他就是github的CI/CD工具，如果你用过gitlab的runner那你对CI/CD这个概念肯定不会陌生。 如果你对CI/CD没啥...
使用 GitHub Actions 自动部署 Hexo 博客到 GitHub Pages
Star's Tech Blog
07-19 1431
前言 最近，看到网上有很多人开始使用 GitHub Actions 进行项目的持续集成（CI）以及持续部署（CD）。于是，我也心血来潮，开始使用 GitHub Actions 来进行个人博客的自动部署。不得不说，GitHub Actions 真香！ 之前，我部署 Hexo 博客时，先通过 hexo g 将写好的 Markdown 文件转化为 HTML 文件，然后再使用 hexo d 把生成的 public 文件推送到 Github 仓库中，然后又使用 git 命令将 Hexo 博客开发源码推送到仓库的另一个
使用Github Actions功能实现Vuepress项目push后自动部署到Github Page
Mybells
12-26 2565
利用github上的Github Actions功能实现vuepress博客项目推送后自动发布到Github Page上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值