Typora结合PicGo + 使用Github搭建个人免费图床

文章目录

  • 一、国内图床比较
  • 二、使用Github搭建图床
  • 三、PicGo整合Github图床
    • 1、下载并安装PicGo
    • 2、设置图床
    • 3、整合jsDelivr
      • 具体配置介绍
    • 4、测试
    • 5、附录
  • 四、Typora整合PicGo实现自动上传

每次写博客时,我都会习惯在Typora写好,然后再复制粘贴到对应的网站上。但是难免会遇到一些问题:Typora里的图片是无法直接赋值粘贴到网上的,因为图片存储在本地,网站上写博客的地方是读取不到本地图片的!

这个时候,图床的用途就体现出来了。使用Typora的自带功能,当我们在Typora里插入图片时,能自动的上传至网络,并且得到图片的url连接!


一、国内图床比较

图床:储存图片的服务器,有国内和国外之分。

结合网上的资料在这里举几个例子

  1. 公共图床:这类图床一般可以直接上传图片,会返回一个链接,供你使用

    • SM.MS图床:无需注册,没有广告,直接上传

    • 路过图床:有点广告,需要注册

  2. 代码托管平台:这类图床一般是建立在代码托管平台的仓库中,使用时要公开仓库

    • GitHub:全球最大代码托管平台,目前除了国内速度慢,几乎没啥缺陷

    • Gitee:国内仿GitHub代码托管平台,但免费的各种容量上的限制,优点是国内速度快

    • 七牛云:速度快,缺点是要点小钱,免费的各种限制

  3. 服务器图床:

    各大云服务器:阿里云,百度云,华为云,或者私人服务器 。除了费用高,没啥缺点,全是优点

但是作为一个学生党,当然白嫖最香!

在gitee和github上纠结很久,最终选择github + jsDelivr(加速),因为gitee的免费个人的空间太小了,并且上传文件的大小限制 < 1M。


二、使用Github搭建图床

新建仓库

image-20240225001855355
在这里插入图片描述

点击右上角用户头像 => settings
在这里插入图片描述

生成token令牌,往下拉,直到左侧到底,选择Developer settings

在这里插入图片描述

按图点击

image-20240225002702049

验证选择密码验证

image-20240225002758046

可以给令牌(token)做个Note(标记),然后选择令牌(token)截止时间。这里不建议选永久,因为不安全。基本是该图床你用到多久就选多久即可。

选择 repo 权限,然后拉到底部,选择创建就行了。

在这里插入图片描述

创建完毕之后,生成的Token是你的账户下的github服务器的令牌,最好用记事本记录下来,后面会用到。


三、PicGo整合Github图床

PicGo是一款优秀的图床工具,能够自动把本地图片上传至网络,并转换成可访问的链接。

1、下载并安装PicGo

下载地址:https://github.com/Molunerfinn/PicGo/releases

根据自己的操作系统(Win/Linux/Mac)来下载安装包

在这里插入图片描述

2、设置图床

图床设置 => Github

在这里插入图片描述

3、整合jsDelivr

想要知道jsDelivr的作用,首先就需要了解CDN是什么

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

由于Github的资源在国内加载速度比较慢,因此需要使用CDN加速来优化网站打开速度,jsDelivr + Github便是免费且好用的CDN,非常适合博客网站使用。

进行图床配置:

image-20240225010322920

具体配置介绍

  1. 图床配置名:自己取

  2. 设定仓库名:用户名+仓库名

  3. 设定分支名:

    image-20240225010505787

  4. 设定Token:就是上面我们刚刚在Github上获取的token

  5. 设定存储路径:需要放到仓库中的哪个文件夹下。

    • 如果直接放到仓库的根目录下就不需要填写这一栏

    • 如果需要放到某个目录下,直接写目录名就行,不需要在目录名前加 / 。

      eg:test

    • 当有多级目录时,也是直接写路径。

      eg:test/test1/test2

    • 当填写的目录不存在时,PicGo会自动帮你在Github上创建目录,这个不用担心!

  6. 设定自定义域名:此时就需要结合jsDelivr来加速了

    打开jsDelivr官网,了解它的使用方法:https://www.jsdelivr.com

    在这里插入图片描述

    # https://cdn.jsdelivr.net/gh/:固定的前缀,相当于替换掉了Github地址中的https://github.com/
    # user:Github上的用户名
    # repo:仓库名
    # @version:版本号(这里我们可以不管)
    # file:文件名(这里我们也不需要加上,因为上传完图片后,它会自动将上传的图片的名字作为存储的文件名)
    https://cdn.jsdelivr.net/gh/user/repo@version/file
    

    例如我的自定义域名就为:https://cdn.jsdelivr.net/gh/Epiphany6666/Picture

    这里值得注意的是,如果需要指定上传到哪个分支,此时需要在自定义域名后面使用@ + 分支名,如果是仓库默认的分支,可以省略指定分支这一步。

    eg:我需要上传到test分支上,此时自定义域名就变成了:https://cdn.jsdelivr.net/gh/Epiphany6666/Picture@test

