搭建属于自己的免费图床,这里使用了NPM+Github,后面还加了一个PicGO配置,让你使用方式又多了一种,有需要的可以自行配置使用。

GitHub图床仓库创建

  1. 创建一个新仓库用于保存图片,创建好这里我们复制这里的链接,后面用的上,上传几张图片,后面进行下载到本地,测试是否能正常使用。

  2. 我们这里找一个合适的文件夹位置,这里把刚才的链接进行拷贝,前面加上git clone

    1
    2
    git clone [email protected]:[username]/[AssetsRepo].git
    # username是你的GitHub名,AssetsRepo是你创建的仓库

  3. 文件夹下就会有你创建的仓库名,里面有你的保存在仓库的文件和一个隐藏文件夹。

npm注册

  1. 这里先去注册一个npm账号,访问npm注册页面

    npm注册

  2. 这里会直接让你进行邮箱验证,验证完后,你会进入的npm显示界面

    验证

  3. git clone下来的[AssetsRepo]文件夹下打开终端,输入以下指令切换回原生源

    1
    npm config set registry https://registry.npmjs.org
  4. 这里我们添加npm本地访问

    点击访问链接进行验证后显示Go to home page按钮,点击确认即可。

    1
    2
    3
    4
    # 仅第一次使用需要添加用户,之后会提示你输入你的npm账号密码以及注册邮箱
    npm adduser
    # 非第一次使用直接登录即可,之后会提示你输入你的npm账号密码以及注册邮箱
    npm login
  5. 这里运行npm初始化指令,把整个图床仓库进行打包,按照指示进行配置,注意需要事先确认你的包名没有和别人已发布的包重复,可以在npm官网搜索相应包名,搜不到就说明还没被占用。

    1
    2
    # 初始化
    npm init

    这里是我成功过后的步骤,需要填写的我会进行备注(看--->),这里你只需要进行填写即可。

    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
    Microsoft Windows [版本 10.0.22000.1936]
    (c) Microsoft Corporation。保留所有权利。

    C:\Users\bingm>E:

    E:\>cd E:\Pictures\GitHub\bingm-static

    E:\Pictures\GitHub\bingm-static>npm config set registry https://registry.npmjs.org

    E:\Pictures\GitHub\bingm-static>npm adduser
    npm notice Log in on https://registry.npmjs.org/
    Create your account at:
    https://www.npmjs.com/login?next=/login/cli/b9542db8-1c95-469c-9b5b-dd8271a84553
    Press ENTER to open in the browser...
    Logged in on https://registry.npmjs.org/.

    E:\Pictures\GitHub\bingm-static>npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.

    See `npm help init` for definitive documentation on these fields
    and exactly what they do.

    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.

    Press ^C at any time to quit.
    package name: (bingm-static) bingm-static ---> 包名
    version: (1.0.0) ---> 版本号(默认即可)
    description: bingm static file ---> 描述(不填写也可以)
    entry point: (index.js) ---> 默认
    test command: ---> 默认
    git repository: https://github.com/eudav/bingm-static.git
    keywords: static file ---> 关键字(不填写也可以)
    author: bingm ---> 作者
    license: (ISC) ---> 默认
    About to write to E:\Pictures\GitHub\bingm-static\package.json:

    {
    "name": "bingm-static",
    "version": "1.0.0",
    "description": "bingm static file",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
    "type": "git",
    "url": "git+https://github.com/icemyst/bingm-static.git"
    },
    "keywords": [
    "static",
    "file"
    ],
    "author": "bingm",
    "license": "ISC",
    "bugs": {
    "url": "https://github.com/eudav/bingm-static/issues"
    },
    "homepage": "https://github.com/eudav/bingm-static#readme"
    }


    Is this OK? (yes) yes

    E:\Pictures\GitHub\bingm-static>

    最后会输出一段 package.json文件,下面显示Is this OK? (yes),输入 yes 即可。

  6. 然后输入发布指令,我们就可以把包发布到 npm上了。

    1
    npm publish

    不报错,显示结果如下:

  7. 由于在国内访问无响应,这里就要使cdn进行加载,使你的访问速度提升,访问jsdelivr官网,获取链接。

    jsdelivr+npm 的图片引用和 jsdelivr+github 基本相同,例如我在[AssetsRepo]仓库里存放的/img/index.png

    1
    2
    3
    4
    # jsDelivr+github链接
    https://cdn.jsdelivr.net/gh/[GithubUserName]/[AssetsRepo]/img/index.png
    # jsDelivr+npm链接
    https://cdn.jsdelivr.net/npm/[NpmPackageName]/img/index.png

    这里再分享几个cdn源。

    1
    2
    3
    4
    5
    6
    7
    8
    jsd.onmicrosoft.cn/
    jsdelivr:fastly.jsdelivr.net
    饿了么1:github.elemecdn.com(使用可参考UNPKG)
    饿了么2:npm.elemecdn.com(使用可参考UNPKG)
    知乎:unpkg.zhimg.com(使用可参考UNPKG)
    jsd.onmicrosoft.cn(回源 jsDelivr,使用可参考jsDelivr)
    npm.onmicrosoft.cn (回源 UNPKG,使用可参考UNPKG)
    cdnjs.onmicrosoft.cn (回源 cdnjs,使用可参考cdnjs)
  8. 这里你也可以利用unpkg进行自建。(unpkg是一个内容源自npm的全球快速CDN)。它是部署再cloudflare上的,在大陆地区访问的是香港的节点。

  9. 这里进行github action实现上传,让你节省时间,减少你的工作,能偷懒的地方怎么能不偷懒呢😀。

    • npm官网->点击你的头像->选择Access Tokens->进入页面点击Generate New Token->选择Classic Token,勾选Automation选项,这里Token只会显示一次,记得保存。

    这里记得选择Automation

    • 在 github 的[AssetsRepo]仓库设置项里添加一个名为NPM_TOKENsecrets,把获取的 NPMAccess token 输入进去,这里不知道变量设置的请看使用 Github Action 自动部署

    • 在本地的[AssetsRepo]文件夹下新建[AssetsRepo]/.github/workflows/autopublish.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      name: Node.js Package
      # 监测图床分支,2020年10月后github新建仓库默认分支改为main,记得更改
      on:
      push:
      branches:
      - master

      jobs:
      publish-npm:
      runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      with:
      node-version: "16.x"
      - run: npm publish
      env:
      NODE_AUTH_TOKEN: ${{secrets.npm_token}}
    • 在本地的[AssetsRepo]文件夹下打开终端,运行以下指令,上传新增内容至 github,即可触发部署(不想手动更新的看扩展布置)。

      1
      2
      3
      4
      5
      6
      7
      # 将更改提交
      git add .
      git commit -m "npm publish"
      # 更新package版本号
      npm version patch
      # 推送至github触发action
      git push

      此处的四行指令顺序严格。
      每次更新 npm 图床都需要先修改[AssetsRepo]\package.json里的version,也就是版本号。
      npm version patch即为更新 package.json 里的版本号的指令,效果是末尾版本号+1,例如0.0.1=>0.0.21.1.3=>1.1.4。免去了打开package.json再修改版本号的麻烦。(大版本更新还是需要手动改的)
      更新 npm 图床务必要记得更新package.json里的版本号!

