2022年，我不允许任何人还没有免费图床系统

爱敲代码的小黄
1,153 阅读5分钟
  • 👏作者简介：大家好，我是爱敲代码的小黄，独角兽企业的Java开发工程师，Java领域新星创作者。
  • 📝个人公众号：爱敲代码的小黄
  • 📕系列专栏：Java设计模式、数据结构和算法
  • 📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
  • 🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
  • 🍂博主正在努力完成2022计划中：以梦为马，扬帆起航，2022追梦人

一、引言

总所众知，目前程序届最好用的笔记编辑器莫过于 Typora，但 Typora 有一个比较难受的地方。

当我们插入图片时，会将我们本地的图片进行插入，如下图：

image-20220123231510343

这样一来，当我们将整个笔记拷贝到博客、知乎、公众号一些平台时，我们的图片需要重新截图，会造成大量的麻烦。

本文将保姆级的带你打造一个 Typora + PicGo + github/gitee + CDN 的图床系统

让你从此写笔记，如虎添翼，一步踏青云

二、系统准备

关注公众号 爱敲代码的小黄 回复：图床，可获得所有软件网盘下载链接

官网也可以下载，不保证版本正确性

公众号版本为博主已验证版本，给孩子点点关注吧 ^_^，感谢感谢

工欲善其事，必先利其器

首先我们需要安装以下软件

  • node.js
  • PicGO
  • Gitee/GitHub账号
  • Typora软件

1. node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时

官方网址：nodejs.cn/，直接下载安装即可

image-20220123232053400

安装完之后，需要进入 cmd 验证一下版本，是否安装成功

image-20220123232538576

2. PicGo

图片上传+管理新体验,基于electron-vue开发，支持macOS，Windows，Linux，支持插件系统，让PicGo更强大

官方网址：molunerfinn.com/PicGo/，直接下载…

注意：在安装 PicGo 之前必须先安装 node.js，不然会导致插件无法下载

image-20220123232831948

3. Gitee/GitHub账号

这个各位读者可自行百度

西方不能失去耶路撒冷，程序员不可无 Gitee/GitHub

这个使用方法在后续会讲到

4. Typora软件

程序员的老帮手了

官方下载链接：www.typora.net/

现在 Typora 软件最新版本要收费了，有经济基础的可以支持下

无经济基础公众号回复：图床

三、基于Gitee的图床

1. PicGo配置

  • 我们打开我们刚才安装的 PicGo 软件

image-20220123235434422

  • 打开 插件设置，安装 gitee 插件

image-20220123235617671

  • 安装完之后，我们打开我们的 PioGo设置，只保留 Gitee图床（这步操作做不做都可以，主要影响图床设置的选项）

image-20220123235801192

  • 打开我们的 图床设置，主要设置如下图所示

    image-20220124000647637

2. Gitee(码云)信息获取

  • 登录我们的 Gitee，新建一个仓库

    image-20220124000826170

  • 仓库配置

    image-20220124001147802

  • Token的获取

    步骤：设置 -> 私人令牌 -> 生成新令牌 -> 提交 -> 复制，记住生成token以后需要保存下来（复制到哪里留着，PicGo里面用得到）

    • 设置 -> 私人令牌

    • 生成新令牌

      image-20220124001801685

    • 复制，保存 Token

      image-20220124001845492

3. Typora上传图床

  • 首先我们需要配置好我们的 PicGo，按照对应的关系进行配置，之前复制的 Token 别忘了

    image-20220124000647637

    image-20220124001147802

  • 打开Typora的文件 -> 偏好设置 -> 图像 ，选择 上传服务设定 ，选择相应的路径

    image-20220124002612756

  • 点击验证图片上传选项，出现下面的图即为成功~

    image-20220124003132076

  • 我们来尝试自己手动上传下图片，右击图片点击 上传图片即可

    image-20220124003511071

  • 去我们的仓库查看该图片

    image-20220124003604453

四、基于GitHub的图床

1. PicGo配置

  • 和上面类似，安装插件如下

    image-20220124004121423

  • 打开我们的 图床设置，主要设置如下图所示

    image-20220124004501607

2. GitHub信息获取

我们获取的信息主要为：拥有者、仓库名、Token、分支、自定义URL（选填）

  • 打开我们的 GitHub 首页，建立一个新的仓库

    image-20220124230340702

  • 选择相应的配置信息

    image-20220124230742712

  • 我们新建仓库之后，GitHub 会默认将当前的分支设置为 Main，我们需要手动将其修改为 master

    image-20220124230922566

  • 获取 Token，路径：settings -> Developer settings -> Personal access tokens -> Generate now token -> Generate token

    image-20220124231324499

  • 向 PicGo 填入相应的配置即可

    注：这里提供一个加速访问图片的方法：CDN加速 将上面的 customUrl 域名改为： 原 raw.githubusercontent.com/huanggongzi… 现 cdn.jsdelivr.net/gh/huanggon…

3. Typora上传图床

如上

五、问题

  • 一定要安装完 node.js 再去安装 PicGo
  • 如果按照上面流程还是失败了，可能是版本的问题，尝试下载博主公众号的版本链接：爱敲代码的小黄
  • 如果上述不能解决你的问题，可以留言或者私信联系我

六、总结

到这基本我们就完成自己的图床配置了，我们可以直接在我们的 Typora 上进行书写我们的笔记，复制粘贴到博客即可

博主建议使用 Gitee 作为自己的图床，毕竟 GitHub 的网速有点不尽人意

这期的图床配置到这里就结束了，下一期会讲述计算机网络相关知识，提前透漏一下，计算机网络的八股题主也颇有研究。

我是一名独角兽企业的Java开发工程师，希望可以点个关注呀，有问题可以留言或者私信加我微信，我们下期再见！

本篇文章的所有图片均来自 GitHub 图床

avatar
文章
阅读
粉丝