npm+github图床搭建

更新 更新autopublish.yml文件，原流程会报错

创建GitHub图床仓库

1.创建一个新仓库用于存放图片，复制仓库链接

2.在本地合适的位置打开终端，将刚才创建的仓库克隆下来

npm配置

1.注册一个npm账号

2.在克隆下来的文件夹下打开终端，输入以下命令切换回原生源

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

3.添加npm本地访问

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

4.这里运行npm初始化指令，把整个图床仓库进行打包，按照指示进行配置，注意需要事先确认你的包名没有和别人已发布的包重复

1
npm init

5.输入命令将包发布到npm上

1
npm publish

6.由于在国内访问无响应，这里就要使cdn进行加载，使你的访问速度提升，访问jsdelivr官网，获取链接。

1
2
3
4
# jsDelivr+github链接
https://cdn.jsdelivr.net/gh/[GithubUserName]/[AssetsRepo]/img/index.png
# jsDelivr+npm链接
https://cdn.jsdelivr.net/npm/[NpmPackageName]/img/index.png

  • 可用cdn

    1
    2
    3
    4
    5
    6
    7
    8
    jsd.onmicrosoft.cn/
    jsdelivr：fastly.jsdelivr.net
    饿了么1：github.elemecdn.com（使用可参考UNPKG）
    饿了么2：npm.elemecdn.com（使用可参考UNPKG）
    知乎：unpkg.zhimg.com（使用可参考UNPKG）
    jsd.onmicrosoft.cn(回源 jsDelivr，使用可参考jsDelivr)
    npm.onmicrosoft.cn (回源 UNPKG，使用可参考UNPKG)
    cdnjs.onmicrosoft.cn (回源 cdnjs，使用可参考cdnjs)

GitHub action工作流

使用github action实现上传，节省时间，该偷懒还是要偷懒的

  • 在npm官网->点击你的头像->选择Access Tokens->进入页面点击Generate New Token->选择Classic Token，勾选Automation选项，这里Token只会显示一次，记得保存

  • 在 github 的[AssetsRepo]仓库设置项里添加一个名为NPM_TOKEN的secrets，把获取的 NPM 的 Access token 输入进去,再添加一个名为NPM_REGISTRY_URL,值为https://registry.npmjs.org/的secrets

  • 在本地的[AssetsRepo]文件夹下新建[AssetsRepo]/.github/workflows/autopublish.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    name: Node.js Package
    # 监测图床分支，2020年10月后github新建仓库默认分支改为main，记得更改
    on:
      push:
        branches:
          - master

    jobs:
      publish-npm:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - uses: actions/setup-node@v3
            with:
              node-version: "16.x"
          - name: Configure npm authentication
            run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
          - run: npm publish
            env:
              NODE_AUTH_TOKEN: ${{secrets.npm_token}}

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

    1
    2
    3
    4
    5
    6
    7
    # 将更改提交
    git add .
    git commit -m "npm publish"
    # 更新package版本号
    npm version patch
    # 推送至github触发action
    git push