12_Hexo-GitHub Actions 发布博客静态资源至 NPM

发布于 更新于 Hexo , , 评论
注：点击此处或下方 以展开或折叠目录

前言

将博客静态文件上传至 github，通过 github action 自动发包至 npm，使用 npmmirror cdn

npm 命令

网址: https://www.npmjs.com/

切换源

1
2
3
4
5
# https://blog.anheyu.com/posts/sdxhu.html#npm-镜像

npm config set registry http://registry.npmmirror.com
# 切回源
npm config set registry https://registry.npmjs.org/

添加本地 npm 用户

1
2
3
4
# 仅第一次使用需要添加用户，之后会提示你输入你的npm账号密码以及注册邮箱
npm adduser
# 非第一次使用直接登录即可，之后会提示你输入你的npm账号密码以及注册邮箱
npm login

初始化

1
npm init
image-20240324233905199

发布

1
npm publish

生成 npm token

npm 官网 => 头像 => Access Tokens => Generate New Token => 勾选 Automation

image-20240324234307284

github 仓库新增 NPM_TOKEN 的 secrets

image-20240325002106180

示例

package.json

scripts/generate_package_json.js，生成 public/package.json

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
// 生成 public/.package.json
// https://blog.anheyu.com/posts/72ea.html

hexo.extend.generator.register('npmpackagejson', function(locals){
// Object
return {
path: '/package.json',
data: `{
  "name": "mycpen-blog",
  "version": "0.0.0",
  "description": "mycpen blog static file",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mycpen/blog.git"
  },
  "author": "mycpen",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mycpen/blog/issues"
  },
  "homepage": "https://github.com/mycpen/blog#readme"
}
`};
});

npm push

scripts/npmpublish.js，生成 public/.github/workflows/autopublish.yml

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
// 生成 public/.github/workflows/autopublish.yml
// 推送静态资源至 npm
// https://akilar.top/posts/e82444a6/#具体操作步骤

hexo.extend.generator.register('npmpush', function(locals){
  // Object
  return {
    path: '/.github/workflows/autopublish.yml',
    data: `name: Node.js Package
# 监测分支，2020年10月后github新建仓库默认分支改为main，记得更改
on:
  push:
    branches:
      - main

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: "18.x"
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: `+ '${{secrets.npm_token}}' + `

      - name: Wait for 3 minutes
        run: sleep 180 # 等待 3 分钟，单位为秒

      - name: Sync package from npm to npmmirror
        run: |
          npm install -g cnpm --registry=https://registry.npmmirror.com
          cnpm sync mycpen-blog
`
};
});

.npmignore

scripts/npmignore.js，生成 public/.npmignore。目的 不提交 .html 这类文件至 npm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 生成 public/.npmignore
// https://akilar.top/posts/e82444a6/

hexo.extend.generator.register('npmignore', function(locals){
// Object
return {
path: '/.npmignore',
data: `**/*.html
.github/
download/
ads.txt
CNAME
robots.txt
`};
});

change version

.github/replace-localfile-url.py，修改 public/package.json version

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
#!/usr/bin/python
# -*- coding: UTF-8 -*-

# 源码参考  https://blog.csdn.net/qq_38150250/article/details/118026219

import os
import re
from datetime import datetime
import requests
import random

# 文件查找 find . -name file_name -type f
# 查找函数：search_path 查找根路径 

# 获取文章路径
def search(search_path, search_result, search_fileType_list):
    # 获取当前路径下地所有文件
    all_file = os.listdir(search_path)
    # 对于每一个文件
    for each_file in all_file:
        # 若文件为一个文件夹
        if os.path.isdir(search_path + each_file):
            # 递归查找
            search(search_path + each_file + '/', search_result, search_fileType_list)
        # 如果是需要被查找的文件
        else:
            for i in search_fileType_list:
                if re.findall(f'.*\\{i}$', each_file) == [each_file]:
                    search_result.append(search_path + each_file)


# 替换 sed -i 's/old_str/new_str/'
# 文本替换 replace_file_name 需要替换的文件路径，replace_old_str 要替换的字符，replace_new_str 替换的字符
def replace(replace_file_name, replace_old_str, replace_new_str):
    with open(replace_file_name, "r", encoding = "UTF-8") as f1: 
        content = f1.read()
        f1.close()
        t = content.replace(replace_old_str, replace_new_str)
    with open(replace_file_name, "w", encoding = "UTF-8") as f2:
        f2.write(t)
    f2.close()

