首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 Github Actions 自动部署 Angular 应用到 Github Pages

前端项目,最主要的还是能够实际看到,因此考虑找个地方部署,因为自己的博客是部署github page 上的,并且这个项目也只是一个静态网站,所以这里同样选择使用 github page 同时,考虑到发布项目时...,虽然使用 github page 已经帮我们省略了拷贝文件到服务器上这一步,但是还是需要自己手动的敲命令来完成项目的发布,因为发布的流程很单一,所以这里选择通过 github action 这个自动化工具来实现程序的自动部署...ng deploy 命令来完成部署,插件会自动把打包生成的文件发布到 github 上,并创建一个 gh-pages 分支作为 github page 显示的站点 ng deploy --base-href...2.2、自动部署 在上面的操作中虽然实现了将程序部署github page,但是还是需要我们手动的通过 npm 命令来完成部署,接下来就进行改造,通过 github actions 来实现自动部署...仓库时,就会自动完成程序的发布部署 # This is a basic workflow to deploy angular app into github pages name: Deploy Github

1.4K10
您找到你想要的搜索结果了吗?
是的
没有找到

使用Github Action自动部署

但是有的项目往往需要经常性的改动,如果还是照着上面的方式进行部署的话。先不说这样操作的效率,操作个几次就想罢工了。并且上面这样操作的往往容易误操作。...介绍​ Github Actions 是 Github 提供的免费自动化构建实现,特别适用于持续集成和持续交付的场景,它具备自动化完成许多不同任务的能力,例如构建、测试和部署等等。...第二步是安装依赖与构建,yarn install和yarn run build 第三步是部署Github Page 上,使用的 action 是 peaceiris/actions-gh-pages...总结​ 从上面的演示便可看出 Github Actions 的强大,但其实我挺早之前就了解到它能做这些事情,但迟迟没有动手尝试一番,因为这些自动操作用人工也是能完成的。...也许当时的我认为,用人工所花费的时间远比自动操作的学习时间来的长,可又随着自己的个人应用增加,每次都需要手动发布,而此时前者的时间已远远大于后者,所以才会想去学习。

1.5K10

Github Actions Hexo 自动部署

,我有个浏览器插件每次发布都很繁琐,因此早就想研究一下自动化所以这次第一个念头也是自动化:Github Actions旧流程按照之前手动挡的流程是这样的清除缓存 hexo clean生成静态文件 hexo...g部署 hexo d(执行一次 git 推送)远程仓库 hooks 被触发,自动去网站根目录,git pull最后网站根目录拉取到文章,部署成功其中 3 之前你需要在本地手动执行的,而且重装或者换电脑意味着需要在远程服务器配置新的公钥新流程新的半自动挡解决了...生成静态文件部署!...私钥问题问题的关键是,你不但需要在 ~/.ssh/ 下创建私钥,还需要创建一个 known_hosts,记录已知的服务器 IP私钥创建流程,我是在我本地创建了一对密钥,把私钥复制出来放到仓库配置中图片工作流使用的时候就把它写入到文件...来写,比如现在图片而且依然也可以在本地写,如果换主题肯定还是要本地跑一下测一下的总之,爽到了其他补充为啥说是半自动挡呢,因为我感觉服务器部分也需要继续优化,不能通过 git hooks 的方式部署,这样的话迁移到另一台服务器还得配置一遍

41800

Jenkins集成Github自动部署

publish over ssh:用于ssh访问远程服务器(自动部署) git:拉取github代码 locale:中文汉化包 等待安装完毕,稍慢 ?...注意,如果Git没有展示配置说明没有安装Git插件 系统配置 我们来配置远程服务器信息,用于github代码拉取部署到指定的服务器. ?...构建应用 这时候我们如果需要构建maven应用并自动部署还需要安装以下两个插件Maven Integration plugin 用来构建maven的项目,一个是对容器依赖的插件;Deploy to container...勾选安装完成后重启Jenkins(空闲时) 构建maven应用 我这里创建了一个demo springboot项目 https://github.com/SAnBlog/demo 点击添加并填好github...自动部署,注意这里只能回调公网地址. ? 完整地址如下,浏览器手动执行也可以部署. http://192.168.31.247:8081/job/demo/build?token=demo ? ?