扩展布置

使用指令是很方便,不过操作还是太繁琐了,后面我又去了解了一下,这里可以搭配PicGo来使用,这样不仅方便,如果你电脑重置了,也不会影响你的使用😀。

PicGO下载

这里点击跳转到GitHub下载,这里版本选择,根据你的电脑来选,版本下有说明,稳定版和测试版本看你喜欢用哪个版本,这里看你自己。

GitHub国内下载速度有点慢,你可以使用其它的下载方式进行下载。

下载源地址/安装方式平台备注
GitHub Releasehttps://github.com/Molunerfinn/PicGo/releasesAll国内下载速度可能会慢
腾讯云COS(opens new window)https://github.com/Molunerfinn/PicGo/releases 附在更新日志结尾All感谢 腾讯云COS (opens new window)提供的赞助支持
山东大学镜像站(opens new window)https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGoAll感谢 山东大学镜像站 (opens new window)提供的镜像支持
Scoop(opens new window)scoop bucket add helbing https://github.com/helbing/scoop-bucket & scoop install picgoWindows感谢 @helbing 的贡献
Chocolatey(opens new window)choco install picgoWindows感谢 @iYato 的贡献
Homebrew(opens new window)brew install picgo --caskmacOS感谢 @womeimingzi11 的贡献
AUR(opens new window)yay -S picgo-appimageArch-Linux感谢 @houbaron 的贡献

