乐趣区

关于程序员:手把手教你打造语雀HexoGithub-ActionsCOS持续集成

引言

之前学习和工作过程中,常常会写一些货色,包含心得体会,一些笔记,本人的一些见解。原本始终在用语雀,最近突发奇想,打算把本人写的这些乌七八糟分享进去,搭个独立博客,和更多的敌人交换,不到之处也能让大家批评指正。
最终在 WordPress、Hexo、VuePress 这几个博客零碎中选定了 Hexo。长处很适宜我,然而毛病也比拟显著,各位看官酌情抉择。

Hexo 长处

  1. 纯动态文件,关上速度快。
  2. 不依赖服务器。间接部署腾讯云 COS,动态站点走 CDN 内容散发。
  3. 内容批量批改很不便。间接在编辑器全局替换就行,不必连数据库更新数据。

Hexo 毛病

  1. 只能在部署 Node.js、Git 和装置 VSCode 软件的电脑环境写文章。来到了这些环境,长期想更新文章一个字都难。(筹备让一台服务器来实现这个编译和部署工作,从语雀编写文章,主动同步过来,就不便多了)
  2. 没有浏览数统计、没有评论性能。
    尽管能够应用 Valine 和 LeanCloud 实现,然而依赖太多并且让我感觉很没保障。
    Valine 从 2019 年开始接触吧,至今还没有评论审核性能。
    当你做 SEO 做到肯定水平时,会有很多对手歹意过去引流,审核性能是非常须要的。
    而 Valine 的第三方 admin 工具,有三年没更新了,只能简略删除评论也是不能满足需要。
    浏览数这个依赖 LeanCloud,收费利用引擎有个休眠机制。
    要用脚本不停唤醒,最大运行工夫如同是每天 20 小时。
    付费的每天 3 元,只是统计个浏览数又太贵。
  3. 对 EJS 或者 Jade 语法引擎不相熟。绝大多数主题用 jQuery,二次开发很麻烦等等。

抉择 Hexo 最次要的起因也在于发现了一个能无缝连贯的神器——yuque-hexo,参考了网上很多文章,搞了几天,终于搭建好了我的博客。

开始

我的新博客是基于

Hexo + 语雀 + yuque-hexo + web hook + severless + Github Actions

托管平台我抉择的是

腾讯云的 COS 动态网站 + 自定义 CDN 减速

部署流程

初始化 Hexo

首先须要在本地初始化 hexo 仓库

npx hexo-cli init blog

npx 能够在不全局装置依赖状况下应用 hexo-cli 的命令

装置 yuque-hexo 插件

官网文档:yuque-hexo

装置依赖

npm i yuque-hexo

配置语雀

  1. 拜访工作台 => 账户设置 =Token=> 新建并配置好权限。

Access Token 即为 YUQUE_TOKEN
拜访工作台 => 账户设置 => 账户治理 => 集体门路,设置语雀的繁难的集体门路(倡议),拿到集体门路。

  1. 新建一个搁置博客文章的知识库(可见范畴为 互联网可见
  2. 进入博客知识库,设置博客知识库的门路(倡议),拿到知识库的门路

配置 hexo

拿到上述的语雀集体门路和知识库门路,进行 hexo 的配置。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "hexo:build": "hexo generate",
    "hexo:clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "hexo": "pnpm run hexo:clean && pnpm run hexo:build && pnpm run server",
    "yuque:clean": "yuque-hexo clean",
    "yuque:sync": "yuque-hexo sync",
    "yuque": "pnpm run yuque:clean && pnpm run yuque:sync"
  },
  "hexo": {"version": "6.3.0"},
  "yuqueConfig": {
    "postPath": "source/_posts",
    "baseUrl": "https://www.yuque.com/api/v2",
    "adapter": "markdown",
    "login": "iamjy", # 语雀集体门路
    "repo": "iamjy",  # 语雀知识库门路
    "onlyPublished": true,
    "onlyPublic": true
  },
}

配置腾讯云 COS

当咱们开始时咱们须要做如下筹备:
● 域名(须要备案,不备案可长期应用 COS 提供的长期域名)
● 腾讯云账号 开明 COS 服务(倡议应用 V5 版本 COS 控制台,降级办法如下)

V4 和 V5 版本域名辨别如下:

  • V4 域名形如:examplebucket-1250000000.cossh.myqcloud.com
  • V5 域名形如:examplebucket-1250000000.cos.ap-shanghai.myqcloud.com

如何降级到 V5 版本的源站域名

  • 当您进入 CDN 减速配置编辑状态后再次保留,咱们会主动为您降级到 V5 版本的 COS 域名

参考资料:一键部署 hexo 博客到腾讯云 COS 对象存储

开启动态网站

拜访腾讯云对象存储控制台 => 根底配置 => 动态网站,开启动态网站性能

配置自定义 CDN 减速域名

