每天学点小知识:图床搭建 + CDN简介

news2024/10/5 1:22:00

前言:

本章内容帮你解决,本地图片不能分享到网上的问题。需要工具github + JSDelivr


知识点

Q:什么是JSDelivr?

JSDelivr是一个免费且公开的内容分发网络(CDN),专门用于加速开源项目和静态网站资源。它能够将文件分发到全球各地的节点上,以提高文件的加载速度和访问效率。JSDelivr是由多个CDN提供商(如Cloudflare、Fastly等)支持的分布式网络,确保了高可用性和性能。

JSDelivr的特点

  1. 免费使用:任何人都可以免费使用JSDelivr来加速其静态资源。
  2. 全球分发:使用全球分布的CDN节点,将内容分发到离用户最近的节点上,提高访问速度。
  3. 高可靠性:JSDelivr整合了多家CDN提供商的服务,确保了高可用性和可靠性。
  4. 开源友好:特别适合于开源项目的文件托管和分发。
  5. 自动刷新:文件更新后,JSDelivr会自动刷新缓存,确保用户获取最新版本的文件。

Q:什么是图床?为什么需要图床?

图床是指一种专门用来存储和托管图片的服务或平台,通常用于在网络上共享图片。它可以提供一个稳定的链接,让用户在网站、博客、论坛等地方嵌入和显示图片。在本地图片都会有一个本地链接,而将图片发布到网络中则需要网络中的链接,不是没一个网站都会给你一个图片链接,此时我们就需要图床

使用图床的主要优点包括:

  1. 减少服务器负载,节省带宽和存储空间
  • 如果你将图片托管在自己的服务器上,每次访问图片都会消耗服务器的带宽。
  • 使用图床可以将这些负载转移到专业的图片托管服务上,从而节省自己服务器的资源。
  1. 提高网站性能,加速图片加载
  • 专业的图床服务通常会使用内容分发网络(CDN),将图片缓存到全球各地的服务器上。
  • 这可以加快图片的加载速度,尤其是对于国际用户访问时的加载速度提升显著。
  1. 提供稳定的图片访问,高可用性和可靠性
  • 专业的图床服务会有高可用性和可靠性,确保图片在各种情况下都能稳定访问。
  • 这对于需要长期保存和展示的图片特别重要。
  1. 简化图片管理,便捷的上传和管理功能
  • 图床通常提供便捷的上传和管理界面,使得管理大量图片变得简单。
  • 可以通过统一的界面对图片进行分类、标记和搜索。
  1. 适用于各种平台,跨平台兼容性
  • 图床生成的图片链接可以在各种平台上使用,如博客、论坛、社交媒体等。
  • 只需要简单地嵌入链接,就可以在不同的平台上展示图片。
  1. 提高SEO优化

知识点补充:SEO(搜索引擎优化)是一系列提高网站在搜索引擎结果页中排名的方法。良好的SEO可以带来更多的自然流量,提高网站的知名度和访问量

  • 使用图床服务的CDN,可以提高图片加载速度,从而提升用户体验和页面的SEO效果。
  • 搜索引擎更倾向于快速加载的页面。

使用场景:

  • 博客和个人网站:博主和个人网站管理员可以将图片上传到图床,使用链接来嵌入图片,从而提高网站的加载速度和用户体验。
  • 电商平台:电商网站需要展示大量产品图片,使用图床可以确保图片快速加载,提高用户购物体验。
  • 社交媒体和论坛:用户可以将图片上传到图床,再将链接分享到社交媒体和论坛上,方便其他用户查看和评论。

Q:CDN是什么?

CDN(内容分发网络,Content Delivery Network)是一种分布式的服务器系统,其目的是通过将内容分发到全球各地的服务器节点上,加速用户访问网站内容的速度。CDN通过在用户和服务器之间建立缓存节点,将内容(如图片、视频、CSS、JavaScript等)存储在这些节点上,使用户可以从离自己最近的节点获取内容,从而提高访问速度和用户体验。

视频内容更详细>>>bilibili-技术蛋老师

在这里插入图片描述

搭建步骤

这里不会对github创建项目做详细描述,gitgithub不做描述,默认你都配置好了。

一. 将图片上传到GitHub仓库

第一步:创建GitHub仓库

1. 登录GitHub:打开 GitHub 并登录你的账户。如果没有账户,先注册一个。
2. 创建新仓库:
	点击页面右上角的 + 按钮,然后选择 New repository。
	填写仓库名称,例如 images。
	添加一个描述(可选)。
	选择 Public 作为仓库的可见性。
	可以选择初始化仓库(选择 Initialize this repository with a README)。
	点击 Create repository (public)按钮。

