vuepress-theme-vdoing/docs/03.技术/04.博客搭建/03.GitHub + jsDelivr + Tiny...

3.0 KiB
Raw Blame History

title date permalink categories tags author
GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床 2020-01-03 12:55:43 /pages/a5f73af5185fdf0a
技术
博客搭建
null
name link
xugaoyi https://github.com/xugaoyi

GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床

前言

Q为什么要使用图床呢什么是图床

A写博客文章时图片的上传和存放是一个问题有的朋友可能会把图片放到和博客同一个仓库当中使用相对路径来引用这样后期维护起来会比较麻烦。还有的朋友会在不同的平台发布同一篇文章这样一来每个平台都要上传图片为了解决这些问题比较推荐的做法是把图片统一上传到一个在线的第三方静态资源库中我们把这个资源库称为图床其返回一个图片的URL使用markdown+图片url的方式写作文章,一次编写,到处使用~

::: warning 更好的选择... 以下内容是比较旧的,现在我发现一个更好用,配置更方便的图床工具:https://picx.xpoet.cn/ 使用方法看一下他网站的使用教程就行。 撒由那拉~~ ::: right 2021.07.04 :::

Q图床的选择

A推荐使用GitHub作为图床特点是免费、稳定有一个小缺点是国内访问速度慢不过没关系可以使用jsDelivr免费CDN加速。

QjsDelivr是什么

AjsDelivr是国外的一家优秀的公共 CDN 服务提供商该平台是首个「打通中国大陆与海外的免费CDN服务」无须担心中国防火墙问题而影响使用。官网http://www.jsdelivr.com/

图床打造

  1. 新建GitHub仓库注意仓库要设置成公开

  2. 参照 官方文档 生成一个token密钥

  3. 这里 下载PicGo安装完成后打开图床设置GitHub图床,并填写相应的信息

    • 仓库名:前面新建的仓库,格式:<用户名>/<仓库名>
    • 分支名:填写主分支master即可
    • Token前面生成的token密钥
    • 存储路径:按你自己的需求填写
    • 自定义域名图片上传后PicGo 会按照 自定义域名+上传的图片名 的方式生成访问链接,此处我们填写jsDelivr的CDN加速地址格式https://cdn.staticaly.com/gh/<用户名>/<仓库名>

  1. 使用https://tinypng.cn/压缩你要上传的图片(如图片已经很小或你有更好的压缩工具可省略这一步)
  2. 在PigGo的上传区上传你的图片,到相册一键复制刚刚上传的图片URL至此你就可以在你的文章当中愉快的插入图片啦~ 更多功能自己去探索吧~~