腾讯云 cos 桶 - 标签 - 菠菜眾長

Hugo 使用 GitHub Actions 部署到 GithHb Pages 和腾讯云 cos 桶

Lruihao — Mon, 04 Oct 2021 23:46:49 +0800

解決痛點

Github Actions 真是靜態博客的福音，有了它 hugo, hexo 等博客構建過程可以丟給 Github 的服務器幫我們做了。
也就是説實現了在線寫靜態博客的需求。

準備

工作流程涉及到兩個倉庫和一個 cos 桶，例如：

Lruihao/hugo-blog # Blog source repository

Lruihao/lruihao.github.io # GitHub pages repository

blog-1256932288 # COS bucket

Github Actions

創建 workflows 任務

創建 hugo-site/.github/workflows/deploy.yml, 這個文件會寫一些命令告訴 Github 在我們提交源碼的時候，它要幫我們做哪些事情。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


name: Auto Deploy hugo
on: [push]
jobs:
  Explore-GitHub-Actions:
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository code
        uses: actions/checkout@v2
        with:
          submodules: recursive # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: latest
          extended: true
      - name: Build Hugo static files
        run: hugo --minify
      - name: Deploy to Github Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.GP_DEPLOY_KEY }}
          external_repository: Lruihao/lruihao.github.io
          publish_branch: main
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }}
      - name: Install coscmd
        run: sudo pip install coscmd
      - name: Configure coscmd
        env:
          COS_SECRET_ID: ${{ secrets.COS_SECRET_ID }}
          COS_SECRET_KEY: ${{ secrets.COS_SECRET_KEY }}
          COS_BUCKET_NAME: blog-1256932288 # Change for yourself
          COS_BUCKET_REGION: ap-chengdu # Change for yourself
        run: coscmd config -a $COS_SECRET_ID -s $COS_SECRET_KEY -b $COS_BUCKET_NAME -r $COS_BUCKET_REGION
      - name: Deploy to COS Bucket
        run: coscmd upload -r -s --delete -f public/ /

配置 Github Pages 密鑰

為了讓 Lruihao/hugo-blog 提交代碼后自動部署到 Lruihao/lruihao.github.io, 需要生成一對 ssh key.

1
2
3
4


ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
# You will get 2 files:
# gh-pages.pub (public key)
# gh-pages     (private key)

打開 Lruihao/hugo-blog 倉庫的 settings, 再点击 Secrets, 然後添加 private key, name 为 GP_DEPLOY_KEY
打開 Lruihao/lruihao.github.io, 点击 Deploy keys, 添加 public key, name 隨意，Allow write access 一定要勾上，否則無法提交

配置 COS 密鑰

打開 Lruihao/hugo-blog 倉庫的 settings, 再点击 Secrets, 然後添加 COS 桶的 secret_id 和 secret_key:

COS_SECRET_ID
COS_SECRET_KEY

至此，Github Pages 和 COS 都已經可以通過 Github Actions 自動部署了，有部署記錄后，
打開 Lruihao/hugo-blog -> Actions 可以看到構建過程和結果，構建失敗也會收到 Github 發給你的郵件。

COS 自動同步（備用）

本小節內容和 Github Actions 無關，僅作為 COS 備用上傳方式。

COSBrowser

下載 COS 官方軟件 COSBrowser
點開右上角工具箱
選擇文件同步
選擇本地文件夹 eg. hugo-site/public
選擇存储桶目录
同步类型：單次同步、自動同步、定時同步

同步前先執行 hugo 構建命令，eg. hugo --minify
有 Github actions 選單次同步就好，在 Github 不好用時可用。

利用腾讯云为静态页面添加“动态”相册

Lruihao — Sun, 24 Nov 2019 10:52:34 +0000

信息

cos 桶相册，终于！！终于来了！！，idea 来自 [兰州小红鸡 - 给 hexo 静态博客添加动态相册功能]，
功能虽好，但是还是先友情提示！
开放 API 是一个很危险的操作，意味着你的 cos 桶里面的所有资源包括目录结构都暴露的整个世界中，所以建议不要放一些比较私密的照片，保护自己的隐私，提防不良用心之人。下面就开始吧！

创建腾讯云 cos 存储桶

就创建一个 COS 就好了！有几点注意事项：

权限设置为共有读私有写
policy 权限设置整个桶的读操作
跨域访问 CORS 设置，自己随意

上传照片

首先我这个 cos 相册，相册分类就是文件夹分类，所以 cos 桶里面先新建不同的文件夹，文件夹名称就是相册名称，每个相册里面需要放置一张名称为**“封面.jpg”**的图片作为该相册的封面。

上传工具

COSBrowser GUI 工具，桌面/移动版【官方、推荐】
COSCMD 命令行工具【官方】
PicGo 图床上传工具【第三方、推荐】

食用方式

cos album 相册源码下载地址，别忘点赞哈 http://github.com/Lruihao/cos-album

首先，下载源码，引入 cos-album.css 和 cos-album.js
然后，在你的 js 中 new 一个 Cosalbum 对象 ( xmlLink 后不需要添加/)

Step1

1
2


<link rel="stylesheet" type="text/css" href="cos-album.min.css?v=1.1.2">
<script type="text/javascript" src="cos-album.min.js?v=1.1.2"></script>

Step2

1
2
3
4
5
6
7
8


<script type="text/javascript">
  new Cosalbum({
    'xmlLink': 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
    'prependTo': '.cos-album',
    'viewNum': 8,
    'imgUrl': '//img.lruihao.cn'
  });
</script>

Params

param	type	default	description
xmlLink	String		需要解析的騰訊云 COS 桶 XML 鏈接
prependTo	String	‘body’	可選解析相冊到某個節點
viewNum	Number	4	每個相冊顯示的照片數目
copyUrl	String	href	CDN 链接，雙擊複製 URL Since: 1.1.6
imgType	String	[‘jpg’, ‘jpeg’, ‘png’, ‘gif’, ‘svg’]	图片類型 Since: 1.1.6
videoType	String	[‘mp4’, ‘mp3’, ‘avi’, ‘mov’, ‘qt’]	視頻類型 Since: 1.1.6

viewport 视个人情况添加。
hexo 中使用时 css 和 js 都需要做适当调整，配合加密功能使用等等，这里不再展开。
注：代码设定不加载根目录文件，所以可以利用静态服务把源码部署在根目录，配合 PicGo、COSBrowser 上传来搭建个人图床。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21



<html>
  <head>
    <meta charset="UTF-8" />
    <title>cos-albumtitle>
    
    <link rel="stylesheet" type="text/css" href="cos-album.css" />
    <script type="text/javascript" src="cos-album.js" defer>script>
  head>
  <body>
    <script type="text/javascript">
      new Cosalbum({
        xmlLink: 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
        prependTo: '.cos-album',
        viewNum: 8,
        copyUrl: '//img.lruihao.cn'
      });
    script>
    
  body>
html>

cos-album demo

changelog

2020-9-28 22:46
1. 升級：相冊封裝成類，可以更方便 new 出來
2. 優化：相冊圖片樣式優化
2019-11-24 10:52:34 修改整理了一下代码，分割功能为函数，并写了注释，更加方便伸手党!

利用腾讯云对象存储 COS 桶托管 hexo 博客

Lruihao — Tue, 22 Jan 2019 14:57:08 +0000

本以为 coding pages 与腾讯云合作后会更好，没想到正是这种初期 bug 不断，速度也是非常慢。比 gitee, 甚至 github 都要慢很多了。所以决定放弃 coding 了，本想挂到云服务器上，但是这个云服务器只续费了半年，可能不会再续费，前几天看到用腾讯云的 cos 桶 xml 制作动态相册的文章，知道了对象存储这个玩意，腾讯云 COS 提供免费 50G 的存储空间，还有 CDN 加速服务，我觉得是个不错的选择，部署后发现速度还挺好。
适用于 hexo, hugo 等静态博客的部署。

创建存储桶

打开腾讯云控制台–云产品–存储–对象存储，然后创建存储桶。

开启静态网站设置

在基础配置打开静态网站（关掉强制 https)

绑定域名

SSL 设置

域名解析，添加记录

去 dns 服务商添加域名解析记录 CNAME 指向上面的域名

hexo 设置

安装插件

1

npm install hexo-deployer-cos --save

站点配置文件

1
2
3
4
5
6
7


deploy:
  type: cos
  bucket: yourBucketName #cos 桶名称
  appId: yourAppId #cos 桶名称后数字
  secretId: yourSecretId  #云 API 密钥
  secretKey: yourSecretKey #云 API 密钥
  region: yourRegion #所属地域