拜访腾讯云对象存储控制台 => 域名与传输治理 => 自定义 CDN 减速域名,配置自定义减速域名

  • 减速地区:依据你的用户散布状况抉择。
  • 回源鉴权:如果存储桶为公有读写,这里要关上。

配置 CDN

这里贴上我的配置作为参考,没有贴出的都能够用默认配置,或依据本身状况设置。

  • 减速区域:依据本人需要抉择
  • 减速类型:只能抉择CDN 网页小文件

解析域名

如果域名在腾讯云,上一步配置自定义 CDN 减速域名的时候曾经主动解析好了,如果域名在其余平台,登录相应平台的控制台,将域名指向下面 COS 控制台中显示的 CNAM 域名

获取配置参数

首先咱们须要在腾讯云控制台获取下列所需的配置参数:

获取 SecretId 和 SecretKey

进入拜访治理 => 密钥治理 =>【新增密钥】=>获取 SecretId 和 SecretKey
这里倡议能够新增子用户,并设置权限,获取子用户的密钥,这里不作赘述。

获取 bucket 和 region

拜访腾讯云对象存储控制台 => 根本信息,获取存储桶名称和所属地区

配置 Github Actions

首先咱们须要在 github 新建一个公有博客仓库(以下简称 博客仓库 ),用于寄存 hexo 源码,并与本地的 hexo 做关联。
所需的配置参数:

SECRET_ID 腾讯云的 SecretId
SECRET_KEY 腾讯云的 SecretKey
YUQUE_TOKEN 语雀的 Access Token
BUCKET 腾讯云 COS 动态网站的存储桶名称
REGION 腾讯云 COS 动态网站的地区名称

配置 Github

获取 Github 拜访 Token

拜访 GIthub Token 配置 =>Generate new token=> 勾选必要的参数,生成 token

留神下:这个 Token 只会呈现一次,最好复制进去应用,如果遗记了,只能从新生成一个

Github Token 用处:

  • 用来在流水线工作时,上传语雀文章到博客仓库。
  • 下文中须要用到这个 token 内部调用 Github Actions

配置仓库 Actions secrets

