---

登录注册写文章

首页下载APP会员IT技术

Github Action 部署博客到阿里云OSS

满远荣

Github Action 部署博客到阿里云OSS

满远荣

12019.10.25 20:25:07字数 1,253阅读 4,024

部署博客有很多选择，国内外都有很多服务可以用，各有各的优缺点：

	GithubPages	码云Pages	Netlify	Heroku	阿里云OSS
纯静态托管	是	是	是	否👍	是
CDN加速	否	否	是👍	否	是👍
访问速度	慢	快👍	一般	一般	很快👍
支持404重定向	否	是👍	是👍	是👍	是👍
自定义重定向	否	否	是👍	是👍	否

具体选择哪个，根据个人对博客的诉求进行选择。

• 访问速度快：优先选择阿里云(国内CDN加速)、其次是码云(国内服务器)
• 功能最强：选择Heroku，支持Node.js、PHP等后端

本文章要讲的是如何用 GitHub + Github Action + 阿里云OSS 部署博客
因为静态博客系统有很多选择，Jekyll、Hugo、Hexo等。这里选择Hexo

Github地址
https://github.com/manyuanrong/oss-blog-example

简书地址
https://www.jianshu.com/p/99952652b2dd

创建项目

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server 

开发和编写博客内容

这一块内容有很多文章讲解，请参考其他文章

提交代码

![[00_System/Attachments/28331d1723d363fea943cb3d7d9ce3ab_MD5.webp]]

image.png

代码提交之后并不会发生什么事情。只是保持小步提交的好习惯。接下来我们开始使用GitHub Action来做持续集成，生成静态页面。

开通并配置oss

去阿里云创建一个公共读权限的 Bucket，用来托管我们的静态网站。
选择香港区域是为了不用备案也能绑定自定义域名。

![[00_System/Attachments/728087da02b3977a5f11f59e57f0fe5a_MD5.webp]]

image.png

然后我们在阿里云控制台拿到一份 accesskeys。用于后面的远程部署文件到OSS上

![[00_System/Attachments/7866eabb98550d65c50bfb6bb702c707_MD5.webp]]

image.png

我们将拿到的 accesskeys配置到GitHub项目的 secrets 里面，后面会在工作流脚本中用来掉调用API上传文件到OSS上面。
保存在 secrets 里面，这样其他人就不能获取到你的 accesskeys ，保证安全。

![[00_System/Attachments/ae6efe183078e38e4105b339bcbbf92d_MD5.webp]]

image.png

编写 Github Action 持续集成脚本

1.创建持续集成配置脚本文件

# 使用mkdir创建目录(windows可以手动建）
mkdir -p .github/workflows
# 使用touch 创建配置文件，名称随意，后缀名为 ".yml" （window可以手动建立文件）
touch ci.yml 

workflows下面每个文件就是一个工作流，可以有多个，一般建一个就可以了。

2.编写脚本

# workflow的名称，会显示在工作流运行页面
name: MainWorkflow

# 工作流执行的契机：push表示每次push代码之后都会执行
on: [push]

jobs:
  # build job 我们用来做持续构建
  build:
    # 构建运行的环境
    runs-on: ubuntu-latest
    # 构建步骤
    steps:
    # 复用 actions/checkout@v1 action，拉取最新代码
    - uses: actions/checkout@v1 

关于 Action 的详细写法，可以参考官方文档
https://help.github.com/cn/github/automating-your-workflow-with-github-actions/about-github-actions

上面我只写了 actions/checkout 这个action。这是官方提供的action，我们直接复用就可以了。它的作用是拉取最新代码

由于我们使用了 Hexo ，因此我们需要使用一个action来安装配置Node.js环境。
我们可以去GitHub的市场上寻找别人写好的Action。
https://github.com/marketplace?type=actions

我们找到并加入一个叫 actions/setup-node 的action，按照文档我们将工作流脚本进行修改

name: MainWorkflow

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: "12.x" 

此时我们安装了Node.js 12，后面的步骤我们就可以开始执行Hexo的构建操作了。

我们将配置改成如下

name: MainWorkflow

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: "12.x"
    - name: Build Blog
      run: | npm install
        npm install -g hexo-cli
        hexo generate 

此时我们添加了一个步骤，用于安装node依赖，安装hexo命令行。最后生成静态页面。

现在我们已经有了生成的静态页面，只需要将它部署到我们的OSS上，我们可以使用 manyuanrong/setup-ossutil 这个action来部署我们的文件

name: MainWorkflow

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1
      with:
        node-version: "12.x"
    - name: Build Blog
      run: | npm install
        npm install -g hexo-cli
        hexo generate
    - uses: manyuanrong/setup-ossutil@v1.0
      with:
        # endpoint 可以去oss控制台上查看
        endpoint: "oss-cn-hongkong.aliyuncs.com"
        # 使用我们之前配置在secrets里面的accesskeys来配置ossutil
        access-key-id: ${{ secrets.ACCESS_KEY_ID }}
        access-key-secret: ${{ secrets.ACCESS_KEY_SECRET }}
    - name: Deply To OSS
      run: ossutil cp public oss://enok-blog/ -rf 