第二步:将图片上传到GitHub仓库

1. 将图片文件夹添加到仓库:
		在本地创建文件夹,用来存储图片
		以`git bash`打开文件夹,使用vscode同理,都要使用git的终端
		初始化`git init`
2. 提交并推送到GitHub
	 	添加所有新文件到Git:
	 	git add .
	 	提交更改:
	 	git commit -m "Add image files"
	 	推送到GitHub:
	 	git push <link>

在这里插入图片描述

二. 获取 jsdelivr URL

找到图片的路径:

上传图片后,你会看到它们在仓库中的路径。记下这些路径。
在这里插入图片描述

构建jsdelivr URL:

使用以下格式构建URL

https://cdn.jsdelivr.net/gh/<USERNAME>/<REPOSITORY>@<BRANCH>/<PATH_TO_FILE>
  • USERNAME:你的GitHub用户名。
  • REPOSITORY:你的仓库名称。
  • BRANCH:分支名称(通常是 main 或 master)。
  • PATH_TO_FILE:文件在仓库中的路径。

示例:

https://cdn.jsdelivr.net/gh/unraveltao/Pic_Container@master/background/b3eb9d03e5704f619f3fe55d809568ce.jpg

三. 在网站或博客中使用URL

你现在可以使用这个URL在你的博客或网站中嵌入图片。例如,在HTML中:

<img src="https://cdn.jsdelivr.net/gh/unraveltao/Pic_Container@master/background/b3eb9d03e5704f619f3fe55d809568ce.jpg" alt="Example Image">

总结

素材:
极简壁纸:https://bz.zzzmh.cn/index

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

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

相关文章

TiDB-从0到1-分布式事务

TiDB从0到1系列 TiDB-从0到1-体系结构TiDB-从0到1-分布式存储TiDB-从0到1-分布式事务TiDB-从0到1-MVCC 一、事务定义 这属于老生常谈了&#xff0c;无论不管是传统事务还是分布式事务都离不开ACID A&#xff1a;原子性C&#xff1a;一致性I&#xff1a;隔离性D&#xff1a;…

Dubbo传输层及交换层实现

原创 风度玉门 拍码场 前言 Apache Dubbo 是一款高性能的 Java RPC 框架&#xff0c;主要用于构建分布式服务。Dubbo 的架构设计包括多个层次&#xff0c;其中传输层和交换层是非常重要的两个组成部分。 其中传输层&#xff08;Transport&#xff09;只负责对二进制数据的收…

Thingsboard规则链:Switch节点详解

在物联网&#xff08;IoT&#xff09;领域&#xff0c;数据的高效处理与自动化决策是构建智能系统的核心。作为一款强大的物联网平台&#xff0c;Thingsboard通过其规则引擎为开发者提供了高度灵活的工具&#xff0c;其中Switch节点是实现消息条件路由的关键组件。本文将全方位…

IC617 虚拟机下载 RHEL6_ic617_hspice2015_spectre15

下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1kFEkq-SVkpSXcSS49THkiA?pwdtpm8 提取码&#xff1a;tpm8

Let‘s Encrypt 免费证书申请

填写邮箱&#xff0c;申请的域名 单域名&#xff1a;www.example.com 泛域名&#xff1a; *.example.com yum -y install certbot sudo certbot certonly --server https://acme-v02.api.letsencrypt.org/directory --manual --preferred-challenges dns --email xxexample…

第十二课,for循环

一&#xff0c;for循环对字符串&#xff08;序列&#xff09;的基础语法 语法&#xff1a;for i in “hello world”: *小练习&#xff1a;统计字符串中有一个字符&#xff1f;特定的字符有几个&#xff1f; 二&#xff0c;for循环的range语句 ①从a开始到b结束&#xff0c;每…

6岁开始学习打字,10岁学懂文字编程

​你们有没有想过打字速度会影响Coding 编程能力&#xff1f; 疫情期间&#xff0c;全国中小学均不定期停止面授课程&#xff0c;改为网上教学。顷刻之间&#xff0c;电脑、智能手机等即时通讯软件成为每日学习的「良师益友」&#xff0c;常伴左右。 同时&#xff0c;学生也由…

JVM学习-字节码指令集(一)

概述 Java字节码对于虚拟机&#xff0c;好像汇编语言对于计算机&#xff0c;属于基本执行指令Java虚拟机的指令由一个字节长度的&#xff0c;代表某种特定操作含义 的数字(称为操作码Opcode)以及跟随其后的零至多个代表此操作所需参数(操作数&#xff0c;Operands)而构成&…

Postman实现批量发送json请求

