0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

基于Picgo+GitHub+ jsDelivr搭建CDN加速免费图床

电子设计 来源:电子设计 作者:电子设计 2020-12-24 18:02 次阅读

前言

经常写Markdown或者博客的同学,肯定都要用到图床。图床是什么呢?其实相当于一个存储图片的网站,类似百度云这样,不过上传图片到图床后可以直接通过外链进行访问。

比如把本地一张a.jpg上传到图床后,便可以拿到一个链接:

https://www.xxx.com/img/a.jpg

然后点击这个链接就可以访问图片a了。今天来聊聊怎么搭建可靠的图床吧~

为什么会产生这个需求呢?因为小编经常写博文什么的,现在的做法是在简书上上传图片,然后把生成的图片链接放到Markdown文档上面,写好文档以后就可以批量复制到各大博客平台投稿了。

但是这样有个隐患:万一简书哪天挂掉了,那么我放到csdn、cnbolgs等这些平台的文章图片都会挂掉。即使简书一直维持现状,但万一哪天它不高兴了,做了个外链防盗(图片外链只能在本站显示),那同样会遇到上面的问题。

比如小编之前放在简书上的文章,复制到csdn上后。不知道怎么回事:

说多了都是泪。因此,趁早做好准备,免得以后出现问题就麻烦了。毕竟有些博客的图片只是随手一截,还真找不到备份……

前期准备平台选择

现在也有蛮多的图床平台可以选择,常见的有SM.MS图床、腾讯云COS、微博图床、GitHub图床、七牛图床、Imgur图床、阿里云OSS、又拍云图床等。

而这里边,SM.MS和Imgur有免费版也有收费版,腾讯云、七牛、阿里云、又拍云都是收费的,微博图床据说已经挂了。其他小站的就不推荐了,因为指不定哪天就挂了。

那么,也就剩下GitHub安全、免费又可靠了(微软爸爸护着呢!)。现在微软接管了GitHub以后,貌似公有仓库已经不限个数了,而且单个仓库容量已经放宽至2GB。这绝对够用了,不够就再建一个共有仓呗。最重要的还是免费,配合CDN加速,访问也不成问题。嗯,就微软爸爸了!

工具选择

选择一个本地的上传工具是为了方便我们快速上传图片,获得图片外链。这里首选picgo。

这款小工具非常强大,其中最赞的就是那个剪切板图片上传功能,在QQ或者微信截图截好图片后,可以点击剪切板图片上传或者通过快捷键,它就会把当前剪切板中的图片上传到配置到图床中。可以看到上传所有图片,点击即可复制需要的图片外链格式:

配置

准备完毕就可以着手配置了。先去GitHub,没有账号的先注册一个账号。

GitHub配置

1. 创建Repository

鼠标移动到右上角,点击"New repository"按钮:

填写相关信息,创建一个存储图片的仓库:

2. 配置token key

生成一个Token用于操作GitHub repository。回到主页,点击"Settings"按钮:

进入页面后,点击"Developer settings"按钮

点击"Personal access tokens"按钮,然后点击Generate token:

填写描述,选择"repo"权限,然后拉到下面点击"Generate token"按钮

注意:创建成功后,会生成一串token,这串token之后不会再显示,所以第一次看到的时候,可以用个小本本保存起来哦,忘记了只有重新生成,每次都不一样。

Picgo配置

拿到了刚刚记录了GitHub token后,打开picgo,按照如下设置即可:

设定仓库名按照“账户名/仓库名的格式填写”,比如我的是:dengfaheng/image01。

分支名统一填写“master”。

设定Token将之前的Token粘贴在这里。

指定存储路径留空。

自定义域名的作用是在上传图片后成功后,PicGo会将“自定义域名+上传的图片名”生成的访问链接,放到剪切板上。默认留空也可以正常使用。这里为了使用CDN加快图片的访问速度,自定义域名我们按照这样去填写:

https://cdn.jsdelivr.net/gh/GitHub用户名/仓库名

比如我的是:

https://cdn.jsdelivr.net/gh/dengfaheng/image01

点击确定后就配置完成了,我们截图后点击剪切板图片上传,如果上传成功,拿到的外链放到Markdown中正常访问,就OK啦。

当然快捷上传的快捷键也可以到设置中进行配置。可以看到GitHub仓库中多了很多我们上传的图片。

也可以在picgo中对上传的图片进行相关操作,不过这里的删除只是删除picgo中的图片而言,GitHub上的不会删除哦。

至于如何删除GitHub上的图片,emmm……那说来就话长了。。就不说了。大家还是不要删了,空间不够了再开个仓库即可。

审核编辑:符乾江
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • CDN
    CDN
    +关注

    关注

    0

    文章

    314

    浏览量

    28821
  • GitHub
    +关注

    关注

    3

    文章

    472

    浏览量

    16475
