GitHub结合jsDelivr打造个人图床

使用 GitHub 和 jsDelivr 图床，可以免费、稳定地存储和访问图片文件。以下是详细的搭建流程，帮助你将 GitHub 作为存储库，并通过 jsDelivr 快速访问图片。

# 创建 GitHub 仓库

登录 GitHub (opens new window)。
点击右上角的 “New repository” 创建一个新的仓库。
填写仓库名（如 cdn），设置为 Public（公开），这样 jsDelivr 才能访问。
无需添加 README 或 .gitignore 文件（当然也可以添加）。

# 上传图片到 GitHub 仓库

进入刚创建的仓库。
点击 "Add file" -> "Upload files"。
拖拽或选择你想上传的图片文件。
提交更改：填写 Commit message（如 "Upload images"），然后点击 "Commit changes"。

# 获取图片的 URL

进入你的 GitHub 仓库，点击你上传的图片，进入图片的详细页面。

鼠标右键赋值得到图片的 GitHub 原始链接。赋值链接地址

示例：

https://github.com/ArnoldShu/cdn/blob/main/banner/black.jpg?raw=true

# 通过 jsDelivr 加速图片

将图片的 GitHub 原始链接转换为 jsDelivr 的格式：

jsDelivr链接格式：

https://cdn.jsdelivr.net/gh/username/repo_name@branch_name/file_path

示例：
如果 GitHub 原始链接为：

https://github.com/ArnoldShu/cdn/blob/main/banner/black.jpg?raw=true

则 jsDelivr 加速链接为：

https://cdn.jsdelivr.net/gh/ArnoldShu/cdn@main/banner/black.jpg
https://cdn.jsdelivr.net/gh/ArnoldShu/cdn/banner/black.jpg
https://fastly.jsdelivr.net/gh/ArnoldShu/cdn/banner/black.jpg

1
2
3

# 步骤五：检查和使用图片

将上述生成的 jsDelivr 链接粘贴到浏览器中，确认图片能正常访问。

你可以将这些图片的链接用于：

HTML 页面：

<img src="https://cdn.jsdelivr.net/gh/username/image-hosting@main/image1.jpg" alt="Image">

Markdown 文件：

![Image](https://cdn.jsdelivr.net/gh/username/image-hosting@main/image1.jpg)

# 附加技巧

自动更新图片链接：
- 如果你在仓库中更新了图片，无需改变 jsDelivr 链接。jsDelivr 会根据最新的提交自动更新资源。
版本控制：
- 在 jsDelivr 链接中指定版本号：
```
https://cdn.jsdelivr.net/gh/username/image-hosting@v1.0/image1.jpg
```
  1
- 如果不指定版本号（使用 @main），则会始终加载仓库的最新版本。
缓存问题：
- 如果 jsDelivr 缓存没有及时更新，可以在 URL 末尾添加参数，例如：
```
https://cdn.jsdelivr.net/gh/username/image-hosting@main/image1.jpg?v=1
```
  1

# 总结

通过 GitHub 和 jsDelivr 搭建图床，可以免费存储图片，并通过 CDN 加速访问。整个流程稳定高效，非常适合用于个人博客、项目页面或 Markdown 文档中的图片展示。

#CDN #jsdelivr

上次更新: 2024/10/15, 14:07:00