97360

使用 GitHub CI 云构建和自动部署

而第一个问题也可以使用 pnpm 管理减少依赖的体积。 问题是如何减少构建时间。解决方式:使用 GitHub 云构建,部署服务器复用云构建产物。...确定了目标之后,有以下几个需求需要解决: 构建完自动部署 部署服务器端摆脱 node_modules 的依赖 一般 node 应用构建使用 tsc、webpack 去打包,但是运行时依旧依赖 node_modules...需要注意的是,使用 ncc 打包之后,运行端和打包端运行的系统必须一致,比如 ncc 打包的系统是 Ubuntu,理论上运行构建产物的一方系统也必须是 Ubuntu。...zip 发布到 GitHub Release]) -- SSH 连接到服务器--> 4([执行部署脚本]) --> 5([下载构建产物解压]) --> 6([直接运行或使用 PM2 托管]) 从而很好的摆脱了...之后的部署脚本参考: https://github.com/mx-space/server-next/blob/master/scripts/deploy.js 完整的 GitHub flow 可以查看

57310

Github Actions Hexo 自动部署

,我有个浏览器插件每次发布都很繁琐,因此早就想研究一下自动化 所以这次第一个念头也是自动化:Github Actions 旧流程 按照之前手动挡的流程是这样的 清除缓存 hexo clean 生成静态文件...hexo g 部署 hexo d(执行一次 git 推送) 远程仓库 hooks 被触发,自动去网站根目录,git pull 最后网站根目录拉取到文章,部署成功 其中 3 之前你需要在本地手动执行的,...而且重装或者换电脑意味着需要在远程服务器配置新的公钥 新流程 新的半自动挡解决了 1-3,你只需要进行一次 git 提交 其他的事情交给 Github Actions 整个流程是 创建密钥,用于连接博客服务器...问题的关键是,你不但需要在 ~/.ssh/ 下创建私钥,还需要创建一个 known_hosts,记录已知的服务器 IP 私钥创建流程,我是在我本地创建了一对密钥,把私钥复制出来放到仓库配置中 工作流使用的时候就把它写入到文件...来写 而且依然也可以在本地写,如果换主题肯定还是要本地跑一下测一下的 总之,爽到了 其他补充 为啥说是半自动挡呢,因为我感觉服务器部分也需要继续优化,不能通过 git hooks 的方式部署,这样的话迁移到另一台服务器还得配置一遍

41810

VuePress + GitHub Actions 自动部署

当然有,我们可以利用 GitHub Actions 实现自动化构建发布代替手动操作,提高构建发布的效率。...GitHub Actions 允许开发人员编写构建、测试、发布等多种功能的脚本,在特定的条件下(如 push 变更到指定分支时),执行事先写好的脚本,自动完成构建发布等操作。...Events(事件) 事件是存储中触发 Workflow 运行的特定活动。如当有人创建 pull request,opens issue 或 push commit。...一个可以有多个 workflow 文件。GitHub 只要发现.github/workflows目录里面有.yml文件,就会自动运行该文件。 workflow 文件的配置字段非常多,详见官方文档。...构建完成后,然后通过 git 将变更推送至 Github。 因为我经常需要修改书籍内容,为了提高构建部署的效率,我将上述手动操作的过程通过 Github Actions 完成,实现自动化构建部署

24810

使用Github Actions自动部署Hexo

使用Github Actions自动部署Hexo 前言 使用Github Actions自动部署之后,可以脱离本地电脑,再也不用担心源码丢失。...新建私密仓库 首先需要在GitHub上新建一个私密仓库,仓库名称随意,注意不要使用README初始化仓库。...生成公私秘钥对 在mac的终端中执行: ssh-keygen -t rsa -C "Github 的邮箱地址" 之后生成的密钥默认存储在/用户/angushall/.ssh/目录下。...再新建一个.github隐藏文件夹,里面新建一个workflows文件夹,在workflows里面新建一个自动化的配置文件hexoCI.yml 其内容如下: # 自动化名称 name: Hexo Blog...博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议 本文永久链接是:https://goopher.tk/posts/64028.html