收藏 人收藏

    评论

    相关推荐

    GitHub Copilot 可以免费使用了!

    “  这个标题有点标题党,虽然 Github Copilot 确实是可以免费使用,但这个免费是有限制的,聊天互动每月限制50次,代码补全(或者建议)每月2000次。不过这个 Copiot 真的是很好
    的头像 发表于 12-22 11:19 252次阅读
    <b class='flag-5'>GitHub</b> Copilot 可以<b class='flag-5'>免费</b>使用了!

    Arm推出GitHub平台AI工具

    专为 GitHub Copilot 设计的 Arm 扩展程序,可加速从云到边缘侧基于 Arm 平台的开发。
    的头像 发表于 11-01 13:50 303次阅读

    Arm推出GitHub平台AI工具,简化开发者AI应用开发部署流程

    专为 GitHub Copilot 设计的 Arm 扩展程序,可加速从云到边缘侧基于 Arm 平台的开发。 Arm 原生运行器为部署云原生、Windows on Arm 以及云到边缘侧的 AI
    的头像 发表于 10-31 18:51 2379次阅读

    使用CDN安全吗?CDN如何达到基本防护功能呢?

    (ContentDeliveryNetwork,内容传递网络)来提升网站效能。然而,随著网络攻击事件频传,网站安全问题日益受到重视。CDN作为加速网站的普遍被采用的服务,如何在提
    的头像 发表于 08-30 13:03 394次阅读
    使用<b class='flag-5'>CDN</b>安全吗?<b class='flag-5'>CDN</b>如何达到基本防护功能呢?

    华纳云:如何理解CDN

    内容分发网络(CDN)是一种网络架构,旨在提高用户对网站、应用程序或其他互联网内容的访问速度和性能。CDN 的主要原理是通过在全球范围内部署分布式服务器,将内容缓存并提供给用户距离Z近的服务器,从而
    的头像 发表于 08-23 15:20 295次阅读

    CDN网站加速

    CDN网站加速是什么呢? CDN,英文全名为Content Delivery Network(也有人称“Content Distribution Network”)的缩写,即是我们中文所指的内容传递
    的头像 发表于 08-08 15:02 310次阅读
    <b class='flag-5'>CDN</b>网站<b class='flag-5'>加速</b>

    什么情况下的网站要使用CDN加速呢?

    CDN的全称是Content Delivery Network,即内容分发网络。 CDN的通俗理解就是网站加速,CPU均衡负载,可以解决跨运营商,跨地区,服务器负载能力过低,带宽过少等带来的网站打开
    的头像 发表于 07-26 16:29 293次阅读

    CDN是什么?了解用CDN服务连到网站加速的原理与优势

    为什么通过CDN能让网站变得更加快速呢?有想过为什么我们在中国使用网络,却能够快速、稳定的连上海外的网站吗?今天就来与各位聊聊CDN加速的原理,看看CDN是如何帮助网站
    的头像 发表于 07-21 10:54 497次阅读

    服务器如何选择配置

    选择服务器时,应考虑存储空间、带宽、安全性和稳定性等因素。建议选择配置较高的服务器,以满足需求。 在选择服务器的配置时,需要考虑以下几个方面: 1、服务器类型 共享主机:适合初
    的头像 发表于 07-11 15:36 315次阅读

    融合CDN是什么?为什么需要融合CDN?其应用方法与原理是什么?

    ! 什么是融合CDN? 内容分发网络(CDN)因为能为企业网站带来多项优势而广为人知。他们能让企业提供更能接近全球使用者的内容,有助于防止过度使用原点服务器,并提供协助加速网站负载时间的功能。 大多数公司依赖单一
    的头像 发表于 07-11 14:49 356次阅读

    IP地址与CDN威廉希尔官方网站

    内容分发网络(CDN)就是通过内容分配到离用户最优的服务器来提高访问速度。而IP地址如何分配与管理就是CND威廉希尔官方网站 的基础。本文将来探讨介绍CDN中的IP地址分配与管理,以及如何通过CDN优化网络性能
    的头像 发表于 07-10 11:30 380次阅读

    CDN节点是什么

    的服务器,会将用户请求自动指向距离最近的 CDN 节点。随着CDN 服务商在全球各地部署的节点服务器和覆盖区域的增加,网页访问速度和网页运行的稳定性也将随之提高,进而满足更多用户的就近访问需求。 CDN
    的头像 发表于 07-06 13:45 1088次阅读
    <b class='flag-5'>CDN</b>节点是什么

    服务器cdn防御一般是个人安装还是企业安装

    分布式节点部署服务器,实现最近距离的内容传输,提高网络性能和用户体验。CDN通过缓存静态内容和动态内容加速等方式,减少源服务器的负载压力,提高页面响应速度,降低丢包率等。 为什么需要CDN防御 尽管
    的头像 发表于 02-03 10:58 786次阅读

    海外融合CDN之火伞云

    密地结合起来,从而在使用和接入上既能简便易用,又能满足业务的敏捷开发需求,这是很多企业出海时选择CDN加速服务时遇到的一项挑战。 小孩子才做选择,厂商我全都要! 融合CDN的出现,帮助客户解决这个问题。融合
    的头像 发表于 01-13 16:01 413次阅读

    CDN加速原理详解

    一、CDN加速是什么意思 CDN是Content Delivery Network)英文首字母的缩写,中文翻译为内容分发网络,由于CDN是为加快网络访问速度而被优化的网络覆盖层,因此被
    的头像 发表于 01-12 16:06 1038次阅读
    <b class='flag-5'>CDN</b><b class='flag-5'>加速</b>原理详解