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

本文参考自 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.mfbz.cn/a/582682.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

与Apollo共创生态:我们携手远航

目录 小程一言会议记录 回望7年发展展望未来小程有感 小程一言 4月22日,百度Apollo在北京车展前夕举办了以“破晓•拥抱智变时刻”为主题的智能汽车产品发布会。我在观看后也是很是触动 作为在校大学生的我,从大一开始知道Apollo开始,Apollo…

什么是智慧民航?详解实现智慧民航目标的关键工具与技术

一、 智慧民航是什么? 智慧民航是指运用现代信息技术,特别是互联网、大数据、云计算、物联网和人工智能等,对民航业的各个环节进行优化和革新的一种模式。它致力于实现民航服务的个性化、运营的高效化、管理的智能化和监管的精准化&#xf…

六西格玛培训:利弊权衡与企业实践策略探讨

在当今竞争激烈的商业环境中,企业追求卓越品质、降低成本、提升顾客满意度和增强员工能力显得尤为重要。六西格玛培训作为一种卓越的管理方法,正逐渐受到越来越多企业的青睐。它旨在通过严谨的数据分析和流程优化,帮助企业实现持续改进&#…

密文域可逆信息隐藏技术综述(上)

加密图像可逆信息隐藏是一种加密原始图像后,在密文图像中可逆地隐藏附加数据,并且在数据提取后,原始图像可以被无损重建的技术。RDH-EI的分类如图1所示。 按对图像的加密方法,现有RDH-EI算法可分为对称加密域和非对称(公钥)加密域…

机器学习day1

一、人工智能三大概念 人工智能三大概念 人工智能(AI)、机器学习(ML)和深度学习(DL) 人工智能:人工智能是研究计算代理的合成和分析的领域。人工智能是使用计算机来模拟,而不是人类…

Linux网络配置以及DHCP

一、网络配置 将Linux主机接入到网络,需要配置网络相关设置 一般包括如下内容: 主机名 IP/netmask 路由:默认网关 DNS服务器 主DNS服务器 次DNS服务器 第三个DNS服务器 1.1显示网络接口的信息 ifconfig命令用于显示和配置网络接口的信…

STM32使用PWM控制舵机

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. 舵机简介 2. 硬件连接 3. 代码实现 3.1 PWM.c 3.2 PWM.h 3.3 Servo.c 3.4 Servo.h 3.5 main.c 3.6 完整工程文件 PWM和OC输出详解: STM32定时器的OC比较和PWM​​​​​​​ 1. …

YOLOv8-pose针对视频实时提取打印对应关节点序号及坐标

因为我在找如何提取YOLOv8-pose的关键点的时候,大多都是针对静态图像,视频直接套用不太行,因此就改进了一下,如下: 初步代码: import torch # 导入PyTorch库 import cv2 as cv # 导入OpenCV库并重命名为…

使用逆滤波算法deconvwnr恢复图像回复图像时,产生了很多横竖条纹。解决办法

使用逆滤波算法deconvwnr恢复图像回复图像时,产生了很多横竖条纹。解决办法 原来的代码 % 清除工作空间并关闭所有图形窗口 clear; clc; close all;% 读取原始图像 original_image imread(pic3.jpg);% 显示原始图像 subplot(131); imshow(original_image); title…

GDPU JavaWeb Servlet实现

踏入mvc的Controller层,实现servlet配置。 登录页面 1.参考课堂例子,客户端通过login.jsp发出登录请求,请求提交到loginServlet处理。如果用户名和密码相同则视为登录成功,跳转到loginSuccess.jsp页面,显示“欢迎你”用…

如果把软路由的网段更换成169.254.0.0/16会咋样?

前言 这几天有小伙伴在折腾软路由系统,然后问题就来了。 他咨询的是:为啥电脑连接软路由之后,无法访问软路由的管理页? 嗯。。。确实不是什么大事。但不注意看,还以为软路由没有正常获取到ip。 熟悉网络的小伙伴们都…

Python 自定义日志输出

Python 有着内置的日志输出模块:logging 使用也很方便,但我们今天不说这个,我们用文件读写模块,实现自己的日志输出模块;这样在项目中,可以存在更高的自由度及更高的扩展性; 先来看看日志输出…

k8s拉取不了私有镜像问题

报错 kubectl describe pod run-nfs-client-provisionercrictl pull 172.24.4.59/library/spark_lijia:3.5.1报错问题:“k8s拉取不了私有镜像” 可能是由于以下几个原因造成的:认证问题:私有镜像库可能需要用户名和密码才能拉取镜像。网络问…

vue3.2+vite+unocss原子化配置

1、安装unocss:npm install unocss 2、vite.config.ts中配置: 3、创建unocss自己的ts文件:uno.config.ts 根路径下创建, 4、在创建好的uno.config.ts文件中编写如下代码: // uno.config.ts import {defineConfig,prese…

985、211之后,“101计划”来了

日前,教育部部署基础学科系列“101计划”推进工作在京展开。 在985、211之后,“101计划”以锐不可当的气势重新进入高等教育大众的视野。 图 |基础学科系列“101计划”工作推进会暨计算机“101计划”成果交流会在京召开 缘起 一直以来,我国办…

您用来登录计算机的密码与登录密钥环里的密码不再匹配

您用来登录计算机的密码与登录密钥环里的密码不再匹配 问题描述解决方法 问题描述 在使用ubuntu系统时,打开程序显示“您用来登录计算机的密码与登录密钥环里的密码不再匹配“ 解决方法 1.在终端中输入 seahorse ,打开密钥管理 2.删除程序登陆密钥 3.打…

elaticsearch windows安装

es下载地址 https://www.elastic.co/cn/downloads/elasticsearch https://www.elastic.co/cn/downloads/past-releases#elasticsearch 在这里插入图片描述 下载直接解压,解压后目录 双击bin目录下的elasticsearch.bat开启服务 注意:9300 端口为 Elas…

我们不可能永远都在救火 ——Scrum中技术债

一、定义 技术负债(英语:Technical debt),又译技术债,也称为设计负债(design debt)、代码负债(code debt),是编程及软件工程中的借鉴了财务债务的系统隐喻。指…

智慧图书管理|基于SSM+vue的网上服装商城系统(源码+数据库+文档)

智慧图书管理目录 基于SSMvue的网上服装商城系统 一、前言 二、系统设计 三、系统功能设计 1.1 服装列表 1.2 公告信息管理 1.3 公告类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍&#xff1…

springboot拦载器

1、拦载器 package com.Interceptor;import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView;import javax.security.auth.login.Log…