免费图床方案

图床的作用

添加图片到个人Blog的免费方案找到两种,零成本,分别是利用Telegram和Github来做为存储空间。

##方案一 Telegraph-Image 项目地址:https://github.com/cf-pages/Telegraph-Image 需求:

  1. 免费上传生成链接供Blog使用
  2. 需要有后台管理,可以删除图片
  3. 后台需要有访问控制(账号密码)
  4. 添加自定义域(CN要能访问)

部署过程

Refenrence

利用cloudflare pages搭建免费图床

方案二 GitHub+PicGo+Jsdelivr

部署过程

Github里Generate new token 选择的delete reo并不能实现从picgo删除已经上传到github仓库中的图片

设定自定义域名:https://cdn.jsdelivr.net/gh/[github用户名]/[仓库名]@main 注意,此处的分支如果填master会失败

Jsdelivr介绍

JsDelivr是一个免费的开源CDN(内容分发网络),它专注于为JavaScript、CSS、图像和其他Web资源提供高性能的全球分发服务。它允许开发者通过其网络分发他们的Web资源,从而加速网站加载速度,并且通过减少服务器负载来提高性能和可靠性。JsDelivr提供了一个简单的方法来引用大量流行的JavaScript库和框架,例如jQuery、Bootstrap、React等,使开发者能够轻松地在他们的项目中使用这些库而不必担心托管和版本控制的问题。 使用JsDelivr在Web服务中应用最方便的方法之一是通过直接在HTML文件中引用所需的JavaScript和CSS文件。以下是一些步骤:

  1. 选择所需的库或框架: 首先确定你需要在项目中使用的JavaScript库或框架,例如jQuery、Bootstrap、Vue.js等。
  2. 获取JsDelivr链接: 访问jsdelivr.com,搜索你需要的库或框架,然后复制相应的JsDelivr链接。
  3. 在HTML文件中引用: 在你的HTML文件中,使用<script>标签或标签来引用JsDelivr链接。例如:
<!-- 引用jQuery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- 引用Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- 引用Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  1. 使用CDN链接直接加载资源: 通过这种方式,你可以直接从JsDelivr的CDN加载所需的资源,无需在本地托管这些文件,也无需担心版本控制或文件更新问题。

通过这种方式,你可以快速、方便地在Web服务中应用JsDelivr,从而加速页面加载并提高性能。

Refenrence

5分钟搭建属于自己的免费图床,无限空间,免费使用,支持CDN加速,GitHub+PicGo+Jsdelivr