使用Github+Picgo+npm实现免费图床

news2024/12/26 11:03:59

本文参考自 Akilar,原文地址:https://akilar.top/posts/3e956346/

Picgo的配置

  1. Github图床仓库内容不能超过1GB,因为Github原则上是反对仓库图床化的,超过1GB之后会由人工审核仓库内容,如果仓库被发现用来做图床,轻则删库重则封号
  2. jsDelivr加速的单文件大小为50MB,这就限制了单张图片大小上限
  1. 首先创建一个图床仓库用来放图片,名称随意。以下内容使用[AssetsRepo] 代指图床仓库
  2. 访问Github->头像(右上角)->Settings->Developer Settings->Personal access tokens->generate new token,创建的Token名称随意,但必须勾选repo项。

Token只会显示一次,必须记牢,如果忘了就只能重新配置

  1. 下载Picgo软件,可以直接访问Picgo的github仓库,在release中下载最新版本的安装包。

  2. 打开Picgo,找到图床设置,选择Github图床,根据指示填写对应内容。

    • 设定仓库名:[UserName]/[AssetsRepo]
    • 设定分支名:2020年10月后github新建仓库默认分支改为main,在这之前的是master
    • 设定Token:填入第二步时申请到的Token
    • 指定存储路径:这是存放图片的路径,这里可以直接写/表示存放在根目录。
    • 设定自定义域名:在图片上传后,PicGo会按照自定义域名+指定储存路径+上传的图片名的方式生成访问链接,并放到粘贴板上,例如要使用jsDelivr加速,则设置为https://cdn.jsdelivr.net/gh/[UserName]/[AssetsRepo],上传完毕后,我们就可以通过https://cdn.jsdelivr.net/gh/[UserName]/[AssetsRepo]/指定存储路径/图片名加速访问我们的图片了。

npm图床的使用

  1. 首先,注册一个npm的账号。访问npm注册页面

  2. 找到我们之前在Github创建好的图床仓库,把它clone下来

  3. 在clone下来的[AssetsRepo]文件夹下打开终端,输入以下指令

npm config set registry https://registry.npmjs.org
  1. 添加本地npm用户设置
# 仅第一次使用需要添加用户,之后会提示你输入你的npm账号密码以及注册邮箱
npm adduser
# 非第一次使用直接登录即可,之后会提示你输入你的npm账号密码以及注册邮箱
npm login
  1. 运行npm初始化指令,把整个图床仓库打包,按照指示进行配置,需要注意事先确定你的包名没有和别人已经发表过的包名重复,建议使用id+仓库名的方式来定义新包名

最后会输出一段package.json,输入yes即可

  1. 输入发布命令,我们就可以把包发布在npm上了
npm publish
  1. 获取存储在npm仓库的资源的方法
# jsDelivr+github链接
https://cdn.jsdelivr.net/gh/[GithubUserName]/[AssetsRepo]/img/index.png
# jsDelivr+npm链接
https://npm.elemecdn.com/[NpmPackageName]/img/index.png
# unpkg+npm
https://unpkg.com/:package@:version/:file
  1. 如果每次都要在本地进行npm publish的话,npm的提交是整个包一起上传的,不存在增量更新,耗时不说,而且还往往需要架梯子才能正常上传。所以我们可以把它交给github action来完成。

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

​ 在github的[AssetsRepo]仓库设置项里添加一个名为NPM_TOKENsecrets,把获取的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" # 改为自己的node.js版本,在终端用node -version查询
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

在[AssetsRepo]文件夹下打开终端,输入以下指令

# 将更改提交
git add .
git commit -m "npm publish" # 双引号里面的内容自行修改
# 更新package版本号
npm version patch
# 推送至github触发action
git push

这四条指令的执行是非常严格的,不能错不能乱。npm每次发布包之前都需要更新一次包版本(也就是第3条指令),更新包版本有两种方法,一种就是上面的指令,直接将末尾的版本号+1,另外一种就是在package.json里面修改(大版本更新需要手动修改)

如果没有更新版本号就直接发布包,就会导致发布失败


也算是填上之前挖的一个坑了吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1634205.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

简要说说软分叉和硬分叉。

前言 一、软分叉 二、硬分叉 三、用途 总结 前言 软分叉和硬分叉是区块链技术中的两个重要概念,它们通常与加密货币的网络升级有关。下面我将分别解释这两个概念,并提供一些例子来帮助理解。下面是方便理解软分叉和硬分叉的图 一、软分叉 软分叉是一…

docker学习笔记4:CentOS7安装docker

文章目录 一、安装docker二、配置阿里云加速三、测试镜像安装本篇博客介绍如何在centos7里安装docker,关于CentOS7的安装可以查看本专栏的这篇博客: VmWare CentOS7安装与静态ip配置 centos7里安装docker步骤如下: 一、安装docker 先在终端输入su进入root用户,输入如下命…

Outlook大附件插件 有效解决附件大小限制问题

很多企业都是使用Outlook来进行邮件的收发,可是由于附件大小有限,导致很多大文件发不出去,就会产生Outlook大附件插件这种业务需求。 邮件系统在发送大文件时面临的限制问题主要如下: 1、附件大小限制:大多数邮件服务…

操作系统课程设计-人机交互的模拟操作系统

