github 图片_使用Picgo+GitHub+ jsDelivr搭建CDN加速免费图床

前言

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

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

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

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

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

5b2aa485559a8ecf44f90387a6454e09.gif

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

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

f99258727c3df7b0ae1f1b5b18d00484.png

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

前期准备

平台选择

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

317214b40c63446343bc48f30b4bd089.png

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

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

e588defa1edf49e59c88f1a66df42ec3.png

工具选择

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

6e1a4fdf5b2098b70e55283d81470cb7.png

介绍和下载地址:

https://github.com/Molunerfinn/PicGo

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

a7764c284761e7babab4fec5302a8c27.png
562e162c2d27e6557fcc7559cdff4998.png

配置

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

04fa3f9c72d856c79341f20e9be8f475.png

GitHub配置

1. 创建Repository

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

2ecea37e51bb5c6b2cd975cba0f87754.png

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

dddc1e09ef09f4c9bcba5c502b92b4b8.png

2. 配置token key

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

31874f7b5a16c578f0aac72b57388ab2.png

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

6065ebc34f3c4957d8fe7c440b960d13.png

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

a38dfed586528fc1f0327ec741306d8b.png

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

6a23e3d1d3eb5a88db89a30d758ef346.png
a667eaa65dae673b3257c98f7608d8f1.png

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

Picgo配置

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

1175287e046151f44199507ded92528e.png

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

分支名统一填写“master”。

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

指定存储路径留空。

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

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

比如我的是:

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

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

52ff45b6c6ce63c175c12969bd30c73d.png
4ffe7277bb6f07dfb9789bdc09240501.png

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

f75ca85a5816b5ea6f61128f88415193.png

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

a4ba41acb480738b9a610bbf9c10fecf.png

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GitHub本身并不提供CDN服务,但你可以使用GitHubjsDelivr结合来实现免费CDN加速jsDelivr是一个开放源码的公共CDN服务,它可以帮助你加速静态资源的传输并减轻服务器负担。你可以将你的静态资源文件上传到GitHub仓库中,然后通过jsDelivr提供的CDN链接来访问这些文件。具体操作如下: 1. 在GitHub上创建一个仓库,用于存储你的静态资源文件。 2. 将你的静态资源文件添加到本地文件夹(比如cdn-assets文件夹)中。 3. 使用Git命令将这些文件提交并推送到GitHub仓库: ``` # 添加文件 git add . # 提交文件 git commit -m "add cdn source files." # 推送到远程仓库 git push origin master ``` 4. 通过jsDelivr提供的链接来访问你的静态资源文件。你可以使用以下格式的链接: ``` https://cdn.jsdelivr.net/gh/你的GitHub用户名/你的仓库名称/文件路径 ``` 例如,如果你的GitHub用户名是example,仓库名称是cdn-assets,文件路径是/css/style.css,那么你可以使用以下链接来访问该文件: ``` https://cdn.jsdelivr.net/gh/example/cdn-assets/css/style.css ``` 通过这种方式,你可以免费使用GitHubjsDelivr搭建自己的CDN服务加速访问你的静态资源文件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Github Page 个人主页——CDN加速](https://blog.csdn.net/m0_47520749/article/details/124768311)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [基于jsDelivr+GitHub免费CDN](https://blog.csdn.net/qq_40531408/article/details/126070098)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值