PicGO配置

  1. 登录我们的GitHub,创建TOKEN

下载好后,进行安装,这里我们选择GitHub,依次点击settings->Developer settings>tokens (classic)

点击Developer settings

选择tokens (classic)

创建密钥,TOKEN只显示一次,记得保存,如果没有保存,后面重新创建一个即可。

选择repo

  1. 这里我们开始配置PicGo上的GitHub图床。

这里使用自定义域名:你的npm包在npm的路径,版本选择latest,这里以jsd为例:https://jsd.onmicrosoft.cn/npm/包名@latest/图片路径

除了设定自定义域名需要你自行找一个链接进行配置和验证以外,其它配置都是可以理解的,对应的是你的GitHub名,仓库名,对应分支,步骤①让你复制的TOKEN还有你保存文件的路径。

  1. 上传几张图片你可以在你仓库看见图片,如果没有上传成功那你没配好,上传好后,你可以在相册那里看到你上传的图片。

  1. 我们在前面有部署github action部署,这里我们要实现npm上传,这里上传每一张图片时,再去上传时会出现版本重复的问题,如果你不想每次上传都更改packages.json文件,这里我们写一个小小的脚本,并在CI中运行,下面是使用的脚本:

脚本:

1
2
3
4
5
6
7
8
9
10
11
import json;
import time;

with open("package.json", 'r', encoding='utf-8') as f:
jspack = json.load(f)

new_version = '1.1.' + str(int(time.time()))[1:11:1]
jspack['version'] = new_version
with open("package.json", 'w', encoding='utf-8') as f:
json.dump(jspack, f, ensure_ascii=False)

由于这个脚本用的是时间制的方式进行,更新的版本号如:1.1.685981683,很长的一个版本号显示,当即表示很不实用,后续用着也感觉不对劲,这里进行了修改,虽然还是有点瑕疵,不过应该勉强够用。

弃用(留着记录一次学习)

在本地是可以实现版本更新,但到了actions后虽然部署成功了,但是npm那里不会更新,后面我直接把后面五位截留了也不行,只能进行一次手动更新,这里也进行了actions版本更新,效果也很不理想,暂时想不到其它方式进行处理。

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

# 读取 package.json 文件
with open('package.json', 'r',encoding='utf-8') as f:
jspack = json.load(f)

# 获取当前版本号
current_version = jspack['version']

# 递增版本号
major, minor, patch = map(int, current_version.split('.'))
patch += 1
new_version = f"{major}.{minor}.{patch}"

# 更新版本号
jspack['version'] = new_version

# 写入更新后的 package.json 文件
with open('package.json', 'w',encoding='utf-8') as f:
json.dump(jspack, f,ensure_ascii=False)

直接用递增方式进行更新,这样就实现了版本自动更新,也不用搞这么长的版本号显示了。

CI配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
name: Deploy to NPM CDN
'on':
- workflow_dispatch
- push
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16.x
- run: python3 new_version.py
- uses: JS-DevTools/npm-publish@v1
with:
token: ${{ secrets.NPM_TOKEN }}

这样我们就不需要自己去手动更新版本了。

注意事项

Github图床 存储的图片总大小不能超过 1G,否则会有人工审核仓库内容,如果发现用来做图床,轻则删库,重则封号。因此为了安全起见,建议在 1G 之前就换个仓库,反正可以创建无数个仓库嘛。

jsDelivr + Npm 依然有 100MB 的包大小限制,但是 NPM 有丰富的国内节点。可以挑选一个使用,个人推荐 TianliCDN