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

前言:

本章内容帮你解决,本地图片不能分享到网上的问题。需要工具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

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

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

相关文章

武汉城投城更公司与竹云科技签署战略协议,携手构建智慧城市新未来!

2024年5月16日&#xff0c;武汉城投城更公司与深圳竹云科技股份有限公司&#xff08;以下简称“竹云”&#xff09;签订战略合作协议&#xff0c;双方将深入推进产业项目合作。 签约现场&#xff0c;双方围绕产业项目合作方向、路径和内容等进行了全面深入交流。城投城更公司党…

AI视频智能分析引领智慧园区升级:EasyCVR智慧园区视频管理方案

一、系统概述与需求 随着信息技术的不断发展&#xff0c;智慧园区作为城市现代化的重要组成部分&#xff0c;对安全监控、智能化管理提出了更高的要求。智慧园区视频智能管理系统作为实现园区智能化管理的重要手段&#xff0c;通过对园区内各关键节点的视频监控和智能分析&…

破解面试难题:面试经典150题 之双指针法详解与代码实现

面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 125. 验证回文串 125. 验证回文串 STL容器 思路&#xff1a; 遍历输入的字符串&#xff0c;将其中的字母字符转换为小写&am…

FL Studio21.2.8中文版让你的音乐创作如鱼得水

在音乐的世界里&#xff0c;我们都是探索者&#xff0c;追求着无尽的创新和可能性。而在这个过程中&#xff0c;我们往往会遇到各种挑战和困扰。如何快速高效地创作出满意的音乐作品&#xff1f;如何将我们的创意完美地呈现出来&#xff1f;这些问题可能一直困扰着你。今天&…

详解 HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件&#xff08;server-sent event&#xff09;允许网页获得来自服务器的更新。 EventSource 是单向通信的&#xff08;是服务器向客户端的单向通信&#xff0c;客户端接收来自服务器的事件流&#xff09;、基于 HTTP 协议&#xff08;EventSource 是基于标准…

基于振弦采集仪的岩土工程振弦监测技术研究与应用

基于振弦采集仪的岩土工程振弦监测技术研究与应用 岩土工程振弦监测技术是一种基于振弦采集仪的测试方法&#xff0c;用于对岩土体的力学特性进行监测和分析。振弦采集仪是一种先进的测试设备&#xff0c;能够准确测量岩土体中的振动响应&#xff0c;并通过分析振动信号来获取…

2024广东省赛 G.Menji 和 gcd

题目 #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 #define ll long long const int maxn 1e6 5, inf 1e12, maxm 4e4 …

华为OD机试 - 项目排期 - 贪心算法(Java 2024 C卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

[C++]红黑树

一、概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路 径会比其他路径长出俩倍&#xff0c;因而是…

【vscode篇】1-VScode设置语言为中文,2-解决中文注释乱码问题。

设置语言为中文 在前端开发中&#xff0c;Visual Studio Code(简称vscode)是一个非常好用的工具&#xff0c;但第一次打开vscode会发现界面为英文&#xff0c;这对很多开发者来说会很不友好&#xff08;比如我&#xff09;&#xff0c;把界面设置成中文只需要安装一个插件即可&…

【stm32/CubeMX、HAL库】嵌入式实验六:定时器(1)|定时器中断

参考&#xff1a; 【【正点原子】手把手教你学STM32CubeIDE开发】 https://www.bilibili.com/video/BV1Wp42127Cx/?p13&share_sourcecopy_web&vd_source9332b8fc5ea8d349a54c3989f6189fd3 《嵌入式系统基础与实践》刘黎明等编著&#xff0c;第九章定时器。 实验内容…

7777777777777

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;贝叶斯滤波与Kalman估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能&#xff0c…

python-合并排列数组 I

问题描述&#xff1a;合并两个按升序排列的整数数组a和b&#xff0c;形成一个新数组&#xff0c;新数组也要按升序排列。 问题示例&#xff1a;输入A[1],B[1],输出[1,1],返回合并后的数组。输入A[1,2,3,4],B[2,4,5,6],输出[1,2,2,3,4,4,5,6],返回合并所有元素后的数组。 完整代…

一个交易者的自白:念念不忘的交易,10个日内9个亏

一、新手: 面对爆仓,我像个白痴 我是在2012年开始接触的&#xff0c;这些年里我尝到了残酷失败的滋味&#xff0c;更品尝过胜利带来的喜悦。刚刚接触时很自信&#xff0c;总想着自己有一天一定会变成千万富翁的&#xff0c;用杠杆获取暴利。 在我首次爆仓的时候&#xff0c;我的…

前端Vue自定义轮播图组件的设计与实现

摘要 随着技术的发展&#xff0c;前端开发的复杂性日益增加。传统的整块应用开发方式在面对频繁的功能更新和修改时&#xff0c;往往导致整体逻辑的变动&#xff0c;从而增加了开发和维护的难度。为了应对这一挑战&#xff0c;组件化开发应运而生。本文将以Vue中的自定义轮播图…

01 Nginx安装部署(系列篇)

一、安装部署 1、Nginx的发行版本 常用版本分为四大阵营&#xff1a; Nginx 开源版 | https://nginx.org/&#xff1a;赤裸裸的Web服务器、反向代理、负载均衡&#xff08;功能少&#xff0c;开发难度大&#xff09; Nginx Plus 商业版 | https://www.nginx.com/&#xff1a;…

用易查分制作研学活动报名,支持在线签名,一键导出报名统计表格!

学校组织研学活动时&#xff0c;需要家长扫码在线填写报名信息&#xff0c;确认安全承诺和手写签名&#xff0c;提交报名后希望分配报名号&#xff0c;应该如何实现&#xff1f; 易查分的新建填表功能就可以实现上述需求&#xff0c;下面就来教大家如何制作吧。 &#x1f4cc;使…

Django框架前后端通信打通实战(PyCharm高级版)

1.创建django项目并做好相关配置 首先在pycharm高级版中创建django项目 (1)选择左上角的四条小横线,然后找到文件下面的新建项目并点击,如下图: (2)点击完上图的新建项目之后,来到下面的页面. 然后点击左上角的Django,然后设置文件的位置,之后将模版文件夹的template这个单词…

网络智能化的发展对仿真环境的需求

1. 网络智能化背景介绍 1.1 什么是网络智能化 网络智能化是指利用人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、优化算法等技术来实现网络的信息化、自动化和智能化。相对5G、6G、算力网络等领域&#xff0c;网络智能化是针对网络全场景、全要素…

通过花生壳对git服务器做内网穿透

很长一段时间内公司的git服务器只能够在公司内网访问&#xff0c;最近出差的同事比较多&#xff0c;通过外网访问git服务器的需求也迫在眉睫&#xff0c;于是选择了贝锐“花生壳”做内网穿透处理。 首先去贝锐官网购买花生壳映射&#xff0c;我选择的是个人标准版本&#xff0c…