slacr_

Just to record my life and thoughts.
笔记/编程/杂乱/极简

[博客建设二]CDN和图床以及Markdown中上传图片的方法

Apr 2, 2023Blog1218 words in 8 min

介绍CDN原理和图床以及Markdown中上传图片的问题

CDN

CDN(Content Delivery Network), 即内容分发网络, 是一种由大量边缘服务器(节点)组成的网络, 利用靠近每位用户的服务器, 更快更可靠的将网络资源传递给用户.

网络请求的过程

通过域名访问某个网址, 首先进行DNS解析

DNS查找顺序:浏览器缓存> 本地操作系统缓存> DNS服务器(路由缓存>互联网 DNS缓存服务器)

当本地有该域名对应的DNS解析时, 将直接请求对应IP地址的服务器
否则向DNS服务器发起解析请求, 得到域名映射的IP地址, 向该IP请求资源.
当域名使用了CDN加速服务后, 再访问该域名时, 会先访问CDN服务提供商的DNS服务器, 由CDN服务提供商统一调度资源, 若CDN网络中边缘服务器已缓存该资源, 则解析到该边缘服务器; 否则会访问原服务器并将该资源缓存到边缘服务器.

Cache\space hit\space ratio = \frac{Total\space number\space of\space cache\space hits(request)}{Total\space numbe\space of \space cache \space hits(request)\space +\space Number\space of \space cache \space misses}

可以看出请求次数越多, CDN的命中率越高, 加载资源的效率越高

p2p CDN

将用户端接入CDN分发网络, 利用闲置上行宽带充当缓存节点, 服务商基于相应奖励. 以提高设备资源利用率.

分布式概念与技术在这些年发展很快, 边缘计算, 边缘存储, 分布式系统, 区块链, 去中心化金融

推荐CDN服务

jsdelivr
一个开源免费提供CDN加速的项目, Bootstrap的官方CDN, 全球第二大热门CDN.

图床

图床, 泛指网络相册, 云图片库, 公开权限访问的图片资源, 我们可以通过在网站上使用外链而减轻本地服务器的负担. 互联网企业的资源绝大都经过CDN网络加速.
比如说

上图是一张利用58cdn加速的图片, 用的是chorme的即刻图床插件, 可能会被定时清理.

github图床

github支持图床,但国内不开代理访问速度很慢, 我们
下面是一张github图床的图片, 我使用PicGo方便上传, PicGo之类的图床软件网上有很多

我们可以使用jsDeliver的免费CDN加速, 可以比较一下两张图的加载速度:

其实只要把前缀改改就行了
国内的图床大都需要一个已备案的域名

typora中如何上传图片

使用外链

直接放到站点

具体做法:
2.1 在source中新建一个文件夹用来存放图片, 我创建的文件名pics
2.2 将偏好设置改为

这样我们上传的图片就会是相对路径格式, 并且每次粘贴的时候都会在pics文件夹下创建一个同名文件夹用来存放该md文档的图片

使用图床

这里以PicGo图床为例

创建一个github仓库, 设定仓库名为 账号名/仓库名 , token用于获取权限, 去github setting中生成一个.
储存路径可有可无, 有就会上传到指定文件夹里.
自定义域名是上传完github图床给你创建连接的前缀, 我们可以用jsDelivr加速, 不改就是github默认的图床链接.

1
https://cdn.jsdelivr.net/gh/{your-account}/{your-repository}@{your-branch}

然后把链接格式改成markdown

改下上传快捷键

如果你用typora的话也可以设置成图片复制后自动上传

装上autocopy插件

设置中开启上传成功自动复制URL

然后我们在复制完一张图片之后, 按快捷键上传, 上传过程中CMD会闪一下那是git操作不用管, 上传成功会自动将markdown格式的链接复制到剪切板, 直接粘贴就能使用.

上面这几张图就是使用PicGO图床和jsDelivr加速的链接

参考:

  1. 什么是 CDN 缓存命中率以及如何计算和优化它?
  2. hexo博客如何插入图片
  • Author:

    slacr_

  • Copyright:

  • Published:

    April 2, 2023

  • Updated:

    April 20, 2023

Buy me a cup of coffee ☕.

1000000