教程：如何正确引用GitHub仓库图片到Hexo博客

前言

在撰写Hexo博客时，如何稳定、高效地管理和引用图片是一个常见问题。许多博主选择使用GitHub作为免费的图床，但这其中有一些常见的“坑”，比如图片链接失效、图片不显示等。本文将详细总结从创建仓库到在Markdown中正确引用图片，再到最终发布的完整流程和注意事项。

流程概览

1. 创建一个公开的GitHub仓库作为图床。
2. 上传图片文件到该仓库。
3. 获取图片的正确链接（这是最关键的一步！）。
4. 在Markdown文章中引用图片链接。
5. 部署您的Hexo博客。

---

详细步骤

第一步：创建公开的GitHub仓库

为了让所有人都能访问到您的图片，存放图片的GitHub仓库必须是公开的（Public）。如果是私有仓库（Private），则只有您自己登录后才能看到图片，您的读者将看到一个破碎的图片图标🏞️。

第二步：上传图片到仓库

您可以直接在GitHub网页上或者使用Git客户端将图片文件上传到您的图床仓库中。建议在仓库里创建一个专门的文件夹（如 images 或 assets）来存放图片，方便管理。

第三步：获取正确的图片URL（核心）

这是最容易出错的地方。我们来深入理解一下不同链接之间的区别。

链接辨析：网页 vs 原始文件

1. 错误的链接：github.com 网页链接

• 格式: https://github.com/USERNAME/REPO/blob/main/images/demo.png
• 这是什么: 当你在浏览器中打开这个链接，你看到的不仅仅是图片，而是一个完整的GitHub网页，它包含了导航栏、文件列表、代码操作按钮等元素，您的图片只是内嵌在其中。
• 为何错误: 在Markdown中使用 ![]() 语法时，它需要一个纯粹的图片文件。你给它一个完整的HTML网页，浏览器无法将其渲染为图片，因此链接会失效。
• 一个比喻: 这就像想在相框里放一张照片，却把整个照相馆（连同前台、沙发和摄影师）都硬塞了进去，相框当然装不下。

2. 正确的链接：raw.githubusercontent.com 原始文件链接

• 格式: https://raw.githubusercontent.com/USERNAME/REPO/main/images/demo.png
• 这是什么: 这是GitHub专门用来提供**文件原始数据（Raw Content）**的CDN服务器地址。访问这个链接，返回的是没有任何多余元素的、纯粹的图片文件数据。
• 为何正确: 这个链接直接指向图片文件本身，浏览器可以毫无障碍地识别并渲染它。
• 继续比喻: 这个链接相当于直接把照片本身递给了相框，完美匹配。

技巧：如何快速获取正确的图片链接

你不需要手动修改URL。GitHub提供了一个非常简单的方法来获取正确的原始链接，这是一个百试百灵的技巧：

1. 第一步：在GitHub上找到您的图片文件
   打开您的图床仓库，并导航到您想要引用的图片文件页面。
2. 第二步：找到 “Download” 按钮
   在图片预览的右上方，你会看到几个按钮，其中有一个是 “Download”（下载）按钮。
3. 第三步：右键复制链接（最关键）
   将鼠标光标移动到 “Download” 按钮上，然后点击鼠标右键，在弹出的菜单中选择 “复制链接地址” (Copy Link Address) 或类似的选项。
4. 第四步：粘贴到Markdown
   现在你的剪贴板里的链接就是格式为 https://raw.githubusercontent.com/... 的正确链接了。直接将它粘贴到你的Markdown文档中即可！

这样操作，既快速又保证100%正确，再也不用担心链接引用错误的问题了。

第四步：在Markdown中引用图片

使用标准的Markdown语法即可：

![这里是图片的描述文字](https://raw.githubusercontent.com/USERNAME/REPO/main/images/demo.png)

第五步：部署您的Hexo博客

在确认文章和图片链接无误后，执行标准的部署流程：

# 1. 清理旧缓存
hexo clean

# 2. 生成新的静态文件
hexo g

# 3. 部署到您的网站
hexo d

---

注意事项与问题排查

1. 仓库必须公开：再次强调，这是图片能否被外部访问的前提。
2. 文章日期问题：如果您发现某篇文章在本地存在，但部署后网站上没有显示，请检查文章头部的 date字段。如果日期是一个未来的时间，Hexo默认是不会生成这篇文章的。将其修改为当前或过去的时间即可。
3. 缓存问题：在排查问题时，如果确认修改无误但网站仍未更新，请务必强制刷新您的浏览器缓存（通常是 Ctrl + Shift + R 或 Cmd + Shift + R）。
4. 检查URL拼写：一个字母或符号的错误都会导致链接失效。请仔细核对您的用户名、仓库名、分支名（通常是 main）和文件路径。
5. 直接访问URL测试：将最终使用的图片URL直接粘贴到浏览器地址栏并访问。如果图片能正常显示，说明链接本身是有效的。
6. GitHub 的原始图片链接格式有误。在 GitHub 中，当你要直接访问原始图片时，URL 中的 “blob/main” 应该改为 “main。

希望这篇总结能帮助您彻底解决Hexo博客中的图片引用问题！