4、测试

配置完成后,切换到刚刚配置好的图床,然后手动上传图片试试:可以点击’点击上传’,也可以通过拖拽的方式进行上传

PS:上传的过程中需要关闭steam++

在这里插入图片描述

然后,我们能够在相册中看到我们已经上传的图片,可以查看、复制已经上传的图片的URL,同时也可以将上传的图片删除。

在这里插入图片描述

5、附录

可以在PicGo设置中开启 时间戳重命名 ,这样同时上传相同的图片就不会被覆盖了。

image-20240225024937437


四、Typora整合PicGo实现自动上传

PS:使用Typora上传的时候同样需要关闭steam++

在Typora中配合PicGo,就可以实现在文章中插入图片时自动上传。

image-20240225005220447

按如图所示配置。

插入图片时选择上传图片。在上传服务内选择PicGo,并选择PicGo.exe的路径。

在这里插入图片描述

大功告成!快去在Typora中插入一张图片试试吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/702707.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+vue的校园社团信息管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

自定义搭建管理系统

最近使用自己搭建的脚手架写了一个简易管理系统&#xff0c;使用webpackreactantd&#xff0c;搭建脚手架参考&#xff1a; 使用Webpack5搭建项目&#xff08;react篇&#xff09;_babel-preset-react-app-CSDN博客 搭建的思路&#xff1a; 1. 基建布局&#xff0c;使用antd的…

代码随想录算法训练营第二十五天 | 216.组合总和III,17.电话号码的字母组合 [回溯篇]

代码随想录算法训练营第二十五天 LeetCode 216.组合总和III题目描述思路参考代码总结 LeetCode 17.电话号码的字母组合题目描述思路参考代码 LeetCode 216.组合总和III 题目链接&#xff1a;216.组合总和III 文章讲解&#xff1a;代码随想录#216.组合总和III 视频讲解&#xff…

Java零基础 - 字符串连接运算符

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一个人虽可以走的更快&#xff0c;但一群人可以走的更远。 我是一名后…

linux ubuntu 开发环境搭建 opencv fftw openvino

OpenCV 下载 opencv 源码&#xff1a;Releases - OpenCV 官方安装文档&#xff1a;https://docs.opencv.org/4.x/d7/d9f/tutorial_linux_install.html 详细的安装过程可以参考文章&#xff1a; 在 Linux 系统中编译安装 OpenCV - 知乎 安装依赖项&#xff1a; sudo apt-get …

ubuntu 22 安装 python3.11.7

ubuntu升级python到python3.11&#xff08;可能是全网最靠谱的方法&#xff0c;亲测有效&#xff09;_ubuntu python3.11-CSDN博客 在 Ubuntu 中升级 Python 到 3.11 版本可以通过编译源代码或者使用第三方工具来完成。请注意&#xff0c;在升级 Python 之前&#xff0c;请确保…

采用遗传算法搜索MAC效率最高的矩阵乘规模

如何采用遗传算法搜索MAC效率最高的矩阵乘规模 具体实现MAC效率评估代码(eval.py)遗传算法实现 本文介绍了采用遗传算法搜索MAC效率最高的矩阵乘规模 需求背景: 一些AI加速卡在做矩阵乘时,因硬件或软件的约束,并不是规模越大MAC效率越高在测试AI加卡的实际算力时,采用MAC效率最…

vue 子组件获取父组件

父组件vue <template><el-carousel indicator-position"outside"><el-carousel-item ><child /></el-carousel-item><el-carousel-item ><h3>{{ 2 }}</h3></el-carousel-item></el-carousel> </tem…

acwing算法学习笔记 ------ 双链表

1、定义 这里可以做一个投机取巧&#xff0c;我们不再像单链表去用head去存头和尾&#xff0c;直接让r[0] 1,l[1] 0; idx 2.进行初始化&#xff0c; 解释一下l[N] 和 r[N] l[N]:是表示指向左面下一个节点下标&#xff0c; r[N]:表示指向下一个节点的下标。大家不用担心i…

