MENU

使用npm作为图床

2022 年 12 月 28 日 • 阅读: 136 • 教程


这段时间一直在网上探寻适合自己的图床,我发现了两个:

不使用jsDelivr+Github的原因是jsDelivr速度降低严重,原因可以自行网上搜索,这里就不过多赘述

为了方便阅读,本文开启了目录树功能,可以点击页面右侧的箭头自行开启

准备工作

npm

  • 需要注册一个npm账号
  • 获取令牌:
  1. 登录npm ,点击右上角的头像,进入Access Token

  1. 点击Generate New Token,选择Classic Token

  1. 勾选Automation,点击Generate Token生成令牌

  1. 保存生成的令牌

Github

  • 需要一个Github账号,以及一个已经创建好的仓库,名称随意,权限私有或者公开都可以
  • 添加变量
  1. 选择Settings,选择Secrets中的Actions

  1. 点击New repository secret添加一个新的Secret

  1. Name填写 NPM_TOKENSecret填写 前面获取的npm的令牌


在仓库根目录中新建一个package.json文件,内容如下:
name必须要小写,我在这里踩雷了
version随意

{
  "name": "rainogo-filecdn",
  "version": "0.0.0",
  "description": "Somewhere to save the file from @Rainogo",
  "author": "Peter(@Rainogo)"
}

发布图片

使用Github Actions来自动转换&压缩发布图片(如何发布图片在后文将会提供两种方法)

如何创建Github Actions自行搜索,本文默认读者已经了解如何创建

转换&压缩图片的方法

我们这里采用webp-batch-convert来实现图片的转换&压缩,具体的使用方法可以参考网上,我们这里只需要记住一部分就行了(其实不用记):

# # raw/ 作为原始图片存储,webp/ 作为压缩图片存储处,最后保存转换后的图片到 imgs/,其中的各个文件夹可以自行更改
cwebp-batch --in raw --out webp -q 75 -quiet
or
npx webp-batch-convert --in raw --out webp -q 75 -quiet

第一种方法:在 Release 发布时 或 手动执行

Github Actions代码

name: img2webp & Deploy

# 在 Release 发布时 或 手动执行

