博客的文章经常需要插入图片,如果我将文档与图片放在一起,那么图片的加载速度将会很慢,于是我使用了图床。
图床的选择有很多,笔者之前写过一篇关于免费图床的汇总,本文就来介绍下我采用的方案:Github图床,NPM。
+
,并选择New Repository
创建自己的仓库。public
,Readme
文件可以创建,然后点击Create Repository
创建仓库。创建公钥
、上传公钥
、检查通信
这几步,确保计算机有权限访问远程仓库,所述教程是用的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
最后看见如下信息就代表推送成功了
仓库此时应该也有了刚刚上传的资源了
下次增删图片或者其他东西,就这样照猫画虎就可以推上来更新仓库!
直接访问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
此方法加载速度较快,但是需要域名自定义绑定,其优点也是可以绑定自定义域了,目前Vercel每个月限制流量100GB
通过Github继续
,选择导入刚刚创建的仓库,然后直接部署即可View Domains
添加新的域名,添加一个自己域名的二级域名,然后在你对应的域名解析控制台添加对应解析,等待生效。自定义域名+资源路径
即可访问到对应的资源,例如我这里为https://fantasy-static.777nx.cn/img/wallhaven-72x31v.png
# 将更改提交
git add .
git commit -m "更新图片"
# 推送至github仓库
git push
这个命令默认是更新到仓库的main
分支上,Vercel一旦检测到main分支发送变化就会触发新一轮部署,我们稍候片刻即可通过新的路径访问到新的资源。
此方法速度比Vercel稍慢,但是可以不需要域名,目前我就在用这个,而且CloudFlare对于普通用户来说几乎不限量了
Pages
,再创建一个新项目并通过Git进行连接,所有参数默认直接部署。初始域名+资源路径
即可访问到的对应资源,例如我这个就是fantasy-static.pages.dev/img/wallhaven-72x31v.png
,当然你也可以绑定自定义域名使用。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
npm config set registry https://registry.npmjs.org
# 仅第一次使用需要添加用户,之后会提示你输入你的npm账号密码以及注册邮箱
npm adduser
# 非第一次使用直接登录即可,之后会提示你输入你的npm账号密码以及注册邮箱
npm login
npm init
最后会输出一段package.json,请求确认,输入yes即可。
npm publish
[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/:file
如果每次都要在本地进行npm publish
的话,npm的提交是整个包一起上传的,不存在增量更新,耗时不说,而且还往往需要架梯子才能正常上传。所以我们可以把它交给github action来完成。
Token
只会显示这一次,之后如果忘记了就只能重新生成重新配置了。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
里的版本号!
100MB
的包大小限制,但是NPM有丰富的国内节点。