前言

本章节讲解图床的搭建以及管理图片工具和如何去访问图片

Github（图床 1）

先 GitHub 创建一个仓库，记得是公开的加勾选 md 文档，再去https://github.com/settings/apps

可以看到 Personal access tokens 点开，点 Tokens 再点 New personal access token (classic)，时间永久过期，勾选 repo 再生成，然后保存一下 token 等会用

也可以将这个仓库同步到 Vercel，再配置一个二级域名进行访问

picGo

管理上传的图片工具结合 Typora 使用

下载地址：https://github.com/Molunerfinn/PicGo/releases/tag/v2.3.1

下载并启用，如果不能启动，右键勾起兼容模式，管理员身份启动

设置如下
图片

换了号也配了

luckyNwa/lucky-pic-bed

main

img/

https://cdn.jsdelivr.net/gh/luckyNwa/lucky-pic-bed@main

注意

设定自定义域名下面带加速的：

https://cdn.jsdelivr.net/gh/[github用户名]/[仓库名]@main

注意，此处的分支一定要填写@main，否则默认使用 master 分支。而现在 github 创建的默认分支名为 main，如果不指定，则会出现图片不能上传的情况

picgo-server 设置里端口必须在 PicGo 设置中—>设置 Server—> 36677

GitHub 图床仓库大小不能超过 1G。因为 GitHub 原则上是反对仓库图床化的，当仓库超过 1G 后会有人工审核仓库内容，如果发现用来做图床，轻则删库重则封号

Typora

绑定 Typora，在顶部菜单界面，选择“文件” - > “偏好设置”，设置图片存储方式，选择上面的软件和它的路径验证即可

npm（图床 2）

接下来用 npm 来做图床，采用提交到 GitHub 让它 Acition 去 npm 打包、我们通过加速访问 npm 里的资源

先去npm 官网注册账号绑定邮箱
拉取上面 GitHub 仓库,进入根目录，cmd 切出来

1
2
3
npm config set registry https://registry.npmjs.org
npm adduser   # 仅第一次使用需要添加用户，浏览器验证
npm login     # 非第一次使用直接登录即可，浏览器验证

运行 npm 初始化指令，把整个图床仓库打包，按照指示进行配置

注意需要事先确认你的包名没有和别人已发布的包重复，可以在 npm 官网搜索相应包名

搜不到就说明还没被占用

1
2
3
npm init      绑定npm仓库 配置唯一包名、版本、作者名即可

npm publish   提交

图片

每次都要在本地进行 npm publish 的话，npm 的提交是整个包一起上传的，不存在增量更新，耗时不说

而且还往往需要架梯子才能正常上传。所以我们可以把它交给 github action 来完成

在 npm 官网->头像->Access Tokens->Generate New Token,class 那个勾选 Automation 选项，Token 只会显示这一次

luckynwa6 的 npm 号的 token 绑定 2428…邮箱

在 github 的图床仓库设置项里添加一个名为 NPM_TOKEN 的 secrets，把获取的 Npm 的 Access token 输入进去

加个 GitHub 的行为，新增一个文件

autopublish.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
name: Node.js Package
on:
  push:
    branches:
      - main

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/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
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 里的版本号！

Cloudflare（图床）

Cloudflare 官网 我用苹果账号扫码登录

找个 Pages—>创建—>连接到 GitHub

访问初始域名+资源路径

回源

提交完就可以访问了，国内有 cdn 加速访问 jsdelivr 官网

jsdelivr+npm 的图片引用和 jsdelivr+github 很相似

jsdelivr 加上 npm 回源 https://cdn.jsdelivr.net/npm/lucky-img/img/lucky675.png

版本 1.0.0 可以不加 https://cdn.jsdelivr.net/npm/lucky-img@1.0.0/img/lucky675.png

jsdelivr 给 GitHub 回源 https://cdn.jsdelivr.net/gh/luckyNwa6/lucky-pic-bed@main/pic/Somewhere.jpg

unpkg 回源 npm

https://npm.onmicrosoft.cn/lucky-img@1.0.0/pic/Somewhere.jpg

https://unpkg.com/lucky-img@1.0.0/pic/Somewhere.jpg

下面别人可以，我这不行，不理解、明白的朋友麻烦留言指点一下，谢谢

1
2
3
4
5
6
https://npm.elemecdn.com/:package@:version/:file
【百度出品，网宿国内节点】
https://code.bdstatic.com/npm/:package@:version/:file
【饿了么出品，网宿国内节点】
https://shadow.elemecdn.com/npm/:package@:version/:file
https://unpkg.com/:package@:version/:file   香港节点

https://npm.elemecdn.com/musiccdn-ariasaka/pic/群青.jpg 可以

https://lucky-pic-bed.pages.dev/img/lucky675.png Cloudflare 不行

全部采用这个方式https://npm.onmicrosoft.cn/lucky-img@1.0.0/pic/Somewhere.jpg回源

效果如下

效果