9

使用GitHub搭建图床

 2 years ago
source link: https://lianpf.github.io/posts/%E5%BC%80%E5%8F%91%E6%97%A5%E8%AE%B0/28.%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

对于经常写作记录的同学，图床非常舒服，不仅可以节省写作导入图片的时间，同时保障做好一张图的情况下在多个文档场景使用…

几年亲身体验告诉大家，Github做图床十分靠谱，有CDN加速访问巨快，今天有时间把流程整理出来。

建议使用Github替换Gitee，一是Gitee受限于各种原因，经常会在你使用中出现各种幺蛾子，你不得不补充各种资料。二是Github提供了CDN加速，所以Gitee在国内访问较快的优势也失去了。

一、使用GitHub搭建图床

1.前提条件: 图床仓库

右上角的”加号“点击『New repository』新建一个仓库

20230201-001@2x.png
  • 仓库必须是public的，否则存储的图片不能正常访问

2.设置Personal access tokens

若你不需要使用picGo等图片管理工具，上传管理图片。则此步骤可以忽略。

20230201-002@2x.png
20230201-003@2x.png
20230201-004@2x.png

这里选择创建personal access token (classic)，详情参考 创建个人访问令牌 - GitHub Docs。

依次配置:

  • Note：给令牌一个描述性名称
  • Expiration：令牌提供到期时间
  • repo：要授予此令牌的作用域
20230201-005@2x.png
  • 注意，生成的token只会在这里显示一次，所以记得单独保存下来哦
20230201-006@2x.png

至此，Github的配置完成。

二、快速上传图片及如何使用

1.PicGo快速上传图片

若你不需要使用picGo等图片管理工具，上传管理图片。则此步骤可以忽略。

由于国内下载PicGo速度非常慢，给大家推荐一个镜像地址下载。

这个下载地址要打开vpn访问。下载地址：Index of /github-release/Molunerfinn_PicGo/v2.3.0/ (sdu.edu.cn)。

如我使用的是Mac64位系统，可通过uname -a命令查看。

20230201-007@2x.png

点击 PicGo-2.3.1-x64.dmg 查看

20230201-008@2x.png

选择对应的版本，即可下载安装。

Mac选择版本疑问参考：Mac电脑使用：判断ARM64 or x64的方法

配置PicGo:

20230201-009@2x.png
  • 仓库名：[github用户名]/[第一步新建的仓库名称]
  • 分支：默认master，从2020.10.01开始，github的默认分支名变更为main
  • 设定token：第一步创建的token
  • 指定存储路径：可填可不填。填写了，图片就会存储在img文件夹下
  • 设定自定义域名：https://cdn.jsdelivr.net/gh/[github用户名]/[仓库名]@main，注意，此处的分支一定要填写@main，否则默认使用master分支，会出现图片不能上传的情况。【踩坑】

至此，github+picGo的配置完成，可以在上传区进行图片上传。

2.如何使用

2.1 使用图床

模板：https://cdn.jsdelivr.net/gh/用户名/仓库名@分支/图片路径

例如：https://cdn.jsdelivr.net/gh/lianpf/image-bed@main/blog/test.png

原github的自定义域名是：https://raw.githubusercontent.com/[username]/[仓库名]。但这种方式访问图片巨慢，所以教程中使用了jsdelivr作为cdn加速。

如果你像我一样，不想使用客户端上传图片，或者在图床仓库设置了多文件夹分类图片，那你可以直接通过git管理仓库，那么你需要做的就只有两步。

  1. 创建【图床仓库】，上传图片资源。
  2. 使用模板路径：https://cdn.jsdelivr.net/gh/用户名/仓库名@分支/图片路径，配置访问你的图片资源。

最后， 希望大家早日实现：成为前端高手的伟大梦想！
欢迎交流~

微信公众号

本文版权归原作者曜灵所有！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！
若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK