GitHub Actions 实现自动部署静态博客

简介: 《网站部署》系列

前言

我前面 vuepress搭建了一个静态博客,挂在了Github pages和Coding pages上面。

coding pages在国内的访问速度比github pages要快很多,而且还可以被百度收录。

一开始的部署方式是使用sh部署脚本把代码提交到这两个平台的仓库分支,虽然已经很方便了,但是我还想把博客未打包的源码提交到Github主分支上。这就需要我操作两次命令,我就想能不能只需要一次操作就可以同时把源码、部署代码一次性提交到两个平台呢?

实现

在了解GitHub Actions最近(2019.12)刚正式发布了之后,尝试使用它发现能够满足我的需求。GitHub Actions 入门教程

首先,需要获取token,后面会用到。获取方法:github获取token官方文档、coding获取token官方文档

然后,将这两个token同时储存到github仓库的Settings/Secrets里面。变量名可以随便取,但是注意要和后面的ci.yml文件内的变量名一致,这里取的是ACCESS_TOKENCODING_TOKEN

GitHub Actions 的配置文件叫做 workflow 文件,存放在代码仓库的.github/workflows目录。

workflow 文件采用 YAML 格式,文件名可以任意取,但是后缀名统一为.yml,比如ci.yml。一个库可以有多个 workflow 文件。GitHub 只要发现.github/workflows目录里面有.yml文件,就会自动运行该文件。

我的ci.yml文件:

name: CI
# 在master分支发生push事件时触发。
on: 
  push:
    branches:
      - master
jobs: # 工作流
  build:
    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps: 
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式:userName/repoName。作用:检出仓库,获取源码。 官方actions库:https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用:安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: run deploy.sh # 步骤3 (同时部署到github和coding)
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
          CODING_TOKEN: ${{ secrets.CODING_TOKEN }} # 腾讯云开发者平台(coding)私密token
        run: npm install && npm run deploy # 执行的命令  
        # package.json 中添加 "deploy": "bash deploy.sh"

这个配置文件会在我push提交代码到主分支时触发工作,运行环境是ubuntu-latest,工作步骤:

  • 一,获取仓库源码
  • 二,安装nodejs,打包项目有用到nodejs
  • 三,把token设置到环境变量,安装项目依赖,并运行deploy.sh文件,

ACCESS_TOKE 和 CODING_TOKEN 都是保存在github仓库的Settings/Secrets位置的私密变量,仓库代码中可以通过<secrets.变量名>来获取,保证了token的私密性。

再来看看将要被运行的deploy.sh部署代码:

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm run build # 生成静态文件
cd docs/.vuepress/dist # 进入生成的文件夹
# deploy to github
echo 'blog.xugaoyi.com' > CNAME
if [ -z "$GITHUB_TOKEN" ]; then
  msg='deploy'
  githubUrl=git@github.com:xugaoyi/blog.git
else
  msg='来自github action的自动部署'
  githubUrl=https://xugaoyi:${GITHUB_TOKEN}@github.com/xugaoyi/blog.git
  git config --global user.name "xugaoyi"
  git config --global user.email "894072666@qq.com"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github
# deploy to coding
echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME  # 自定义域名
if [ -z "$CODING_TOKEN" ]; then  # -z 字符串 长度为0则为true;$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量
  codingUrl=git@git.dev.tencent.com:xugaoyi/xugaoyi.git
else
  codingUrl=https://xugaoyi:${CODING_TOKEN}@git.dev.tencent.com/xugaoyi/xugaoyi.git
fi
git add -A
git commit -m "${msg}"
git push -f $codingUrl master # 推送到coding
cd -
rm -rf docs/.vuepress/dist

这个文件使用Shell命令写的,它会先运行打包命令,进入打包好的文件,创建一个自定义域名的CNAME文件(如果你没有自定义域名可去掉这个命令),判断是否有token环境变量,如果没有说明是在本地自己的电脑上运行的部署,使用ssh代码仓库地址,如果有token环境变量,说明是GitHub Actions自动触发的部署,此时使用的是可以通过toKen来获取代码提交权限的提交地址。最后通过git命令提交到各自的仓库,完成部署。

提示:

  • Shell 可以获取到环境变量。
  • 我想给两个平台上部署的博客不一样的自定义域名,因此做了分开创建CNAME文件,分开提交。

至此,我前面提到的需求就实现啦,只需要把源码push到github仓库这一个步骤,后面的博客打包、部署到github和coding等工作都由GitHub Actions来自动完成。

如下你想查看部署日志,你可以到github仓库的Actions这一项查看。

相关文章

《GitHub Actions 定时运行代码:每天定时百度链接推送》