皓学IT:WEB03_MySQL

今日内容介绍 Mysql数据库 SQL语句 一、数据库 1.1. 数据库概述 什么是数据库 数据库就是存储数据的仓库&#xff0c;其本质是一个文件系统&#xff0c;数据按照特定的格式将数据存储起来&#xff0c;用户可以对数据库中的数据进行增加&#xff0c;修改&#xff0c;删除及…

南京观海微电子---AXI总线技术简介——ZYNQ PS和PL的互联技术

1.AXI总线介绍 AXI全称Advanced Extensible Interface&#xff0c;是Xilinx从6系列的FPGA开始引入的一个接口协议&#xff0c;主要描述了主设备和从设备之间的数据传输方式。AXI协议在Xilinx的ZYNQ系列芯片中继续使用&#xff0c;协议版本是AXI4。 ZYNQ为Xilinx推出的首款将高…

解决vulhub漏洞环境下载慢卡死问题即解决docker-valhub漏洞环境下载慢的问题

解决vulhub环境下载慢/卡 当前环境为&#xff1a;ubuntu20 1.在 cd /etc/docker/目录下创建或修改daemon.json文件 sudo touch daemon.json编辑daemon.json文件 sudo vim daemon.json2.填写阿里云镜像地址&#xff1a; { "registry-mirrors":["https://6kx…

11-pytorch-使用自己的数据集测试

b站小土堆pytorch教程学习笔记 import torch import torchvision from PIL import Image from torch import nnimg_path ../imgs/dog.png imageImage.open(img_path) print(image) # imageimage.convert(RGB)transformtorchvision.transforms.Compose([torchvision.transforms.…

运维SRE-15 自动化批量管理-ansible1

## 1.什么是自动化批量管理重复性工作与内容: 思考如何自动化完成. 部署环境,批量查看信息,批量检查:自动化 一般步骤:1.如何手动实现2.如何自动化管理工具&#xff0c;批量实现3.注意事项&#xff1a;想要自动化一定要先标准化(所有环境&#xff0c;软件&#xff0c;目录一致)…

剑指offer面试题19 二叉树的镜像

考察点 树的遍历知识点 题目 分析 我们分析算法题目的思路基本上都是归纳法&#xff0c;即通过举一些普通的例子来推理出算法流程&#xff0c;而画图又是举例子的常用手段&#xff0c;比如针对树或者链表画画图&#xff0c;针对数字类的举一些数字的例子寻找规律&#xff0c…

《Docker极简教程》--Docker在生产环境的应用--Docker在生产环境的部署

一、准备工作 1.1 硬件和基础设施要求 硬件和基础设施要求是在部署 Docker 到生产环境之前需要认真考虑和准备的重要方面&#xff0c;以下是一般性的要求&#xff1a; 服务器硬件&#xff1a; CPU&#xff1a;建议使用多核处理器&#xff0c;以支持同时运行多个容器。内存&a…

复制策略深入探讨

在之前的博客中&#xff0c;我们讨论了复制最佳实践和不同类型的复制&#xff0c;例如批量、站点和存储桶。但是&#xff0c;随着所有这些不同类型的复制类型的出现&#xff0c;人们不得不想知道在哪里使用哪种复制策略&#xff1f;从现有 S3 兼容数据存储迁移数据时&#xff0…

在MFC对话框中嵌入web网页时事件失效问题

2010-04-20 日志 在MFC对话框中嵌入web网页时&#xff0c;网页初始化中添加事件无效 document.body.onkeydown function () {//onkeydown"keydownbody()" 不能激发alert(event.keyCode);if(event.keyCode 27)//VK_ESCAPE //String.fromcharcode(A);{if (external…

C语言推荐书籍

本书详细讲解了C语言的基本概念和编程技巧。全书共17章。第1章、第2章介绍了C语言编程的预备知识。第3章&#xff5e;第15章详细讲解了C语言的相关知识&#xff0c;包括数据类型、格式化输入/输出、运算符、表达式、语句、循环、字符输入和输出、函数、数组和指针、字符和字符串…

自然语言处理Gensim入门:建模与模型保存

文章目录 自然语言处理Gensim入门&#xff1a;建模与模型保存关于gensim基础知识1. 模块导入2. 内部变量定义3. 主函数入口 (if __name__ __main__:)4. 加载语料库映射5. 加载和预处理语料库6. 根据方法参数选择模型训练方式7. 保存模型和变换后的语料8.代码 自然语言处理Gens…