发布还是一样的

1
2


hexo clean
hexo g -d

结果类似于

CDN 刷新

每次更新博客内容完后，都要登陆腾讯云 CDN–缓存刷新，手动刷新一下 CDN。

用脚本在每次更新后刷新

安装

1

npm install qcloud-cdn-node-sdk --save

创建qcloudcdn.js放入script文件夹

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


const qcloudSDK = require('qcloud-cdn-node-sdk');

qcloudSDK.config({
  secretId: '你的 ID',
  secretKey: '你的密钥'
});

qcloudSDK.request(
  'RefreshCdnDir',
  {
    'dirs.1': 'http://博客地址'
  },
  (res) => {
    console.log(res);
  }
);

自动 CDN 刷新配置（推荐）

进入腾讯云，找到函数计算 -> CDN 缓存刷新函数 -> 创建 CDN 缓存刷新函数
修改 index.js 内容后重新部署

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79


'use strict';

const CosSdk = require('cos-nodejs-sdk-v5');
const CdnSdk = require('./common/CdnSdk');
const CdnRefreshTask = require('./common/CdnRefreshTask');
const { getParams, getObjectUrl, logger, getLogSummary } = require('./common/utils');

exports.main_handler = async (event, context, callback) => {
  /**
   * parse param from event and process.env
   */
  const { objects, cdnHosts, secretId, secretKey, token } = getParams(event);

  logger({
    title: 'param is parsed success, param as follow: ',
    data: { objects, cdnHosts, event }
  });
  /**
   * init cos instance
   */
  if (!secretId || !secretKey || !token) {
    throw new Error(`secretId, secretKey or token is missing`);
  }

  const cdnSdkInstance = new CdnSdk({ secretId, secretKey, token });
  const cosInstance = new CosSdk({
    SecretId: secretId,
    SecretKey: secretKey,
    XCosSecurityToken: token
  });

  const taskList = objects.map(({ bucket, region, key }) => {
    /* 变更内容-START */
    const purgeUrls = [];
    cdnHosts.forEach((host) => {
      const tempUrl = getObjectUrl({
        cosInstance,
        bucket,
        region,
        key,
        origin: `${/^(http\:\/\/|https\:\/\/)/.test(host) ? '' : 'https://'}${host}`
      });
      purgeUrls.push(tempUrl);
      // 如果以 /index.html 结尾，则增加目录首页/。
      // 例如 https://www.xxxx.com/index.html, 则增加 https://www.xxxx.com/。
      if (tempUrl.lastIndexOf('/index.html') == tempUrl.length - 11) {
        purgeUrls.push(tempUrl.substr(0, tempUrl.length - 10));
      }
    });
    return new CdnRefreshTask({
      cdnSdkInstance,
      urls: purgeUrls
    });
    /* 变更内容-END */
  });

  const taskResults = [];
  for (const task of taskList) {
    const results = await task.runPurgeTasks();
    taskResults.push(...results);
  }

  logger({
    title: 'cdn refresh full logs:',
    data: taskResults
  });

  const { status, messages } = getLogSummary(taskResults);

  logger({
    messages: messages.map((item) => item.replace(/\,\ /g, '\n'))
  });

  if (status === 'fail') {
    throw messages.join('; ');
  } else {
    return messages.join('; ');
  }
};

腾讯云 cos 桶 - 标签 - 菠菜眾長

Hugo 使用 GitHub Actions 部署到 GithHb Pages 和 腾讯云 cos 桶

準備

Github Actions

創建 workflows 任務

配置 Github Pages 密鑰

配置 COS 密鑰

COS 自動同步 （備用）

利用腾讯云为静态页面添加“动态”相册

创建腾讯云 cos 存储桶

上传照片

上传工具

食用方式

Step1

Step2

Params

changelog

利用腾讯云对象存储 COS 桶托管 hexo 博客

创建存储桶

开启静态网站设置

绑定域名

域名解析，添加记录

hexo 设置

CDN 刷新

自动 CDN 刷新配置 （推荐）

Hugo 使用 GitHub Actions 部署到 GithHb Pages 和腾讯云 cos 桶

COS 自動同步（備用）

自动 CDN 刷新配置（推荐）