64020

使用github Action自动部署next项目

要实现的功能 之前用过Github的Webhooks做过自动部署,原理就是自己服务器上启动一个服务,对外暴露一个接口,每次代码push到github时,github服务器会调用你的接口,收到请求后再执行代码部署...这次决定换用Actions实现一个类似的功能,原理类似,代码push到github时,github服务器会执行你预设好的步骤,部署代码。...后来我们不通过ssh key 登录了 而使用password了 在下面的yml文件中有写 1.创建Secrets变量: 图片 设置好变量之后 开始编写我们的Action的执行脚本文件yml 图片...   runs-on: ubuntu-latest    steps:       - name: executing remote ssh commands                  # 使用...pull && npm install && npm run build && pm2 delete all && pm2 start npm --name "my-next" -- start 完事就可以自动触发了

67720

使用 GitHub Actions 实现博客自动部署

使用 GitHub Actions 实现博客自动部署 如果大家以前是用过静态博客,比如 Hugo、Hexo,可能配置过自动部署,也就是提交代码到源文件分支,自动生成静态文件提交到静态分支。...我看过很多同学部署网站,都是手动 FTP 推包,手动 ssh 连上服务器操作重启。这种方式一是操作烦琐,二是不推崇总是在生产环境人工操作,因为人工操作越多,越容易出错。...使用 GitHub Actions 自动化 实现代码提交的自动化工作流,要依靠持续集成(或者加上持续交付)服务。...这里用户名应该与你上一步操作使用的登录用户一致。 添加在这里的配置,将只对你可见,不用担心会泄露给他人。 编写工作流文件 好,准备工作都做好了,现在我们来写自动化工作流的配置。...image.png 总结 有 GitHub Actions 这个利器,除了自动部署,还可以做自动备份,自动 XXX……只要你想,你甚至能提交代码自动触发房间开灯。

60030

GitHub Actions 自动部署 Hexo 脚本

前言 网上虽然有很多通过 GitHub Actions 自动部署 Hexo 的教程,但都有各种各样的问题。 主要问题还是 Workflow 脚本没有写正确,比如插件部分。...步骤 1、生成密钥对(这个也不会的话,方法自行 Google) ssh-keygen -t rsa -b 4096 -f ~/.ssh/GitHub-actions-deploy 然后会获得一个公钥和私钥...hexo douban 插件,部署命令: hexo g && hexo douban && hexo deploy 可改为 hexo g -d 另外一个建议是,所使用的 theme 中的 主题目录 用...6、git push 文章写好后,不需要在本地构建,只需要 git push 到 GitHub 仓库即可自动部署。 其中部署方式在 Hexo 根目录的 _config.yml 中配置。...脚本配置 注意修改其中提到的几个地方 name: 自动部署 Hexo #on: [push] jobs: build: runs-on: ubuntu-latest strategy

52610

使用 GitHub Actions 实现博客自动部署

静态博客的部署都是基于文件,目标只是一个 Git 仓库,一切都比较自然。那么如果是喜欢折腾,使用了动态博客呢?这里就涉及到服务器远程登录了。下面介绍一下我使用的方法。...我看过很多同学部署网站,都是手动 FTP 推包,手动 ssh 连上服务器操作重启。这种方式一是操作烦琐,二是不推崇总是在生产环境人工操作,因为人工操作越多,越容易出错。...使用 GitHub Actions 自动化 实现代码提交的自动化工作流,要依靠持续集成(或者加上持续交付)服务。...这里用户名应该与你上一步操作使用的登录用户一致。 添加在这里的配置,将只对你可见,不用担心会泄露给他人。 编写工作流文件 好,准备工作都做好了,现在我们来写自动化工作流的配置。...总结 有 GitHub Actions 这个利器,除了自动部署,还可以做自动备份,自动 XXX……只要你想,你甚至能提交代码自动触发房间开灯。这些奇技淫巧,就留给读者自己去探索了。

