GitHub + NPM + PicList 图床方案

免责声明

此方法并不道德，因为你只用付出精力，而别人需要给你提供存储和cdn加速
当然，白嫖万岁！！！

GitHub + NPM + PicList 图床方案

开始准备

  1. 一个功能强大的GitHub账号，成为您的得力助手，助您实现各种自动化操作，提高工作效率。
  2. 一个实用的NPM账号，不仅能存储图片，还能轻松将图片发布到CDN，让您的图片加载速度更快，用户体验更佳。
  3. PicList，一款方便快捷的工具，助您轻松上传图片，管理图片资源，让您的图片工作变得更加简单高效。
  4. 图片，如果没有准备好图片，那么您搭建的图床将无法发挥其存储和展示图片的功能，如同虚设。因此，准备好图片，让您的图床发挥其真正的价值。

准备前言

此方案专为那些希望拥有图床但又不具备自建能力的用户设计。它采用Github Action来实现自动化流程，利用NPM作为图床的存储后端，并通过PicList这一便捷的上传工具来管理您的图片。此外，为了提升图片加载速度，我们还选择了NPM提供的公益CDN服务进行内容分发。

需要特别注意的是，由于我们使用的是NPM作为图床，每次更新图片时都需要更新版本号，这可能在一定程度上增加了操作的复杂性。如果您对这一点感到不便，可能需要考虑其他更适合自己的解决方案。

开始搭建

1. 创建Github仓库

  1. 创建一个仓库，仓库名随意，例如：jinghuashang-img-bed

  2. 公共还是私有看你需要，毕竟不管哪个你都是要部署到公网。

2. 创建NPM仓库

对于熟悉npm包创建流程的用户来说，这里的内容应该是不言自明的。如果您对如何创建npm包已经很熟悉，那么您可以继续阅读下去，因为接下来的内容将基于您已经具备这一知识前提。如果您对npm包的创建不是很了解，那么接下来的信息可能对您来说不够直观，您可能需要先补充相关知识。总之，这里我们默认您对npm包的创建和发布有一定的了解。

  1. 创建包，包名随意，例如：jinghuashang-img-bed

3. 配置PicList工具

  1. 下载PicList

  2. 安装完成后启动程序，选择图床中的GitHub

  3. 添加图床配置

    获取tokens

    选择第二个就行了

4. 配置GitHub Action

  1. 先为Github仓库添加我们的上传和处理目录，在本地创建 raw webp imgs 三个目录，并使用git上传目录。注意，在目录下要创建一个隐藏文件，不然上传后等于没上传，比如创建一个名为 .keep 的文件，同时创建你npm包的package.json

  2. 选择仓库Settings中的secrets/actions ,分别添加 EMAIL NAME NPM_TOKEN ENAIL 为GitHub注册邮箱，NAME为Github用户名，NPM_TOKEN为NPM的token，至于token自己找

  3. 创建仓库 Actions

    填入代码如下

    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
     name: img2webp & Deploy

    # 手动执行

    on:
      release:
         types:
           - published

      workflow_dispatch:

    jobs:
      publish-npm:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: actions/setup-node@v1
            with:
              node-version: "12.x"
              registry-url: https://registry.npmjs.org/

          - name: hp
            run: |
              # 遍历指定目录中的每个文件
              for file in raw/*; do
              # 检查文件是否为普通文件（排除目录）
                  if [ -f "$file" ]; then
                  # 获取文件名（不包括路径）和扩展名
                  filename=$(basename "$file")
                  extension="${filename##*.}"
                  filename_without_extension="${filename%.*}"
                
                  # 使用mktemp生成一个新的随机文件名（不包含扩展名）
                  new_name=$(mktemp -u XXXXXXXXXX)
                
                  # 重建新的文件名，包括随机字符串和原始扩展名
                  new_filename="${new_name}.${extension}"
                  
                  # 重命名文件，保留原始扩展名
                  mv "$file" "raw/$new_filename"
                  echo "Renamed $file to$new_filename"
                fi
              done
              
          # raw/ 作为原始图片存储，webp/ 作为压缩图片存储处，最后保存转换后的图片到 imgs/，可以自行修改为对应的文件夹位置
          # 安装相关插件，转换图片
          - name: Install & Convert
            run: |
              npm install -g webp-batch-convert@0.1.2
              # 要注意这里的版本号需要添加，如果不添加默认使用@Latest会出现问题
              cwebp-batch --in raw --out webp -q 75 -quiet
              mv webp/*.webp imgs/
          - name: Read package.json and bump version
            id: bump-version
            run: |
              # 读取package.json中的版本号
              version=$(cat package.json | grep -oP '"version": "\K[^"]+')
            
              # 解析版本号并增加
              IFS='.' read -ra VER <<< "$version"
              ((VER[2]++))
              new_version="${VER[0]}.${VER[1]}.${VER[2]}"
            
              # 更新package.json中的版本号
              sed -i "s/\"version\": \"[^\"]*\"/\"version\": \"$new_version\"/g" package.json
            
              # 输出新的版本号
              echo "Old version: $version"
              echo "New version: $new_version"
               # 删除 raw/ 和 webp/ 下的所有文件
          - name: Delete Files
            run: |
              rm -rf webp/*
              rm -rf raw/*
              touch webp/.keep
              touch raw/.keep
          # 获取文件名字
          - name: ls Files
            run:  |
              ls -R imgs/* > file.txt
              
          # 发布 NPM 包
          # 自行修改为自己的Github邮箱地址和用户名
          - name: Publish Package
            run: |
              git config --global user.email "${{secrets.email}}"
              git config --global user.name "${{secrets.name}}"
              npm publish
            env:
              NODE_AUTH_TOKEN: ${{secrets.npm_token}}

          - name: Push
            run: |
              git add -A
              git commit -m "Publish"
              git push origin main

第5步：上传文件

  1. 打开 PicList 工具，点击 上传 按钮，选择您要上传的图片。

第6步：自动化图片处理

  1. 返回您的GitHub仓库，导航至 Actions 部分，启动脚本以执行自动化流程。

第7步：CDN发布

  1. 等待自动化脚本完成执行，这将处理您的图片并将它们发布到CDN。

  2. 确认图片已成功上传到CDN，并检查它们是否可以通过CDN链接访问。

请注意，每一步骤都可能需要您对相关工具和平台有一定的熟悉度。如果在任何步骤中遇到困难，建议查看相关工具的文档或寻求社区的帮助。

在脚本运行完成后，您需要在 file.txt 文件中查找您的图片名称。一旦找到，您需要在这些图片名称前添加CDN的URL前缀。例如，如果您的图片名称是 imgs/0DPgqcbczm.webp ，您需要将其修改为 https://cdn.cbd.int/jinghuashang-imgbed@0.0.1/imgs/0DPgqcbczm.webp 。在这个URL中，https://cdn.cbd.int/ 是CDN的基地址，而jinghuashang-imgbed@0.0.1 部分则是您的npm包名称加上版本号。确保您使用的是正确的包名称和版本号，以便CDN能够正确地解析和提供您的图片资源。

请注意，在上传或更新图片后，务必及时更新您的npm包版本号。这是因为在npm生态中，版本号是区分不同版本的唯一标识，也是确保依赖项正确更新的关键。更新版本号不仅能够确保您的项目使用的是最新的图片资源，还能让其他依赖您的项目的用户知道有新的内容可用。因此，遵循正确的版本控制实践对于维护和分发您的图床服务至关重要。