NoteZ_技术博客 NoteZ_技术博客
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)

NoteZ_技术博客

前端界的小学生
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)
  • Web技术

  • Git笔记

  • Linux文档

  • Markdown

  • Nginx文档

  • Npm笔记

  • 技术文档

    • axios携带cookie
    • Echarts自定义提示框tooltip样式(包括提示框标题不固定)
    • gitee 仓库初始化
    • GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
      • 前言
      • 图床打造
    • GitHub Actions 定时运行代码:每天定时百度链接推送
    • GitHub Actions 实现自动部署静态博客
    • GitHub加速下载项目的方法
    • GitHub高级搜索技巧
    • js以当前时间为基础,便捷获取时间(最近2天,最近1周,最近2周,最近1月,最近2月,最近半年,最近一年,本周,本月,本年)
    • JupyterLab二次开发环境配置以及踩的一些坑(笔记)
    • linux 虚拟机 ping 域名时,提示“未知的名称或服务原因分析“
    • Node.js中间件 - Multer详解
    • node.js使用supervisor或nodemon进行调试热更新
    • NodeJs的压缩文件之 - 模块 archiver 用法示例
    • Pdf数据解析
    • sh文件出现错误:Permission denied解决办法
    • vscode命令行以管理员身份运行
    • webpack 的简单使用
    • Web前端Vue离线存储之 - localForage.js使用方法
    • windows 多版本管理工具 nvm-windows
    • windows 如何配置 pip 镜像
    • WX小程序开发总结
    • Xshell 6 提示 “要继续使用此程序,您必须应用最新的更新或使用新版本”
    • yaml语言教程
    • 使用 SwitchHost 修改 host 文件为 GitHub 提速
    • 使用Gitalk实现静态博客无后台评论系统
    • 几款主流好用的富文本编辑器
    • 如何使用 babel 对es6语法进行转码
    • 如何使用 github pages 搭建你的个人站点
    • 如何使用openvscode-server搭建一个vscode代码编辑器
    • 如何配置 GitHub 页面的发布源
    • 如何配置GitHub登录账号密码,进行免密push仓库文件
    • 解决GitHub提交代码成功后并不显示绿格子问题
    • 解决百度无法收录搭建在GitHub上的个人博客的问题
    • VuePress 配置 MarkDown 文件目录.md
    • GitHub无法打开或加载慢的解决方法
    • win10 通过修改 hosts 提升github访问速度
    • Echarts实现自适应
    • gulp项目中ReferenceError_ primordials is not defined报错解决方法
    • 使用libreoffice将word转化成pdf
    • onlyoffice+vue实现在线预览在线编辑
    • Stable-Diffusion-WebUI 搭建使用教程
    • wind10通过安装nvm切换node版本
    • 解决虚拟机中ip地址总是自动变化办法
    • Git配置之邮箱设置
    • Echarts重写tooltip(提示框)代码
    • 使用 frp 实现内网穿透
    • win10 开机自启动 frp 实现内网穿透
    • Express 与 vue3 使用 sse(event-stream)实现消息推送并使用 nginx 转发
    • Linux 中使用 rsync 同步文件目录教程
    • Gitea数据备份与还原
  • 其他文档

  • 前端开发
  • 技术文档
NoteZ
2021-06-11
目录

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

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

# 前言

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

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

更好的选择...

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

2021.07.04

Q:图床的选择

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

Q:jsDelivr是什么?

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

# 图床打造

  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,至此,你就可以在你的文章当中愉快的插入图片啦~, 更多功能自己去探索吧~~

#GitHub#jsDelivr#TinyPNG#PicGo
上次更新: 2024/01/30, 00:35:17
gitee 仓库初始化
GitHub Actions 定时运行代码:每天定时百度链接推送

← gitee 仓库初始化 GitHub Actions 定时运行代码:每天定时百度链接推送→

最近更新
01
Gitea数据备份与还原
03-10
02
Linux 中使用 rsync 同步文件目录教程
03-10
03
Linux 使用 rsync 互相传输同步文件的简单步骤
03-08
更多文章>
Theme by Vdoing | Copyright © 2019-2025 NoteZ,All rights reserved | 冀ICP备2021027292号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式