27540

使用travis-ci自动部署github上的项目

一个使用yaml格式配置用于持续集成完成自动化测试部署的开源项目 官网:https://travis-ci.org/ 使用travis-ci集成vue.js项目 首先,您需要一个github账号...前往travis-ci官网 使用Github账号登录 ? 3. 登录成功回到用户中心 默认会同步一部分仓库,如果太多的话需要点击Sync account进行同步 ? 4....Github生成访问令牌 (即添加授权) 访问令牌的作用就是授权仓库操作权限 https://github.com/settings/tokens Github>settings>Personal...自动构建项目 修改完成,并推送到github后,就可以在travis-ci.org中看到项目开始构建了(以后每次推送代码到仓库后都将会自动构建项目) ? 构建完成日志 ? 构建完成。...在设置中可以看到默认已经将gh-pages分支部署到pages,访问https://用户名.github.io/metools/即可预览效果。 ?

1.1K10

Github Actions 自动部署 Hexo - wuuconixs blog

背景 昨天尝试了Cloudflare的pages功能,它可以识别一个vue工程文件,然后自动build,最后自动部署给你一个域名来访问,智能地令人害怕。...于是我想,如果github也能实现类似的操作该有多好,毕竟我github上还存着不少的vue项目。 这让我想起了7att1ce给我推荐过很多次的github actions。...直接部署到了github pages上。...项目地址:wuuconix/setu: Setu Index Project (github.com)。 在实现了vue项目的自动部署后,我便想着把博客也给自动部署了。...pages仓库接收到变化,pages自动执行更新操作(所以github pages 自带了一个action) 战术总结 现在博客直接放 github,测试了一下访问速度,感觉和放阿里云上没有区别

33240

Vuepress + GitHub Actions 实现博客自动部署

前言 正常我们利用 Vuepress 搭建一个文档博客之后,往往都是通过如下步骤来部署一篇博客: 首先写文章; 写完文章之后生成静态文件,这里一般使用的是 npm run build 命令,但也有使用...这时候我们就想了,有不有一种方法,能够帮我们自动构建静态文件然后部署Github Pages 上呢。刚好,Github 官方提供了这个一个工具:Github Actions。...利用它,我们就能够将重心转移到创作之后,每次创作之后推送到远程之后它就会自动后续工作,接下来我们就来看看如何利用 Github Action 实现自动部署我们的博客。...生成 Token 要部署 Actions,那么它就需要有能够操作我们仓库的权限,因此需要提前设置个人访问令牌(Github personal access)。...如果是绿色的,说明自动部署成功了,如果是红色,那就说明部署失败。这个时候我们可以点进去看看部署失败的日志信息。

1.3K20

基于 Github Actions 自动部署 Hexo 博客

前言 前不久使用了 Hexo 搭建独立博客,我是部署在我的腾讯云轻量应用服务器上的,每次都需要 hexo deploy 然后打包、上传、解压和刷新 CDN,非常麻烦。...如果 Hexo 博客是放在 OSS 存储里的,比如腾讯云 COS,可以不使用 Agent,直接通过 Github Actions 上传。...Hexo Deploy Agent Hexo 部署 Agent,基于 Github Actions 可实现完全自动部署 Hexo 博客,每次提交都会自动打包、部署、更新和刷新 CDN 缓存。...特性: Golang 编写,资源占用低,能适应低配服务器 支持 Github Action 或者 Jenkins 等自动化工具 通过 CURL 上传部署包 解压、动态更新网站文件...本地直接上传部署 用了两天,发现整个流程跑下来没问题,但是 Github Action Post 部署到到国内服务器还是很慢,所以写了个脚本,本地构建、打包、然后调用 Agent 接口上传,整个过程不到

90720
领券