GitHub图床仓库创建

  1. 创建一个新仓库用于保存图片

  2. 我们这里找一个合适的文件夹位置，这里把刚才的链接进行拷贝，前面加上git clone。

    1
    2
    git clone git@github.com:[username]/[AssetsRepo].git
    # username是你的GitHub名，AssetsRepo是你创建的仓库

  3. 文件夹下就会有你创建的仓库名，里面有你的保存在仓库的文件和一个隐藏文件夹。

npm注册

  1. 这里先去注册一个npm账号，访问npm注册页面

  2. 这里会直接让你进行邮箱验证，验证完后，你会进入的npm显示界面

  3. 在git clone下来的[AssetsRepo]文件夹下打开终端，输入以下指令切换回原生源

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

  4. 这里我们添加npm本地访问

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

点击访问链接进行验证后显示Go to home page按钮，点击确认即可。

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

    1
    2
    # 初始化
    npm init

    这里是我成功过后的步骤，需要填写的我会进行备注（看--->），这里你只需要进行填写即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
        Microsoft Windows [版本 10.0.22621.1702]
    (c) Microsoft Corporation。保留所有权利。

    C:\hexo-npm\musi-static>npm config set registry https://registry.npmjs.org

    C:\hexo-npm\musi-static>npm adduser
    npm notice Log in on https://registry.npmjs.org/
    Create your account at:
    https://www.npmjs.com/login?next=/login/cli/23fdf572-d93a-443f-8a8c-d3f7c89fa858
    Press ENTER to open in the browser...
    Logged in on https://registry.npmjs.org/.

    C:\hexo-npm\musi-static>npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.

    See `npm help init` for definitive documentation on these fields
    and exactly what they do.

    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.

    Press ^C at any time to quit.
    package name: (musi-static) musi-static ---> 包名
    version: (1.0.0) ---> 版本号（默认即可）
    description: musi static file ---> 描述（不填写也可以）
    entry point: (index.js) ---> 默认
    test command:           ---> 默认
    git repository: https://github.com/baixmin/musi-static.git --->github仓库地址（不填也可以）
    keywords: static file   ---> 关键字（不填写也可以）
    author: musi            ---> 作者
    license: (ISC)          ---> 默认
    About to write to C:\hexo-npm\musi-static\package.json:

    {
      "name": "musi-static",
      "version": "1.0.0",
      "description": "musi static file",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/baixmin/musi-static.git"
      },
      "keywords": [
        "static",
        "file"
      ],
      "author": "musi",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/baixmin/musi-static/issues"
      },
      "homepage": "https://github.com/baixmin/musi-static#readme"
    }


    Is this OK? (yes) yes

    C:\hexo-npm\musi-static>

    最后会输出一段 package.json文件，下面显示Is this OK? (yes)，输入 yes 即可。

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

    1
    npm publish

    不报错，显示结果如下：

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

    jsdelivr+npm 的图片引用和 jsdelivr+github 基本相同，例如我在[AssetsRepo]仓库里存放的/img/index.png。

    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
    cdn1.tianli0.top/
    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)

  4. 这里你也可以利用unpkg进行自建。（unpkg是一个内容源自npm的全球快速CDN）。它是部署再cloudflare上的，在大陆地区访问的是香港的节点。

  5. 这里进行github action实现上传，让你节省时间，减少你的工作，能偷懒的地方怎么能不偷懒呢😀。

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

      这里记得选择Automation

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

    • 在本地的[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
      name: Node.js Package
      # 监测图床分支，2020年10月后github新建仓库默认分支改为main，记得更改
      on:
        push:
          branches:
            - main

      jobs:
        publish-npm:
          runs-on: ubuntu-latest
          steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                node-version: "18.x"
                registry-url: https://registry.npmjs.org/
            - 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

      此处的四行指令顺序严格。

      可以在本地的[AssetsRepo]新建一个img文件用来存放图片。

      每次更新 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里的版本号！

    关于使用