通过jsDelivr + github 搭建一个简易图床
应用场景:
在大型项目里需要很多图片时,不会直接把图片存储在项目文件夹里,也不推荐直接用数据库存储,而是用第三方存储,cdn,也可以自己搭个存储图片的服务器,等等方式,如果时自己练练手,做做博客,写写小项目,就可以用 jsDelivr + github 的方式把图片先存储在github的仓库里,然后再用jsDelivr的git链接调用图片即可,很方便,当然,如果有条件可以使用其他更好的方式。
步骤:
github:
github仓库的创建:
没有github账号的先注册一个github账号,登录进去后,直接点击左上角的猫头,进入图中界面,点击new。
进到新建仓库界面后
Repository name 填写你给这个仓库取的名字
Description 说明(可不填写)
Public 是仓库的访问权限(公开) Private (私有)
github图片的上传:
新建好仓库后,是如下图界面,上传图片的实现我没有使用命令行,而是使用的方便简单拖拽
点击uploading and existing file(上传和现有文件) 进入文件上传界面
进入上传界面后,如下图,把想要的图片拖入指示处,等待文件上传,上传完成后点击Commit changes(提交更改)
Commif changes成功后,再次点击左上角的猫头,左侧会有你的仓库,点击刚才创建的仓库,进入就会看见你刚才上传的文件
仓库版本的设置:
接着上一步(进入新建的仓库)
点击releases(发布)
进入发布界面后
点击中央的 Create a new release(创建新版本)后进入发布界面,如下图
指示处 填写版本号
点击底部按钮 Publish release(发布)
最后再回到自己仓库,输入框里填写 上一步设置的版本号,然后点击箭头指示处
jsDelivr:
进入jsDelivr:
点击 https://www.jsdelivr.com/ 进入jsDelivr首页面
点击 GitHub
直接复制指示链接
jsDelivr的GitHub第一条链接参数:
user : github用户名
repo : 存储需要访问资源的仓库名
version :版本号
填好相应的参数后,复制到地址栏访问,如果进入了如下图界面,则成功
图片资源的调用:
箭头处是你访问仓库的资源文件夹,在你的项目中需要的图片可以直接用jsDelivr链接调用
找到你需要的图片,点击进入查看,复制地址栏链接,粘贴到你的src就行了
结尾:
通过这种方式调用自己的资源还是挺好用的,不过,也不是任何场景都适合使用这种方式,要活学活用。
谢谢观看
通过jsDelivr + github 搭建一个简易图床的更多相关文章
- 利用服务器+jsDelivr+GitHub搭建咱的免费图床
前言 有人就问了你这个标题写错了?不应该是PicGo+jsDelivr+GitHub搭建咱的免费图床吗? 2333,是一个上传程序啊,不系写错了. 程序介绍 目前程序已实现两种模式上传到GitHub或 ...
- 基于hexo+github搭建一个独立博客
一直听说用hexo搭建一个拥有自己域名的博客是很酷炫的事情~,在这十一花上半个小时整个hexo博客岂不美哉. 使用Hexo吸引我的是,其简单优雅, 而且风格多变, 适合程序员搭建个人博客,而且支持多平 ...
- PicGo+jsDelivr+GitHub搭建免费图床,Typora使用图床
Github配置 首先,创建一个GitHub账号 然后添加一个仓库 创建完后点头像,Setting 然后点击Developer settings 然后点击Personal access tokens ...
- 如何用 windows+github搭建一个优美的hexo博客
1.Hexo简单介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 风一般的速度Hexo基于Nod ...
- 通过github搭建个人博客
今天突发奇想,想用GitHub搭建一个个人博客,就大概学习了一下,特此记录. 其实非常简单,首先要知道,这里是通过GitHub Pages进行搭建的,什么?不知道什么是GitHub Pages?Git ...
- 【2】hexo+github搭建个人博客的简单使用
使用hexo+github搭建一个可以外网访问的个人博客,此文用于记录博客初级的使用方法. 新建-编写-生成-部署文章的全过程 1.使用cmd完成 打开命令提示符[win+r输入cmd] 切换到自己本 ...
- 二、hexo+github搭建个人博客的简单使用
使用hexo+github搭建一个可以外网访问的个人博客,此文用于记录博客初级的使用方法. 新建-编写-生成-部署文章的全过程 1.使用cmd完成 打开命令提示符[win+r输入cmd] 切换到自己本 ...
- 一劳永逸,使用 PicGo + GitHub 搭建个人图床工具
原文链接: 一劳永逸,使用 PicGo + GitHub 搭建个人图床工具 经常写博客的同学都知道,有一个稳定又好用的图床是多么重要.我之前用过七牛云 + Mpic 和微博图床,但总感觉配置起来比较麻 ...
- 如何搭建一个独立博客——简明Github Pages与Hexo教程
摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DNS设置.github和Hexo设置等过程,这是我写得最长的一篇教程.我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后 ...
随机推荐
- node生成excel,动态替换表格内容
这里使用的是exceljs模块, 好上手,易操作 1. 大致使用步骤 npm install exceljs // 引用var Excel = require('exceljs'); // 创建一个w ...
- Unity 相机平移、旋转、缩放
内容不多,一个脚本,直接上代码 using System.Collections; using System.Collections.Generic; using UnityEngine; publi ...
- ZipArchive(解压文件)
一.首先介绍minizip 的使用方法 ziparchive是基于开源代码”MiniZip”的zip压缩与解压的Objective-C 的Class,使用起来非常的简单方法:从http://code. ...
- rest framework serializer
串行器 扩大串行的用处是什么,我们想地址.然而,这不是一个简单的问题,它会采取一些严重的设计工作. -罗素基思-马吉,Django的用户组 串行器允许诸如查询集和模型实例复杂的数据转换为原生的Pyth ...
- pyppepeer淘宝登录
代码: import time import random import asyncio import pyppeteer class LoginTaoBao: """ ...
- jQuery实现鼠标移入切换图片
初始效果: 鼠标移入效果: 首先添加jQuery库,我这边直接引用百度CDN地址 <script src="https://apps.bdimg.com/libs/jquery/2.1 ...
- SpringCloud之Hystrix服务降级入门全攻略
理论知识 Hystrix是什么? Hystrix是由Netflix开源的一个服务隔离组件,通过服务隔离来避免由于依赖延迟.异常,引起资源耗尽导致系统不可用的解决方案.这说的有点儿太官方了,它的功能主要 ...
- ASP.NET页面使用AjaxPro2完成JS调用后台方法
一.首先下载AjaxPro.2.dll(附下载地址) 百度网盘链接:https://pan.baidu.com/s/1r87DE1Tza9F4NbJwTCS1AQ 提取码:10p6 二.在Visual ...
- 关于IDEA的使用中,连接数据库console出现乱码的情况
本人在连接数据库时也不算是出现乱码,因为乱码的解决方式百度都有,但是还是没有解决我当时遇到的问题, 首先排除navicat的问题,连接选择UTF-8的编码格式, 在Idea中使用debug调试,均可以 ...
- 最简易 Pair of Topics解决方法
这个题花费了我两天的时间来解决,最终找到了两个比较简单的方法 首先这个题不难看出是寻找a[i]+a[j]<0的情况,我第一开始直接用两个for循环遍历通过不了,应该是复杂度太大了 第一个方法 # ...