(一)课设板块 模块划分: (1)、进程管理模块 (2)、内存管理模块 (3)、文件管理模块 (4)、设备管理模块 (5)、界面管理模块…

Elasticsearch中【文档查询】DSL语句以及对应的Java实现

目录 全文检索查询 精准查询 布尔查询 排序、分页查询 高亮 地理查询 复合查询 Elasticsearch提供了基于JSON的DSL(Domain Specific Language)来定义查询。常见的查询类型包括: 查询所有:查询出所有数据,一般测…

C语言:项目实践(贪吃蛇)

前言: 相信大家都玩过贪吃蛇这款游戏吧,贪吃蛇是久负盛名的游戏,它也和俄罗斯方块,扫雷等游戏位列经典游戏的行列,那贪吃蛇到底是怎么实现的呢? 今天,我就用C语言带着大家一起来实现一下这款游戏…

Springboot+Vue项目-基于Java+MySQL的校园疫情防控系统(附源码+演示视频+LW)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &…

达梦(DM) SQL聚集函数及日期运算操作

达梦DM SQL聚集函数及日期运算操作 聚集函数MAX、MIN、SUM、AVG、COUNT使用分析函数 sum (…) over (order by…) 可以生成累计和更改累计和的值计算出现次数最多的值 日期运算加减日、月、年加减时、分、秒日期间隔之时、分、秒日期间隔之日、月、年求两个日期间的工作天数确定…

《C语言深度解剖》(10):数组指针、指针数组和数组指针数组

🤡博客主页:醉竺 🥰本文专栏:《C语言深度解剖》《精通C指针》 😻欢迎关注:感谢大家的点赞评论关注,祝您学有所成! ✨✨💜💛想要学习更多C语言深度解剖点击专栏…

抄表自动化的实现与优势

1.界定与简述 抄表自动化是一种当代关键技术,致力于取代传统的手动式抄表方法,通过远程数据数据采集解决,完成电力工程、水、气等公用事业电力仪表的全自动载入。这一系统利用先进的感应器、物联网技术(IoT)设备及数据数据分析工具&#xff…

2024年第十五届蓝桥杯江苏省赛回顾

呜呜呜~~~ 我在考完了后感觉自己直接炸了:好多学到的算法都没有用上,几乎所有的题目都是暴力的。。。 最后十几分钟对于一道dp算法终于有思路了,但是。。匆匆忙忙之间就是没有调试出来。(还是交了一道暴力[旋风狗头]直接哭死~~&…

【七十三】【算法分析与设计】516. 最长回文子序列,二叉树,329. 矩阵中的最长递增路径,记忆化递归填表

516. 最长回文子序列 给你一个字符串 s ,找出其中最长的回文子序列,并返回该序列的长度。 子序列定义为:不改变剩余字符顺序的情况下,删除某些字符或者不删除任何字符形成的一个序列。 示例 1: 输入:s &qu…

JAVA系列 小白入门参考资料 类和对象(3)

温馨提示: 此篇文章需要前两篇文章作为基础。 JAVA系列 小白入门参考资料 类和对象(1)​​​​​​​ JAVA系列 小白入门参考资料 类和对象(2) 目录 1. 封装 引入封装 访问修饰符 封装的具体实现 get方法和…

55.基于SpringBoot + Vue实现的前后端分离-旅游管理系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统,采用SpringBoot Vue框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、操作简单,功能齐全的特点,使得基于SpringBoot Vue技术的旅游管理系统设计与实现管理工作系统…

ElasticSearch面试题2

Mapping属性详细介绍/常见的字段数据类型: 映射(mapping)︰mapping是对索引库中文档的约束信息(例如字段名、数据类型),类似表的结构约束;每个索引库都应该有自己的映射 数据库一定要先创建表才能去添加数据…

【Java】图书管理系统 介绍与实现

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持! 1.介绍 图书馆作为知识的殿堂和学术的中心,其管理系统不仅是图书馆管理的必备工具,更是为用户提供优质、高效服务的重要保障,促进了知识的传播和学术的发展。随着…

SpringSecurity + Oauth2 + jwt实现单点登录

文章目录 前言一、springsecurity oauth2 redis方式的缺点二、oauth2认证的4种模式的选择三、认证服务器的编写 第一步、创建WebSecurity配置类第二步、创建jwt仓库配置类第三步、创建UserDetailsService类第四步、创建认证服务器配置类 四、测试认证服务器的功能 1.创建Login…

【简单讲解下FastStone Capture】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

React的数据Mock实现

在前后端分类的开发模式下,前端可以在没有实际后端接口的支持下先进行接口数据的模拟,进行正常的业务功能开发 1. 常见的Mock方式 2. json-server实现Mock 实现步骤: 项目中安装json-server npm i -D json-server准备一个json文件 {"…

Jammy@Jetson Orin Nano - Tensorflow GPU版本安装

JammyJetson Orin Nano - Tensorflow GPU版本安装 1. 源由2. 问题3. 分析3.1 当前版本Tensorflow 2.16.13.2 GPU版本二进制安装3.3 GPU版本源代码安装3.3.1 问题1 ERROR: no such target //tensorflow/tools/pip_package:wheel3.3.2 问题2 fatal error: cstddef file not found…