相关文章
|
4月前
|
JavaScript API 开发工具
使用GitHub Actions自动发布electron多端安装程序
使用GitHub Actions自动发布electron多端安装程序
82 8
利用 GitHub Actions 自动化你的软件开发流程
在现代软件开发中,自动化是提升效率与质量的关键。GitHub Actions 作为 GitHub 的强大自动化工具,允许你在仓库中自动执行多种任务,如测试、打包、部署代码及自动合并 Pull Requests。本文介绍了 GitHub Actions 的核心概念、设置方法及其实用示例,帮助你快速上手并优化开发流程。通过 YAML 文件定义的工作流程可显著提高工作效率和代码质量。
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是由 GitHub 提供的自动化工具,可让你在仓库中触发和执行自动化工作流程,如自动运行测试和部署应用。其核心概念包括工作流程(定义在 YAML 文件中的一系列自动化步骤)、作业和步骤。本文将指导你如何设置和使用 GitHub Actions,并提供实用的自动化示例,帮助你提高开发效率和代码质量。通过简单的配置文件,你可以实现自动运行测试、部署应用甚至自动合并 Pull Requests。
|
5月前
|
开发者
利用 GitHub Actions 自动化你的软件开发流程
在快速发展的软件开发环境中,自动化对于提升效率与质量至关重要。GitHub Actions 作为一款强大的工具,能帮助开发者实现从自动运行测试到部署应用等工作的自动化。本文详细介绍了 GitHub Actions 的核心概念、设置方法及实际应用示例,如自动测试、部署和合并 Pull Requests,助力提升开发流程的自动化水平。
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是 GitHub 提供的自动化工具,可在仓库中触发和执行工作流程,包括自动运行测试、部署应用等。其核心概念包括工作流程(Workflow)、作业(Job)和步骤(Step),均定义在 YAML 文件中。本文将指导你如何设置和使用 GitHub Actions,并提供自动运行测试、部署应用及合并 Pull Requests 的示例,帮助提高开发效率和代码质量。
|
6月前
|
Java Spring 传感器
AI 浪潮席卷,Spring 框架配置文件管理与环境感知,为软件稳定护航,你还在等什么?
【8月更文挑战第31天】在软件开发中,配置文件管理至关重要。Spring框架提供强大支持,便于应对不同环境需求,如电商项目的开发、测试与生产环境。它支持多种格式的配置文件(如properties和YAML),并能根据环境加载不同配置,如数据库连接信息。通过`@Profile`注解可指定特定环境下的配置生效,同时支持通过命令行参数或环境变量覆盖配置值,确保应用稳定性和可靠性。
93 0
|
6月前
|
Devops 持续交付 开发者
.NET自动化之旅:是Azure DevOps还是GitHub Actions能够打造完美的CI/CD流水线?
【8月更文挑战第28天】在现代软件开发中,持续集成(CI)与持续部署(CD)是提升代码质量和加速交付的关键实践。对于 .NET 应用,Azure DevOps 和 GitHub Actions 等工具可高效构建 CI/CD 流水线,提升开发效率并确保软件稳定可靠。Azure DevOps 提供一站式全流程管理,支持 YAML 定义的自动化构建、测试和部署;GitHub Actions 则以简洁灵活著称,适用于 .NET 项目的自动化流程。选择合适的工具可显著提高开发效率并确保高质量标准。
46 0
|
6月前
|
数据采集 JSON 小程序
零成本 API 服务搭建,用 GitHub Actions 自动爬取文章?
本着将成本降到最低,我目前做的应用或小程序都是单机的,也就是不用请求接口,只要一上架就没有任何支出。但是写死的数据毕竟有限,应用的内容单一无法紧跟时事热点,每次打开一个样,自然就没有留存。遇到有错字啥还要更新版本,那有没有方法既能丰富应用内容,又不用增加成本呢?
54 0
|
8月前
|
存储 应用服务中间件 持续交付
使用GitHub Actions和Nginx实现自动化部署
使用GitHub Actions和Nginx实现自动化部署
170 4
|
9月前
|
存储 安全 Serverless
用 Github Actions 自动部署阿里云函数计算 FC
介绍了如何配置阿里云函数计算(FC)与GitHub Actions集成以实现自动部署。首先在阿里云创建函数,然后在项目根目录创建`s.yaml`文件配置Serverless Devs。接着在GitHub仓库中设置 Secrets 存储阿里云账号信息,并创建名为`aliyun-fc-deploy.yaml`的工作流文件来定义GitHub Actions。当代码推送到`master`分支时,Actions会自动部署到函数计算。最后,成功配置后,提交代码会触发自动部署,并可在GitHub Actions和阿里云控制台查看部署状态。
702 3

热门文章

最新文章