进入博客仓库的设置,配置 secrets。把之前获取的腾讯云的 [SECRET_ID 和 SECRET_KEY](https://www.yuque.com/iamjy/iamjy/wgwlxu?inner=XtEPR) 和语雀的 [YUQUE_TOKEN](https://www.yuque.com/iamjy/iamjy/wgwlxu?inner=OUCqa) 配置到这里。

SECRET_IDSECRET_KEYBUCKETREGION用于上传动态网站文件到 COS,YUQUE_TOKEN用于拉取语雀的文章
GITHUB_TOKEN 不必配置,能够在 Github Actions 中间接获取

配置博客仓库

在根目录新增 .github/workflows/main.yaml 文件
这里间接上代码:

name: Deplo To COS

on:
  # 本地测试时能够开启,部署后不倡议开启,因为会波及到更改一些配置,会屡次频繁触发构建
  # 容许手动 push 触发
  # push:
  #    branches:
  #      - master
  # 容许内部仓库事件触发
  repository_dispatch:
    types:
      # 这里的值须要和下文的云函数的 event_type 保持一致
      - start

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: 查看分支
        uses: actions/[email protected]

      - uses: pnpm/[email protected]
        with:
          version: 7

      - name: 装置 node 环境
        uses: actions/[email protected]
        with:
          node-version: "16"
          cache: "pnpm"

      # - name: 缓存依赖
      #   uses: actions/[email protected]
      #   id: cache
      #   with:
      #     path: node_modules
      #     key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

      - name: 装置依赖
        run: pnpm install
      #   if: steps.cache.outputs.cache-hit != 'true'
      #   run: |
      #     export TZ='Asia/Shanghai'
      #     npm install

      - name: 装置 COS 相干依赖
        run: |
          sudo pip install coscmd
          sudo pip install tccli

      - name: 配置 COS
        env:
          SECRET_ID: ${{secrets.SECRET_ID}}
          SECRET_KEY: ${{secrets.SECRET_KEY}}
          BUCKET: ${{secrets.BUCKET}}
          REGION: ${{secrets.REGION}}
        run: |
          coscmd config -a $SECRET_ID -s $SECRET_KEY -b $BUCKET -r $REGION
          tccli configure set secretId $SECRET_ID
          tccli configure set secretKey $SECRET_KEY
          tccli configure set region $REGION

      - name: 拉取语雀的文章
        env:
          YUQUE_TOKEN: ${{secrets.YUQUE_TOKEN}}
        run: |
          pnpm run yuque:clean
          pnpm run yuque:sync

      - name: 配置 Git 用户名邮箱
        run: |
          git config --global user.name "yszar"
          git config --global user.email "[email protected]"

      - name: 提交 yuque 拉取的文章到 GitHub 仓库
        run: |
          echo `date +"%Y-%m-%d %H:%M:%S"` begin > time.txt
          git add .
          git commit -m "Refresh yuque json" -a
          git pull origin master

      - name: 推送文章到仓库
        uses: ad-m/[email protected]
        with:
          # GITHUB_TOKEN 不必配置在 secrets
          github_token: ${{secrets.GITHUB_TOKEN}}

      - name: 生成动态文件
        run: |
          pnpm run hexo:clean
          pnpm run hexo:build

      - name: 上传文章到 cos 并刷新 CDN
        run: |
          coscmd upload -rfs --delete ./public/ /
          tccli cdn PurgePathCache --cli-unfold-argument --Paths https://iamjy.com/ --FlushType flush

配置腾讯云函数

  1. 拜访云数控制台 => 新建云函数
  2. 模版抉择从头开始,函数类型抉择事件函数,运行环境抉择 python2.7
  3. 在线编写函数代码, 记得批改地址
# -*- coding: utf8 -*-
import requests
def main_handler(event, context):
    r = requests.post("https://api.github.com/repos/ 你的用户名 / 你的仓库名 /dispatches",
                      json = {"event_type": "start"},
                      headers = {"User-Agent":'curl/7.52.1',
                                 'Content-Type': 'application/json',
                                 'Accept': 'application/vnd.github.everest-preview+json',
                                 'Authorization': 'token Github 拜访 token'})
if r.status_code == 204:
    return "This's OK!"
else:
    return r.status_code

event_type 阐明
event_type 值须要和 Github Actions 中配置的 repository_dispatch 的 types 值保持一致

Authorization 阐明
Authorization 值为 字符串 “token Github 拜访 token”, 不要忘了加 token

  1. 触发器配置 => 自定义创立 => 配置如下图所示
  1. 部署实现后进入触发治理,最上面就是云函数地址

配置语雀 webhook

拜访博客知识库 => 设置 => 音讯推送,抉择其余渠道,设置机器人名称和上文获取到的云函数地址,抉择触发条件

公布文档和更新文档,须要抉择文档有较大更新,推送给关注者,才会触发 webhook。

然而通过我的测试,一旦某一篇文章抉择 文档有较大更新,推送给关注者。后续的更新,不论选没选 文档有较大更新,推送给关注者,都会触发 webhook。
如果因为部署频繁导致出错的话,倡议抉择评审阶段触发。也能够每次通过测试按钮手动触发。

公布文章

无论是公布新文章还是更新删除等等操作,只有抉择文档有较大更新,推送给关注者即可主动触发。

常见问题

语雀图片显示异样(防盗链)的解决办法

因为语雀的图片由有防盗链的限度,会导致部署后,博客网站显示图片异样。
解决方法有两种:

  1. 在语雀上应用图片的时候,避开间接复制图片到语雀。先将图片上传到本人的图床后,间接应用 markdown 的图片语法插入图片到适当地位,例如:
  1. 批改博客仓库的package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "hexo:build": "hexo generate",
    "hexo:clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "hexo": "pnpm run hexo:clean && pnpm run hexo:build && pnpm run server",
    "yuque:clean": "yuque-hexo clean",
    "yuque:sync": "yuque-hexo sync",
    "yuque": "pnpm run yuque:clean && pnpm run yuque:sync"
  },
  "hexo": {"version": "6.3.0"},
  "yuqueConfig": {
    "postPath": "source/_posts",
    "baseUrl": "https://www.yuque.com/api/v2",
    "adapter": "markdown",
    "login": "iamjy",
    "repo": "iamjy",
    "lastGeneratePath": "lastGeneratePath.log",
    "onlyPublished": true,
    "onlyPublic": true,
    "imgCdn": {
      "enabled": true,
      "imageBed": "cos",
      "bucket": "iamjy-hexo-xxxxxx",
      "region": "ap-shanghai",
      "prefixKey": "blog-images"
    }
  }
}

imgCdn 语雀图片转腾讯云 COS 图床配置阐明

留神:开启后会将匹配到的所有的图片都上传到 COS

参数名 含意 默认值
enabled 是否开启 false
bucket 腾讯 COS 的 bucket 名称
region 腾讯 COS 的 region(地区名称)
prefixKey 文件前缀

prefixKey 阐明:

如果须要将图片上传到 COS 的根目录,那么 prefixKey 不必配置。
如果想上传到指定目录 blog/image 下,则须要配置 prefixKey"prefixKey": "blog/image"
目录名前后都不须要加斜杠

上传到 COS 图床也是须要腾讯云的 SECRET_ID 和 SECRET_KEY 作为环境变量注入的,但在之前的流程中,咱们曾经在博客仓库的 secrets 注入了,所以这里就不须要再额定注入了。
更多详情介绍请移步:yuqe-hexo-with-cdn

退出移动版