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

    文章

    293

    浏览量

    28583
  • GitHub
    +关注

    关注

    3

    文章

    458

    浏览量

    16068
收藏 人收藏

    评论

    相关推荐

    CDN加速原理详解

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

    恒讯科技分析:香港服务器CDN配置教程

    可信赖的CDN服务提供商,常见的CDN服务提供商包括阿里云CDN、腾讯云CDN、Cloudflare、Akamai等。注册并创建一个帐户。 步骤2:添加站点 登录
    的头像 发表于 12-14 17:25 366次阅读

    CDN运作原理 CDN的特点总结

    CDN运作原理 本地缓存的数据,通过key-value 的形式,将url 和本地缓存进行映射,存储结构与 Map相似,采用 hash+链表形式进行缓存。 CDN命中率 衡量我们CDN服务质量
    的头像 发表于 10-09 16:12 489次阅读
    <b class='flag-5'>CDN</b>运作原理 <b class='flag-5'>CDN</b>的特点总结

    全球网络加速器GA和内容分发网络CDN,哪个更适合您的组织使用?

    火伞云融合CDN凭借与中国境内云厂商和一级ISP的多个战略合作伙伴关系,火伞云为您提供完全托管的中国CDN托管解决方案(需完成ICP备案,主要加速厂商为国内的阿里云/腾讯云/白山云/网宿等厂家
    的头像 发表于 08-21 17:17 605次阅读

    盘点九个可使用免费CDN的云服务商(2023版)

    大部分服务商(如阿里云,腾讯云,华为云等)的CDN服务是按使用量收费的,而且价格还不便宜,对于小公司站长来讲,这将是一笔不小的开销。也有一些服务商提供免费CDN服务,本文简单的总结一下目前可
    的头像 发表于 08-17 16:02 999次阅读

    可白嫖的4家免费CDN,并测试其网络加速情况(2023版)

    如果是国内已备案小站,流量不是很高,优先推荐百度云加速,整体加速情况表现最好,如果你的网站没备案的话建议是选择火伞云,支持全球不限区域网络加速及免备案回国加速,网络
    的头像 发表于 08-15 16:57 1682次阅读
    可白嫖的4家<b class='flag-5'>免费</b><b class='flag-5'>CDN</b>,并测试其网络<b class='flag-5'>加速</b>情况(2023版)

    cdn加速国外服务器(国外云服务器)

    cdn加速国外服务器:是指通过在全球分布的服务器上缓存国外服务器的内容,使用户能够快速访问国外服务器上的内容。CDN通过将内容分发到离用户最近的服务器上,减少了网络延迟,提高了访问速度。 以下是列举
    的头像 发表于 08-02 14:32 689次阅读

    10家支持直播加速的国外主流CDN厂商参数PK(2023版)

    本文将对提供流媒体加速的10家国外主要CDN厂商进行简单比较,我们将根据每家公司发展史、他们提供的功能以及他们的CDN定价比较,这样可以帮助您选择最适合您需求的CDN
    的头像 发表于 08-01 00:26 1055次阅读
    10家支持直播<b class='flag-5'>加速</b>的国外主流<b class='flag-5'>CDN</b>厂商参数PK(2023版)

    火伞云融合CDN,贴心为客户解决问题

    点击蓝色字关注我们火伞云融合CDN是在传统CDN基础上,通过技术手段融合全球各主流CDN厂商的优质节点,以实现全业务处理能力的智能调度加速管理服务。通过火伞云融合
    的头像 发表于 07-31 17:40 373次阅读
    火伞云融合<b class='flag-5'>CDN</b>,贴心为客户解决问题

    海外cdn加速有用吗?

    CDN是一个策略性部署的整体系统,能够帮助用户解决分布式存储、负载均衡、网络请求的重定向和内容管理等问题,CDN代表了一种基于质量与秩序的网络服务模式。1.想要完成CDN对网站的加速
    的头像 发表于 07-31 17:39 434次阅读
    海外<b class='flag-5'>cdn</b><b class='flag-5'>加速</b>有用吗?

    企业应该选择融合CDN还是单CDN

    哪些情况适合单CDN或融合CDN仅针对特定地理位置的公司可以使用单一CDN解决方案,建议网站内容在全球分发的优先选择融合CDN来进行加速。如
    的头像 发表于 07-31 17:39 347次阅读
    企业应该选择融合<b class='flag-5'>CDN</b>还是单<b class='flag-5'>CDN</b>

    火伞云融合CDN跟传统CDN的区别

    提到CDN相信很多人都不陌生,但是说起火伞云融合CDN大家都一头雾水了吧,首先万物归根,要知道火伞云融合CDN到底是什么得先从了解CDN是什么开始,
    的头像 发表于 07-31 17:37 605次阅读
    火伞云融合<b class='flag-5'>CDN</b>跟传统<b class='flag-5'>CDN</b>的区别

    CDN和Web加速器之间的区别

    和Web加速器就成为了对应选项。CDN和web加速器是一样的东西吗?不是,尽管他们能够加速网站并确保更快的内容交付,但CDN和Web
    的头像 发表于 07-31 17:37 750次阅读
    <b class='flag-5'>CDN</b>和Web<b class='flag-5'>加速</b>器之间的区别

    CDN加速服务的工作原理

    CDN(内容分发网络)加速服务是一种用于提高网站和应用性能的技术,通过将内容分发到全球多个节点,使用户可以从就近的节点获取所需内容,从而实现更快的加载速度和更稳定的访问体验。下面Ogcloud为您详细介绍CDN
    的头像 发表于 07-31 14:12 377次阅读

    59.Github 被黑了?No Access?Why?

    GitHub
    充八万
    发布于 :2023年07月11日 23:15:16