我的图床解决方案

一、前言

博客的文章经常需要插入图片，如果我将文档与图片放在一起，那么图片的加载速度将会很慢，于是我使用了图床。

图床的选择有很多，笔者之前写过一篇关于免费图床的汇总，本文就来介绍下我采用的方案：Github图床，NPM。

二、基于GitHub仓库的图床

2.1 建立Github仓库

进入Github官网注册并登录自己的账号，到自己的个人主页，点击右上角的+，并选择New Repository创建自己的仓库。

仓库名字随意，描述也可以自由发挥，可见性最好选public，Readme文件可以创建，然后点击Create Repository创建仓库。

让你的计算机与Github建立通信，这部分可以参考Hexo 博客搭建基础教程 (一)的第7点，主要是创建公钥、上传公钥、检查通信这几步，确保计算机有权限访问远程仓库，所述教程是用的RSA公钥。

先在本地创建一个文件夹，文件夹位置和名字随意就可以，进入该文件夹后右键打开Git Bash，然后输入以下代码把之前创建的仓库拷贝下来，其中git clone后面的东西要替换成自己的仓库信息，可以通过自己仓库的ssh链接来获取。

1	git clone git@github.com:777nx/fantasy-static.git

看到上图的信息就代表成功把整个仓库拷贝到当前文件夹了，此时我们可以看见自己的文件夹多了个.git文件夹和Readme.md文件，这就代表成功了。

注意：.git是隐藏文件夹

此时我们最好在这个文件夹里面创建创建一个img文件夹专门存放图片，如果有存放其他类型资源的可以创建别的文件夹，比如现在想往仓库里加两张图，直接就把图片复制到img文件夹里面即可。

然后在带有Readme.md文件的那个文件夹内，右键打开Git Bash（注意看清楚是什么文件夹），然后依次输入以下命令把更改推送到远程仓库，最后一步不成功可能要多试几次。

# 将更改提交
git add .
git commit -m "更新图片"
# 推送至github仓库
git push

最后看见如下信息就代表推送成功了

仓库此时应该也有了刚刚上传的资源了

下次增删图片或者其他东西，就这样照猫画虎就可以推上来更新仓库！

2.2 Staticaly CDN加速

直接访问Github仓库的资源是非常慢的！因此我们要用一些免费的CDN进行加速，Staticaly CDN是目前免费CDN中比较好用的啦，他的应用规则如下：

# 格式 其中 user是用户名  repo是仓库名  version代表版本(tag或者分支 默认为main)  flie是文件路径 
https://cdn.staticaly.com/gh/user/repo@version/file

# 比如我的示例仓库就是加速地址就是这个大家可以参考参考
https://cdn.staticaly.com/gh/777nx/fantasy-static@main/img/wallhaven-72x31v.png

2.3 Vercel部署

此方法加载速度较快，但是需要域名自定义绑定，其优点也是可以绑定自定义域了，目前Vercel每个月限制流量100GB

进入Vercel控制面板新建项目，并通过Github继续，选择导入刚刚创建的仓库，然后直接部署即可

进入该项目控制台后，选择右上角的View Domains添加新的域名，添加一个自己域名的二级域名，然后在你对应的域名解析控制台添加对应解析，等待生效。

通过自定义域名+资源路径即可访问到对应的资源，例如我这里为https://fantasy-static.777nx.cn/img/wallhaven-72x31v.png
要更新图片怎么办？只要将资源复制到对应的文件夹，然后再执行一次下面的命令即可：

# 将更改提交
git add .
git commit -m "更新图片"
# 推送至github仓库
git push

这个命令默认是更新到仓库的main分支上，Vercel一旦检测到main分支发送变化就会触发新一轮部署，我们稍候片刻即可通过新的路径访问到新的资源。

2.4 Cloudflare部署

此方法速度比Vercel稍慢，但是可以不需要域名，目前我就在用这个，而且CloudFlare对于普通用户来说几乎不限量了

进入Cloudflare官网注册并登录自己的账号，然后进入控制台后选择左边的Pages，再创建一个新项目并通过Git进行连接，所有参数默认直接部署。

通过给出的初始域名+资源路径即可访问到的对应资源，例如我这个就是fantasy-static.pages.dev/img/wallhaven-72x31v.png，当然你也可以绑定自定义域名使用。

三、npm图床

3.1 npm发布包

首先需要注册一个npm的账号。访问npm注册页面

完成邮箱验证，注册完成后进入账号管理界面:头像->Account，拉倒最上方，你会看到You have not verified your email address字样的提示，点击以后按提示步骤验证你的邮箱。

找到我们之前创建的图床仓库，在本地合适的位置把它clone下来。找个空文件夹打开终端输入

1
2
3

git clone git@github.com:[username]/[AssetsRepo].git
#或者
git clone https://github.com/[username]/[AssetsRepo].git

例如我的是：

1
2
3

git clone git@github.com:777nx/fantasy-static.git
#或者
git clone https://github.com/777nx/fantasy-static.git

在clone下来的[AssetsRepo]文件夹内(例如我的是fantasy-static文件夹内)打开终端，输入以下指令切换回原生源

1	npm config set registry https://registry.npmjs.org

添加本地npm用户设置

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

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

npm init

最后会输出一段package.json，请求确认，输入yes即可。

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

1	npm publish

jsdelivr+npm 的图片引用和 jsdelivr+github 很相似，例如我在[AssetsRepo]仓库里存放的/img/wallhaven-72x31v.png

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

可以看到Npm只需要提供包名即可。这也是一开始要求包名不重复的原因之一

jsDelivr+Npm依然有100MB的包大小限制，但是NPM有丰富的国内节点。可以挑选一个使用。个人推荐知乎的。没有大小限制，而且也很稳定。

【jsd出品，网宿国内节点】
https://cdn.jsdelivr.net/npm/:package@:version/:file
【unpkg 自建】
https://cdn.cbd.int/:package@:version/:file

当然你也可以利用unpkg自建。(UNPKG 是一个内容源自 npm 的全球快速 CDN。它部署在 cloudflare 上，在大陆地区访问到的是香港节点。所以速度也不错。)

1	https://unpkg.com/:package@:version/:file

3.2 图片转换与发布

如果每次都要在本地进行npm publish的话，npm的提交是整个包一起上传的，不存在增量更新，耗时不说，而且还往往需要架梯子才能正常上传。所以我们可以把它交给github action来完成。

在npm官网->头像->Access Tokens->Generate New Token,勾选Automation 选项，Token只会显示这一次，之后如果忘记了就只能重新生成重新配置了。

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

在本地的[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@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}}

在本地的[AssetsRepo]文件夹下打开终端，运行以下指令，上传新增内容至 github，即可触发部署。

# 将更改提交
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里的版本号！