npm 图床搭建

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

GitHub图床仓库创建

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

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

1 2	git clone git@github.com:[username]/[AssetsRepo].git # username是你的GitHub名，AssetsRepo是你创建的仓库

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

npm注册

这里先去注册一个npm账号，访问npm注册页面
这里会直接让你进行邮箱验证，验证完后，你会进入的npm显示界面
在git clone下来的[AssetsRepo]文件夹下打开终端，输入以下指令切换回原生源
1
npm config set registry https://registry.npmjs.org

这里我们添加npm本地访问

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

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

这里运行npm初始化指令，把整个图床仓库进行打包，按照指示进行配置，注意需要事先确认你的包名没有和别人已发布的包重复，可以在npm官网搜索相应包名，搜不到就说明还没被占用。

1 2	# 初始化 npm init

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

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 即可。

然后输入发布指令，我们就可以把包发布到 npm上了。
1
npm publish
不报错，显示结果如下：

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

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

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

这里再分享几个cdn源。

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)

这里你也可以利用unpkg进行自建。（unpkg是一个内容源自npm的全球快速CDN）。它是部署再cloudflare上的，在大陆地区访问的是香港的节点。

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

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

这里记得选择Automation

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

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

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.2、1.1.3=>1.1.4。免去了打开package.json再修改版本号的麻烦。（大版本更新还是需要手动改的）
更新 npm 图床务必要记得更新package.json里的版本号！

扩展布置

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

PicGO下载

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

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

下载源	地址/安装方式	平台	备注
GitHub Release	https://github.com/Molunerfinn/PicGo/releases	All	国内下载速度可能会慢
腾讯云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_PicGo	All	感谢山东大学镜像站 (opens new window)提供的镜像支持
Scoop(opens new window)	`scoop bucket add helbing https://github.com/helbing/scoop-bucket` & `scoop install picgo`	Windows	感谢 @helbing 的贡献
Chocolatey(opens new window)	`choco install picgo`	Windows	感谢 @iYato 的贡献
Homebrew(opens new window)	`brew install picgo --cask`	macOS	感谢 @womeimingzi11 的贡献
AUR(opens new window)	`yay -S picgo-appimage`	Arch-Linux	感谢 @houbaron 的贡献

PicGO配置

登录我们的GitHub,创建TOKEN。

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

点击Developer settings

选择tokens (classic)

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

选择repo

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

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

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

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

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

脚本：

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版本更新，效果也很不理想，暂时想不到其它方式进行处理。

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配置：

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 }}