前端小记 前端小记
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
  • 学习笔记

    • 《Vue》踩坑笔记
    • TypeScript学习笔记
    • 小程序笔记
    • JavaScript设计模式笔记
  • 工具
  • CentOS
  • Java
  • Docker
  • Linux
  • Maven
  • MySQL
  • 其他
  • 技术文档
  • GitHub部署及推送
  • Nodejs
  • 博客搭建
  • Fullpage全屏轮播插件
  • svn
  • 学习
  • 系统重装
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

sweetheart

前端小记
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
  • 学习笔记

    • 《Vue》踩坑笔记
    • TypeScript学习笔记
    • 小程序笔记
    • JavaScript设计模式笔记
  • 工具
  • CentOS
  • Java
  • Docker
  • Linux
  • Maven
  • MySQL
  • 其他
  • 技术文档
  • GitHub部署及推送
  • Nodejs
  • 博客搭建
  • Fullpage全屏轮播插件
  • svn
  • 学习
  • 系统重装
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

  • GitHub部署及推送

  • Nodejs

  • 博客搭建

    • 解决百度无法收录搭建在GitHub上的个人博客的问题
    • 使用Gitalk实现静态博客无后台评论系统
    • GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
      • 前言
      • 准备工作
      • github 图床打造
      • gitee 图床打造(注意,gitee 上传的图片若大于 1 M 则需要登录才能查看,可以选择压缩图片之后再上传,但目前因为被禁止外链访问,所以此种方式实际上也已经不可用了。)
    • 解决谷歌搜索不到博客的问题
    • 解决百度搜索不到博客的问题
    • 网站由http协议更改为https协议的方法
  • fullpage

  • svn

  • 技术
  • 博客搭建
sweetheart
2020-01-03
目录

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

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

# 前言

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

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

Q:图床的选择

A:推荐使用 GitHub 作为图床,特点是免费、稳定,有一个小缺点是国内访问速度慢,不过没关系,可以使用jsDelivr免费 CDN 加速,但最近发现jsDelivr在国内网速打不开,所以曲线救国选择了使用 gitee 图床,但目前 gitee 禁止使用外链访问了,短期使用可以更换为其他图床,长期使用还是推荐腾讯云、阿里云、七牛云等云服务器厂商提供的服务。

Q:jsDelivr 是什么?

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

# 准备工作

  1. 安装 PicGo,官网地址 (opens new window)

  2. 安装完成后会出现如下界面:

PicGo主界面

# github 图床打造

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

  2. 参照 官方文档 (opens new window) 生成一个 token 密钥

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

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

填写配置信息

  1. 使用https://tinypng.cn/ (opens new window)压缩你要上传的图片(如图片已经很小或你有更好的压缩工具可省略这一步)

  2. 在 PigGo 的上传区上传你的图片,到相册一键复制刚刚上传的图片 URL(生成的链接格式请自行选择),至此,你就可以在你的文章当中愉快的插入图片啦~, 更多功能自己去探索吧~~

上传图片

  1. 在 PicGo 的左侧菜单栏中选择相册,即可看到自己刚上传的图片,根据自己的需要复制即可。

在相册中复制上传后的图片

# gitee 图床打造(注意,gitee 上传的图片若大于 1 M 则需要登录才能查看,可以选择压缩图片之后再上传,但目前因为被禁止外链访问,所以此种方式实际上也已经不可用了。)

  1. 在 PicGo 中选择插件设置,在插件设置选项中添加 gitee插件,在输入框中输入 gitee,选择任意一个插件均可。

安装gitee插件

  1. 重启 PicGo,然后可在左侧菜单栏中看到图床设置,展开该项,即可看到gitee图床选项。

查看菜单项中的gitee图床设置

  1. 注册 gitee 账号并登录成功。

  2. 新建一个新的 git 仓库。

新建git仓库并使用readme文件初始化仓库,不然上传图片会失败

  1. 在 gitee 的右上角中选择设置,在新打开的界面中选择私人令牌,然后新建一个令牌,根据图片选择相关权限,然后点击提交即可。

gitee的设置页面中选择新建私人令牌

  1. 在点击提交后会弹出页面,显示令牌,将其复制下来,稍后会用到,(注意,令牌只会出现一次,如果不复制,只能重新修改令牌,步骤:在私人令牌页面中找到之前的令牌点击修改 --> 重新生成令牌)

  2. 在 PicGo 中根据下方提示填写信息,然后点击确定即可,至于是否设为默认图床可自行选择。

PicGo中填写信息

  1. 在上传区上传图片,到相册选项去复制图片链接即可。

提示

参考链接:https://xugaoyi.com/

完善页面 (opens new window)
上次更新: 2024-11-28 17:23:47
使用Gitalk实现静态博客无后台评论系统
解决谷歌搜索不到博客的问题

← 使用Gitalk实现静态博客无后台评论系统 解决谷歌搜索不到博客的问题→

最近更新
01
git常用操作手册
12-26
02
常用的前端工具库
12-19
03
前端构建工具
12-19
更多文章>
前端小记 版权所有 | Copyright © 2021-2024
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式