最近有一个场景&#xff0c;需要本地批量调用某个接口&#xff0c;从文件中读取每次请求的请求体&#xff0c;实现方法记录一下。 1.读取请求体 在 Postman 中&#xff0c;如果你想在 Pre-request Script 阶段读取文件内容&#xff0c;比如为了将文件内容作为请求的一部分发送…

电商api接口进行数据采集获取淘宝/天猫/京东/抖音多平台商品价格

在电商运营中&#xff0c;从品牌角度来看&#xff0c;品牌方通过电商数据采集API接口进行数据采集&#xff0c;获取多渠道商品价格信息的这一行为&#xff0c;能为品牌方带来诸多好处&#xff1a; 及时准确&#xff1a;API接口能为品牌提供实时数据&#xff0c;这意味着企业可…

北斗高精度定位终端的工作原理和精度范围

北斗高精度定位终端的工作原理主要基于北斗卫星导航系统&#xff0c;通过卫星信号的接收、处理和计算&#xff0c;实现了对目标位置的精确测量。以下是关于北斗高精度定位终端工作原理的引文&#xff1a; ​ 北斗高精度定位终端作为一款新型的高精定位设备&#xff0c;其核心…

Python自然语言处理(NLP)库之NLTK使用详解

概要 自然语言处理(NLP)是人工智能和计算机科学中的一个重要领域,涉及对人类语言的计算机理解和处理。Python的自然语言工具包(NLTK,Natural Language Toolkit)是一个功能强大的NLP库,提供了丰富的工具和数据集,帮助开发者进行各种NLP任务,如分词、词性标注、命名实体…

【全开源】简单商城系统源码(PC/UniAPP)

提供PC版本、UniAPP版本(高级授权)、支持多规格商品、优惠券、积分兑换、快递鸟电子面单、支持移动端样式、统计报表等 提供全部前后台无加密源代码、数据库离线部署。 构建您的在线商店的基石 一、引言&#xff1a;为什么选择简单商城系统源码&#xff1f; 在数字化时代&am…

ctfshow web 月饼杯II

web签到 <?php //Author:H3h3QAQ include "flag.php"; highlight_file(__FILE__); error_reporting(0); if (isset($_GET["YBB"])) {if (hash("md5", $_GET["YBB"]) $_GET["YBB"]) {echo "小伙子不错嘛&#xff…

图像分割模型LViT-- (Language meets Vision Transformer)

参考&#xff1a;LViT&#xff1a;语言与视觉Transformer在医学图像分割-CSDN博客 背景 标注成本过高而无法获得足够高质量标记数据医学文本注释被纳入以弥补图像数据的质量缺陷半监督学习&#xff1a;引导生成质量提高的伪标签医学图像中不同区域之间的边界往往是模糊的&…

数据复制的艺术:深拷贝与浅拷贝在JavaScript中的实现方式

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 赋值和拷贝 浅拷贝与深拷贝区别 浅拷贝的实现方式 1.Object.assign() 2.…

6月来得及!考研数学120分复习规划:660/880/1000/1800怎么刷?

首先&#xff0c;120分是个什么概念&#xff1f; 如果目标120&#xff0c;历年真题就要135以上。这是因为&#xff1a; 1. 习题册里都是历年真题改编&#xff0c;很多题型见过了&#xff1b; 2. 考场发挥有不确定因素&#xff0c;所以需要安全边界。 总体规划 那么&#xff…

yolox-何为混合精度计算AMP?

何为AMP&#xff1f; 全称&#xff1a;Automatic mixed precision自动混合精度。 功能&#xff1a;在神经网络推理过程中&#xff0c;实现针对不同层采用不同的数据精度进行计算&#xff0c;从而实现节省显存和加速训练的目的。 此处提到的不同数据精度包括&#xff1a;32位浮…

SpringBoot搭建OAuth2

背景 前几天自己从零开始的搭建了CAS 服务器&#xff0c;结果差强人意&#xff08;反正是成功了&#xff09;。这几天&#xff0c;我躁动的心又开始压抑不住了&#xff0c;没错&#xff0c;我盯上OAuth2了&#xff0c;大佬们都说OAuth2比CAS牛批&#xff0c;我就想知道它有多牛…

FFmpeg编解码的那些事(1)

看了网上很多ffmpeg的编解码的文章和代码&#xff0c;发现有很多文章和代码都过时了&#xff0c;主要还是ffmpeg有很多接口都已经发生变化了。 这里简单说一下&#xff0c;什么是编码和解码。 1.视频编码 对于视频来说&#xff0c;可以理解为多张&#xff08;rgb或者yuv&…