on:
  release:
     types:
       - published

  workflow_dispatch:

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    # Clone 仓库
    steps:
      - name: Checkout
        uses: actions/[email protected]
        with:
          ref: master
      # 安装 Node.js    
      - name: Setup Node
        uses: actions/[email protected]
        with:
          node-version: "12.x"
          registry-url: https://registry.npmjs.org/
        
      # raw/ 作为原始图片存储,webp/ 作为压缩图片存储处,最后保存转换后的图片到 imgs/,可以自行修改为对应的文件夹位置
      # 安装相关插件,转换图片
      - name: Install & Convert
        run: |
          npm install -g [email protected]
          # 要注意这里的版本号需要添加,如果不添加默认使用@Latest会出现问题
          cwebp-batch --in raw --out webp -q 75 -quiet
          # npx webp-batch-convert --in raw --out webp -q 75 -quiet
          mv webp/*.webp imgs/
          
      # 发布 NPM 包
      # 自行修改为自己的Github邮箱地址和用户名
      - name: Publish Package
        run: |
          git config --global user.email "$GIT_EMAIL"
          git config --global user.name "$GIT_USER"
          npm version patch
          npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
          
      # 删除 raw/ 和 webp/ 下的所有文件
      - name: Delete Files
        run: |
          rm -rf webp/*
          rm -rf raw/*
          touch webp/.keep
          touch raw/.keep
          
      - name: Push
        run: |
          git add -A
          git commit -m "Publish"
          git push origin master

如何发布Release

  1. 点击Draft a new release

  1. tag自行填写,Release title自行填写,点击Publish release进行发布

  1. Release发布之后,Actions就会自动开始运行了

为什么使用Release的发布来实现启动Actions的运行
主要是方便对发布时间的统计,实现一篇文章一个Release,便于规划,实现云端管理


第二种方法:在仓库发生变更时 或 手动执行

不是很推荐,感觉会有点儿问题,似乎会执行两次(我自己没用过,感觉会,不知道Actions上传的东西算不算一次修改?有兴趣的可以试一下),我也不知道咋解决
建议使用第一种,后续可能会推出第三种方法,说不定会咕咕

Github Actions代码

name: img2webp & Deploy
#检测到分支变动就进行提交Actions,2020年10月后github新建仓库默认分支改为main,但是可以修改仓库的默认分支为master,修改方法请自行搜索
on:
  push:
    branches:
      - master
      # - main
      # 注意若分支为main,则请修改后使用
#    paths-ignore:
#      - package.json

  workflow_dispatch:

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    # Clone 仓库
    steps:
      - name: Checkout
        uses: actions/[email protected]
        with:
          ref: master
      # 安装 Node.js    
      - name: Setup Node
        uses: actions/[email protected]
        with:
          node-version: "12.x"
          registry-url: https://registry.npmjs.org/
        
      # raw/ 作为原始图片存储,webp/ 作为压缩图片存储处,最后保存转换后的图片到 imgs/,可以自行修改为对应的文件夹位置
      # 安装相关插件,转换图片
      - name: Install & Convert
        run: |
          npm install -g [email protected]
          # 要注意这里的版本号需要添加,如果不添加默认使用@Latest会出现问题
          cwebp-batch --in raw --out webp -q 75 -quiet
          # npx webp-batch-convert --in raw --out webp -q 75 -quiet
          mv webp/*.webp imgs/
          
      # 发布 NPM 包
      # 自行修改为自己的Github邮箱地址和用户名
      - name: Publish Package
        run: |
          git config --global user.email "$GIT_EMAIL"
          git config --global user.name "$GIT_USER"
          npm version patch
          npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
          
      # 删除 raw/ 和 webp/ 下的所有文件
      - name: Delete Files
        run: |
          rm -rf webp/*
          rm -rf raw/*
          touch webp/.keep
          touch raw/.keep
          
      - name: Push
        run: |
          git add -A
          git commit -m "Publish"
          git push origin master

为什么使用git push来实现启动Actions的运行
更加方便,可以上传一张图片之后马上进行使用,不用进行Release的发布


注意事项

  • 如果你使用的是本文提供的Actions代码:

    • 请注意保存原始图片,在转换和压缩后,原始图片会在接下来的流程里面被删除掉
    • 请将图片上传至raw/中(如果你没有修改代码的话)
    • 如果要上传gif格式的图片,建议直接上传至imgs/中,防止格式转变的过程中让动图变为静止图片
    • 不需要修改package.json文件中的versionActions的时候会自动修改,但是如果要进行大版本的变动还是需要手动修改的


使用

CDN节点参考

[jsDelivr] https://cdn.jsdelivr.net/npm/:[email protected]:version/:file
[百度,网宿国内节点] https://code.bdstatic.com/npm/:[email protected]:version/:file
[饿了么,网宿国内节点] https://npm.elemecdn.com//npm/:[email protected]:version/:file

本站代码

如果你使用的是本文提供的Actions代码,可以参考图片链接格式如下:

https://npm.elemecdn.com/:[email protected]/imgs/:imgname.webp
# name: package.json处写的
# imgname: 图片的名称

如何上传图片到Github

可以使用以下两种方式,具体使用方法请自行搜索或查看官方文档


本文作者:Peter
本文标题:《使用npm作为图床》
本文链接:https://www.rainogo.com/posts/npm_imgbed.html
版权声明:本博客文章均采用CC BY-NC-SA 4.0许可协议,转载请注明出处!

最后编辑于: 2023 年 01 月 16 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

验证码:

已有 3 条评论
  1. 通过国内镜像,确实访问很快!

  2. CKY CKY

    有十分甚至九分的相似啊(x

    1. @CKY快点儿看看置顶的参考资料@(泪),我加了的