【 如何搭建图床】

如何搭建图床

图床简介

定义

  • 图床是一种在线存储图片的服务,它允许用户将图片上传到服务器,并生成一个可公开访问的 URL(链接),用于在网站、论坛、博客、社交媒体等地方嵌入或分享图片。
  • 本质上,图床就是一个专门用于存储和分发图片的网络空间

核心功能

  1. 图片存储: 提供可靠的存储空间,用于存放用户上传的图片文件。
  2. URL 生成: 为每张上传的图片生成一个唯一的、可直接访问的 URL。
  3. 图片分发: 通过 CDN (内容分发网络) 等技术,加速图片在全球范围内的访问速度。

作用

  • 解决图片存储问题: 避免直接将图片存储在自己的服务器上,减轻服务器压力,节省带宽。
  • 提高网站加载速度: 通过 CDN 加速图片访问,提升用户体验。
  • 方便图片分享: 生成易于分享的图片链接,方便在各种平台上发布图片。
  • 内容隔离: 将图片内容与网站的其他内容分离,便于维护和管理。

免费图床推荐:

SM.MS图床为例:

  1. 注册SM.MS账号:访问 https://sm.ms 并注册。
  2. 获取API Token
  3. 在PicGo中配置
    • 打开PicGo → 图床设置 → SM.MS图床 → 填入API Token → 点击「确定」。

搭建图床步骤

工具准备

  1. gitee:https://gitee.com/

    优点:访问速度快、免费

  2. PicGo

搭建步骤

  1. 进入gitee 官网

  2. 注册/登录账号

  3. 新建仓库(注意:为了保证外部能访问图片,权限需要设置开源)

    image-20250518201908040

  4. 生成令牌用来连接PicGo图床软件

    image-20250518184641644

  5. 下载PicGo软件

    PicGo图床软件官方下载:https://github.com/Molunerfinn/PicGo/releases

    PicGo图床软件快速下载:https://sumsung.lanzouw.com/irEaFzjen8j

    Typora免费下载地址(旧版本,免费):https://sumsung.lanzoui.com/itRlZgjyuxc

    Typora官网购买地址:https://www.typora.io/

  6. 打开PicGo安装插件(一般情况直接点击插件设置搜索gitee 安装就行,如果搜索不到,启动planB)

    planeB:

    • 进入到PicGO的数据目录,一般是这个位置:C:\Users\{计算机用户名}\AppData\Roaming\picgo

    • 给npm换成淘宝的镜像源:

      npm config set registry https://registry.npmmirror.com
      
    • 查看是否设置成功:

      npm config get registry
      
    • 安装picgo-plugin-gitee:

      npm install picgo-plugin-gitee
      
    • 安装成功如图

      image-20250518190817315

  7. 配置gitee

    image-20250518191045585

    image-20250518191422462

    image-20250518191628382

  8. 把gitee设置为默认图床,否则可能报错:You must be logged in to use!

typora配置

  1. 打开typora

  2. 点击文件

  3. 点击偏好设置

  4. 点击图像

  5. 配置

    image-20250518195329348

### 使用 Cloudflare 搭建 #### 准备工作 为了使用 Cloudflare 搭建,需要拥有一个域名并将其 DNS 解析托管给 Cloudflare。完成此操作后,在 Cloudflare 控制面板内启用 SSL/TLS 加密功能以确保片加载的安全性[^1]。 #### 创建存储桶 选择 Amazon S3 或其他支持 CORS 的对象存储服务作为实际存放片文件的地方。创建一个新的存储桶,并设置公共读取权限以便于通过 URL 访问上传的像资源[^2]。 #### 配置 Workers 脚本 利用 Cloudflare 提供的边缘计算平台——Workers 来编写简单的 JavaScript 代码处理 HTTP 请求并将请求转发到指定的对象存储位置。下面是一个基本的例子: ```javascript addEventListener('fetch', event => { let url = new URL(event.request.url); // 修改为自己的S3 bucket地址 const s3Url = 'https://your-s3-bucket-url'; if (url.pathname.startsWith('/img/')) { let path = url.pathname.replace(/^\/img\//, ''); return event.respondWith( fetch(`${s3Url}/${path}`, { cf: { cacheEverything: true } }) ); } }) ``` 这段脚本会拦截所有 `/img/*` 形式的路径访问,并将这些请求重定向至设定好的 S3 存储桶中对应的文件夹下查找相应片[^3]。 #### 设置缓存策略 为了让用户的浏览器能够更高效地缓存静态资源,在 Worker 中可以自定义响应头来控制缓存行为。比如上面例子中的 `{ cf: { cacheEverything: true } }` 就是用来指示 Cloudflare 对该类请求开启全局 CDN 缓存优化[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值