# ==================================================================


# npm time version | npm_converted_time
# ------------------------------------------------------------------
# 将数字和字母对应关系定义为字典
npm_num_mapping = {
    '0': ['a', 'b', 'u'], '1': ['c', 'd', 'v'], '2': ['e', 'f', 'w'], '3': ['g', 'h', 'x'],
    '4': ['i', 'j', 'y'], '5': ['k', 'l', 'z'], '6': ['m', 'n'], '7': ['o', 'p'],
    '8': ['q', 'r'], '9': ['s', 't']
}
# 当前时间
npm_now = datetime.now()
# 格式化当前时间为指定格式 2403230741
npm_formatted_time = npm_now.strftime("%y%m%d%H%M")
# 数字替换为随机映射字母   ejugfhupjv
npm_converted_time = ''
for char in npm_formatted_time:
    if char.isdigit():
        npm_converted_time += ''.join(random.choice(npm_num_mapping[char]) if char in npm_num_mapping else char)
    else:
        npm_converted_time += char

# 替换 package.json 0.0.0
result_npmPackageJson = ['./public/package.json']
old_npmPackageJson_version = '0.0.0'
new_npmPackageJson_version = f'0.0.0-{npm_converted_time}'
count = 0
# json
for file_name in result_npmPackageJson:
    replace(file_name, old_npmPackageJson_version, new_npmPackageJson_version)
    count += 1
    print("{} done  {}".format(file_name, count))

.github/workflows/autodeploy.yml，执行上方 py 脚本 - name: Replace localFile URL

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
name: Auto deploy
# 当有改动推送到master分支时，启动Action
on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: main

      - uses: szenius/set-timezone@v1.0 # 设置执行环境的时区
        with:
          timezoneLinux: "Asia/Shanghai"

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: "18.x"

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        uses: actions/cache@v1
        id: cache
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install gulp-cli -g #全局安装gulp
          npm install --save

      - name: Generate static file
        run: |
          hexo clean ; hexo generate ; gulp

      - name: Set up Python 3.10
        uses: actions/setup-python@v3
        with:
          python-version: "3.10"
      - name: Install dependencies
        run: |
          python -m pip install --upgrade pip
          pip install requests
      - name: Replace imageBed URL
        run: |
          python .github/replace-imgbed-url-v2.py
      - name: Replace localFile URL
        run: |
          python .github/replace-localfile-url.py

      - name: Delete static file repository tags
        run: |
          mkdir tmp_mycpen
          cd tmp_mycpen
          git clone https://github.com/mycpen/blog.git
          cd blog
          git push --force --quiet "https://mycpen:${{ secrets.GH_TOKEN }}@github.com/mycpen/blog.git" --delete $(git tag -l)
          cd ../..
          rm -rf tmp_mycpen

      - name: Deploy static file
        run: |
          cd ./public
          git init
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          git config --global user.name 'github-actions[bot]'
          git add .
          git commit -m "$(date +'%Y/%m/%d')"
          tag_name=$(date +'%y.%m.%d')
          git tag $tag_name
          git push --force --quiet "https://mycpen:${{ secrets.GH_TOKEN }}@github.com/mycpen/blog.git" $tag_name
          git push --force --quiet "https://mycpen:${{ secrets.GH_TOKEN }}@github.com/mycpen/blog.git" master:main

      - name: Purge JSD cache
        run: |
          jsd_purge_urls=("https://purge.jsdelivr.net/gh/mycpen/blog/" "https://purge.jsdelivr.net/gh/mycpen/blog@latest/" "https://purge.jsdelivr.net/gh/mycpen/blog@main/")
          for url in "${jsd_purge_urls[@]}"; do curl -s $url; done

      - name: 推送百度 url
        run: |
          hexo deploy

      - name: Delete workflow runs
        uses: Mattraks/delete-workflow-runs@v2
        with:
          token: ${{ secrets.GH_TOKEN }}
          repository: ${{ github.repository }}
          retain_days: 30
          keep_minimum_runs: 6

参考

  1. akilar | github-action推送博客部署仓库至NPM

  2. akilar | npm图床

  3. 安知鱼 | hexo博客工作流CI

  4. 安知鱼 | npm图床

  5. EtherDream | 文件一键上传到 NPM

  6. npmmirror | 同步模块 cnpm sync cnpmcore

  7. github | CyanBlog/pkgpublish.js

Mycpen记录学习历程与受益知识

Mycpen