页面加载中
博客快捷键
按住 Shift 键查看可用快捷键
ShiftK
开启/关闭快捷键功能
ShiftA
打开/关闭中控台
ShiftD
深色/浅色显示模式
ShiftS
站内搜索
ShiftR
随机访问
ShiftH
返回首页
ShiftL
友链页面
ShiftP
关于本站
ShiftI
原版/本站右键菜单
松开 Shift 键或点击外部区域关闭
互动
最近评论
暂无评论
标签
寻找感兴趣的领域
暂无标签
    0
    文章
    0
    标签
    8
    分类
    10
    评论
    128
    功能
    深色模式
    标签
    JavaScript12TypeScript8React15Next.js6Vue10Node.js7CSS5前端20
    互动
    最近评论
    暂无评论
    标签
    寻找感兴趣的领域
    暂无标签
      0
      文章
      0
      标签
      8
      分类
      10
      评论
      128
      功能
      深色模式
      标签
      JavaScript12TypeScript8React15Next.js6Vue10Node.js7CSS5前端20
      未知歌曲
      未播放
      ♪ 暂无歌词 ♪
      随便逛逛
      博客分类
      文章标签
      复制地址
      深色模式
      AnHeYuAnHeYu
      Search⌘K
      博客
        暂无其他文档

        npm图床使用

        October 15, 20255 分钟 阅读107 次阅读
        1. 首先需要注册一个npm的账号。访问npm 注册页面
        image-20240817224302662
        1. 完成邮箱验证,注册完成后进入账号管理界面:头像->Account,拉倒最上方,你会看到You have not verified your email address字样的提示,点击以后按提示步骤验证你的邮箱。
        image-20240817224149307
        1. 在GitHub上创建一个图床仓库,在本地合适的位置把它clone下来。找个空文件夹打开终端输入
        bash
        git clone git@github.com:[username]/[AssetsRepo].git
        #或者
        git clone https://github.com/[username]/[AssetsRepo].git
        1. 在 clone 下来的[AssetsRepo]文件夹内打开终端,输入以下指令切换回原生源
        bash
        # 仅第一次使用需要添加用户,之后会提示你输入你的npm账号密码以及注册邮箱
        npm adduser
        # 非第一次使用直接登录即可,之后会提示你输入你的npm账号密码以及注册邮箱
        npm login
        1. 运行 npm 初始化指令,把整个图床仓库打包,按照指示进行配置,注意需要事先确认你的包名没有和别人已发布的包重复,可以在 npm 官网搜索相应包名,搜不到就说明还没被占用。
        bash
        npm init
        1. 最后会输出一段 package.json,请求确认,输入 yes 即可。
        2. 然后输入发布指令,我们就可以把包发布到 npm 上了。
        bash
        npm publish
        1. jsdelivr+npm 的图片引用和 jsdelivr+github 很相似,例如我在[AssetsRepo]仓库里存放的/img/index.png
        bash
        # 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 有丰富的国内节点。可以挑选一个使用。个人推荐知乎的。没有大小限制,而且也很稳定。

        txt
        【jsd出品,网宿国内节点】
        https://cdn.jsdelivr.net/npm/:package@:version/:file
        【unpkg 自建】
        https://cdn.cbd.int/:package@:version/:file

        当然你也可以利用unpkg自建。(UNPKG 是一个内容源自 npm 的全球快速 CDN。它部署在 cloudflare 上,在大陆地区访问到的是香港节点。所以速度也不错。)

        txt
        https://unpkg.com/:package@:version/:file
        1. 如果每次都要在本地进行npm publish的话,npm 的提交是整个包一起上传的,不存在增量更新,耗时不说,而且还往往需要架梯子才能正常上传。所以我们可以把它交给 github action 来完成。

        在npm 官网->头像->Access Tokens->Generate New Token,勾选 Automation 选项,Token只会显示这一次,之后如果忘记了就只能重新生成重新配置了。

        image-20240817223627178
        image-20240817223705890

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

        image-20240817224049515

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

        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" # 改为自己的node.js版本,在终端用node -version查询
                registry-url: https://registry.npmjs.org/
            - run: npm publish
              env:
                NODE_AUTH_TOKEN: ${{secrets.npm_token}}

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

        bash
        # 将更改提交
        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里的版本号!

        最后更新于 October 16, 2025
        On this page
        暂无目录