提交代码，查看Action运行情况

提交我们的代码，这个时候去项目的Action菜单下查看运行状态。等一会儿，你将能看到类似下图的情况，表示我们的工作流成功执行，并且将自动生成静态文件并上传到OSS上。

![[00_System/Attachments/52b51ecda15798bd507f080ce648febf_MD5.webp]]

image.png

我们可以去OSS上查看，确实上传成功了！

![[00_System/Attachments/8d25325bad4369e414b30a78d4e41968_MD5.webp]]

image.png

每个OSS Bucket都会分配一个二级域名。我们可以在地址栏上输入页面的路径进行访问啦

![[00_System/Attachments/fbc68206541880d70ab1da6eff6f8e19_MD5.webp]]

image.png

不过此时我们如果省略掉index.html的话，并不能正确访问到页面。这是因为我们的OSS还没有配置静态网站托管选项。

配置oss静态页面托管

在 oss 管理页面 找到 “基础设置” => “静态页面”

![[00_System/Attachments/938f7e34704c4fcd6bfbbc1149014fe2_MD5.webp]]

image.png

配置默认首页

这样我们可以省略index.html访问了

配置默认404页面。

这样当我们输入任何不存在的路径是依然能显示首页。这在于一些SPA单页应用来说很重要

---

恭喜，你已经完成了在OSS上部署博客的工作！你可以享受OSS在国内外飞速的CDN服务。还能享受OSS提供的各种图片处理服务（压缩图片、缩略图等）

当然，或许你会担心OSS收费的问题。但我告诉你，如果只是一个博客，除非真的很多人访问，否则几乎每个月都不会产生什么费用，远远达不到最低收费标准。。。相当于是免费使用的

当然，如果你有自己的域名，不妨在阿里云控制台和OSS管理面板上自己探索一下，配置自定义域名访问。以及HTTPS等等。

6人点赞

日记本

更多精彩内容，就在简书APP

“小礼物走一走，来简书关注我”

还没有人赞赏，支持一下

满远荣全栈开发者，野生程序员。目前是Deno项目Contributor

总资产2共写了1306字获得12个赞共5个粉丝

全部评论7只看作者

按时间倒序

按时间正序

![[00_System/Attachments/947dd27c771ce7c3757789d5b63b2594_MD5.webp]]

岑吾

4楼 2020.02.06 18:16

阿里oss现在需要备案的域名才可以当静态网页访问

赞 回复

![[00_System/Attachments/947dd27c771ce7c3757789d5b63b2594_MD5.webp]]

岑吾

2020.02.14 13:30

@满远荣 嗯，最近在用coding.net

回复

添加新评论

秋枫惋红

3楼 2019.11.25 19:30

请问你知道怎么通过github actions 部署到阿里云服务器上吗？而不是oss上。这个过程最大的难点在登录云服务器，以前我用gitlab是将gitlab-runner部署在本机运行 这样就可以通过服务器的authorized_keys来免密登录部署了

赞 回复

![[00_System/Attachments/2ddd6722da660da239bfa55dbc656dee_MD5.webp]]

雪之梦技术驿站

2楼 2019.11.16 17:55

大佬你好，按照你的步骤我也部署了静态博客，除了首页可以正常访问外，其他页面都是路径不对的，请问怎么配置或者能否解决？

赞 回复

![[00_System/Attachments/947dd27c771ce7c3757789d5b63b2594_MD5.webp]]

岑吾

2020.02.14 13:33

@满远荣 hexo可以修改permalink生成不需要index.html

回复

49525cf7c2ae

2020.06.20 17:58

你好，新手求教，这个地方你遇到过吗？
- name: Deply To OSS
run: ossutil cp public oss://enok-blog/ -rf
每次都是这里失败，Bucket换成自己的了，没有这个public文件夹呀
Error: stat pubilc: no such file or directory
##[error]Process completed with exit code 1.

回复

![[00_System/Attachments/37f09e4fb8a93735a0778f193ef65f1a_MD5.webp]]

爱吃鱼的小明

2021.03.09 16:15

iD是那个

回复

添加新评论

满远荣

总资产2

Deno中文社区

阅读 2,822

热门故事

闺蜜的一条朋友圈，结束了我和老公5年的婚姻

娘家拆迁分了两套新房，婆婆让我把房本写上小叔子的名？

前任一哭，现任必输

老婆偷偷拿30万给小舅子买豪车，被我一招“制服”

推荐阅读

本地开发时使用webpack-dev-server 快速搭建静态服务器并代理请求（附源码）

阅读 627

NginxWebUI–强大的nginx可视化配置工具

阅读 6,296

52 Spring Cloud Config入门

阅读 404

国内加速Github方案大全，总有一款适合你

阅读 1,257

SVN可视化管理工具：iF.SVNAdmin及如何通过http访问SVN

阅读 798

评论7

赞6

抽奖

6赞7赞

赞赏

更多好文×

拖拽到此处

图片将完成下载