我的图床解决方案
一、前言
博客的文章经常需要插入图片，如果我将文档与图片放在一起，那么图片的加载速度将会很慢，于是我使用了图床。
图床的选择有很多，笔者之前写过一篇关于免费图床的汇总，本文就来介绍下我采用的方案：Github图床，NPM。
二、基于GitHub仓库的图床
2.1 建立Github仓库
- 进入Github官网注册并登录自己的账号，到自己的个人主页，点击右上角的
+，并选择New Repository创建自己的仓库。
- 仓库名字随意，描述也可以自由发挥，可见性最好选
public，Readme文件可以创建，然后点击Create Repository创建仓库。
- 让你的计算机与Github建立通信，这部分可以参考Hexo 博客搭建基础教程 (一)的第7点，主要是
创建公钥、上传公钥、检查通信这几步，确保计算机有权限访问远程仓库，所述教程是用的RSA公钥。
- 先在本地创建一个文件夹，文件夹位置和名字随意就可以，进入该文件夹后右键打开
Git Bash，然后输入以下代码把之前创建的仓库拷贝下来，其中git clone后面的东西要替换成自己的仓库信息，可以通过自己仓库的ssh链接来获取。
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加速
1.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.png1.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分支发送变化就会触发新一轮部署，我们稍候片刻即可通过新的路径访问到新的资源。
1.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下来。找个空文件夹打开终端输入
git clone git@github.com:[username]/[AssetsRepo].git
#或者
git clone https://github.com/[username]/[AssetsRepo].git例如我的是：
git clone git@github.com:777nx/fantasy-static.git
#或者
git clone https://github.com/777nx/fantasy-static.git- 在clone下来的AssetsRepo文件夹内(例如我的是fantasy-static文件夹内)打开终端，输入以下指令切换回原生源
npm config set registry https://registry.npmjs.org- 添加本地npm用户设置
# 仅第一次使用需要添加用户，之后会提示你输入你的npm账号密码以及注册邮箱
npm adduser
# 非第一次使用直接登录即可，之后会提示你输入你的npm账号密码以及注册邮箱
npm login- 运行npm初始化指令，把整个图床仓库打包，按照指示进行配置，注意需要事先确认你的包名没有和别人已发布的包重复，可以在npm官网搜索相应包名，搜不到就说明还没被占用。
npm init
最后会输出一段package.json，请求确认，输入yes即可。
- 然后输入发布指令，我们就可以把包发布到npm上了。
npm publish- jsdelivr+npm 的图片引用和 jsdelivr+github 很相似，例如我在
[AssetsRepo]仓库里存放的/img/wallhaven-72x31v.png
# jsDelivr+github链接
https://cdn.jsdelivr.net/gh/[GithubUserName]/[AssetsRepo]/img/index.png
# jsDelivr+npm链接
https://cdn.jsdelivr.net/npm/[NpmPackageName]/img/index.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 上，在大陆地区访问到的是香港节点。所以速度也不错。)
https://unpkg.com/:package@:version/:file3.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里的版本号！
四、参考教程
五、最后
- GitHub图床仓库大小不能超过1G。当仓库超过1G后会有人工审核仓库内容，如果发现用来做图床，轻则删库重则封号。
- Npm有
100MB的包大小限制，但是NPM有丰富的国内节点。