使用GitHub图床存放博客静态资源

摘要：本文主要介绍了如何使用GitHub图床存放静态资源，并对静态资源的获取进行加速。

1 简介

博客暂时还没有服务器进行备案，也不想使用别人的图床，就只能自己打一个比较简陋的了。

使用GitHub作为图床，但是需要注意不要超过1G容量，超过1G的时候需要想办法进行拆分。

使用NPM加速访问，实现CDN的效果。

2 GitHub

GitHub官网：https://github.com/

如果没有注册过GitHub的话，需要注册一个账号。

创建一个用于存储静态资源的仓库。

点击右上角个人头像，在下拉列表中点击Settings进入设置界面。

点击左侧菜单栏底部的Developer Settings进入开发者界面。

点击Personal access tokens选项，然后点击Tokens (classic)菜单，并在右侧点击Generate new token下拉列表中的Generate new token (classic)按钮：

在Note中输入对Token使用的描述，把Expiration设置为No expiration永不过期，然后给下面的Select scopes勾选repo选框：

最后点击底部的Generate token创建Token，并将页面上展示的Token进行复制保存，这个Token只会出现这一次，忘记只能重新生成。

将静态资源文件上传到仓库里。

3 NPM

3.1 注册

NPM官网：https://www.npmjs.com/

注册NPM账号：

新账号注册后需要配置2FA认证：

1

You don’t have two-factor authentication (2FA) enabled on your account. Configure 2FA or visit our docs to learn more.

点击2FA认证链接，选择使用Authenticator app的方式认证：

在手机上下载Authenticator并安装，打开后选择扫描QR码然后扫描网页上的二维码，将生成的一次性密码代码输入底部的密码框中。

保存好生成的恢复代码，这里只出现一次，忘记需要重新生成。

3.2 本地仓库

进入静态资源的本地仓库，执行以下命名切换回原生源：

1

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

如果是第一次使用，需要执行命令添加本地NPM用户配置，输入账户和密码以及邮箱即可：

1

npm adduser

如果不是第一次使用，执行登录命令，输入账户和密码以及邮箱即可：

1

npm login

如果命令行提示需要登录，在下面的网址里完成登录即可：

1

Create your account at:

在打包前准备好包名，需要事先确认包名没有重复，可以在NPM官网搜索相应包名，搜不到就说明还没被占用。

执行初始化命令，将仓库打包，按照指示进行配置：

1

npm init

根据实际情况填写，红框内的使用默认就好：

注意名称不要使用带有年月日的数字，不然会被认为垃圾名称发布失败，尽量是用-短横线分隔。

最后输入yes即可。

打包以后就可以发布了，执行命令：

1

npm publish --otp=123456

命令说明：

• –otp：需要输入Authenticator生成的一次性密码。

发布成功提示：

发布成功后，可以寻找NPM的节点使用，比如可以按照下面的方式使用：

1

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

3.3 升级仓库

以后使用静态资源的时候，先在本地试用，然后将静态资源同步到GitHub上，再发布NPM升级包。

使用命令增加NPM版本，版本由3位组成，从左到右分别是：

• major：主要版本，左边首位，不会向后兼容的重大改动。
• minor：次要版本，中间位，向后兼容的新增功能。
• patch：补丁版本，右边首位，向后兼容的缺陷修复。

如果需要更新补丁版本，执行如下命令即可，会自动给版本的patch部分加一：

1

npm version patch

然后执行发布命令：

1

npm publish --otp=123456

发布成功后修改使用的版本就可以了。