Frank's blog Frank's blog
首页
  • Java SE
  • Java Web
  • Java EE
  • HTML
  • CSS
技术
Python
  • 友情链接
关于
索引
GitHub (opens new window)

Master Frank

斯人若彩虹,遇上方知有
首页
  • Java SE
  • Java Web
  • Java EE
  • HTML
  • CSS
技术
Python
  • 友情链接
关于
索引
GitHub (opens new window)
  • Git

  • 技术博客

    • 如何用GitHub+PicGo+jsDelivr白嫖图床并用于Typora
      • 用处
      • 步骤
        • 1、创建GitHub仓库
        • 2、生成token
        • 3、下载Picgo并配置GitHub图床
        • 4、设置Picgo
        • 5、设置Typora
        • 6、将之前在Typora写的文章中的图片批量上传到图床
    • 在idea中导入MyEclipse项目并配置
    • vuepress出现error code ELIFECYCLE errno 1的问题
    • 解决电脑PPPOE拨号无法开启移动热点的问题
    • Go语言在VS code中报错go.mod file not found in current directory or any parent directory
    • 解决Go语言拓展在VS code中无法正常安装的问题
    • 就这几个简单页面APP,这混小子要我10W块?!大家评评理!
    • 字节青训营练习
    • Mysql多版本安装
  • 技术
  • 技术博客
Frank
2021-10-28
目录

如何用GitHub+PicGo+jsDelivr白嫖图床并用于Typora

# 如何用Github+Picgo+jsDelivr白嫖图床并用于Typora

# 用处

平时我们写笔记文章,常常使用Typora,图片保存的是本地。

这样会出现两个问题:

1、把这篇笔记发给别人的时候,还需要将图片一并打包发过去,否则对方看不到图片

2、当把这篇笔记转载到其他平台,例如CSDN,图片需要上传到CSDN上。一个两个图片还好,如果图片太多,往往会出现上传失败的情况。

图床:图床一般是指储存图片的服务器,我们在部署页面的时候,图片往往是以链接的方式实现的。这种方式,实现了一次存储,多地移植的效果。假如我需要在多个地方发表我们的文章,就不需要再重新一张一张在对方的页面上传图片。

本文将介绍如何利用Github+Picgo+jsDelivr白嫖一个图床,并在Typora中使用。这三个工具的作用分别是:

  • GitHub存储
  • PicGo上传
  • jsDelivr加速访问

gitee也可以免费搭建图床,但限制比较多,不推荐使用。

# 步骤

# 1、创建GitHub仓库

打开GitHub,右上角点击“+”,选择New repository

image-20210710111226000

输入仓库名和描述。

选择仓库类型为Public,因为Private库不支持jsDelivr的cdn加速。

注意下方的分支main

然后点击Create repository。

# 2、生成token

点击右上角头像,Settings

image-20210710113502358

点击左侧的Developer settings。

image-20210710113712149

点击左侧的Personal access tokens。

image-20210710113646880

点击右上的Generate new token。

image-20210710114000979

设置token的名字,勾选repo,然后拉到最底下点击Generate token

image-20210710114633279

创建成功后会生成一段token,这段token只显示一次,一定要注意保存!!!

image-20210710114930694

# 3、下载Picgo并配置GitHub图床

Picgo下载地址 (opens new window)。在里面按照自己的电脑选择合适的版本下载安装。

使用Picgo前需要在电脑安装Node.js,如果还没安装的点击这里 (opens new window)进入官网下载安装。这里默认大家已经安装了。

安装好Picgo后打开,点击左边的图床设置,然后点击Github图床。

image-20210710121903034

接下来配置Picgo

image-20210710122705109

  • 设定仓库名

    填写用户名/刚刚创建的仓库名

  • 分支名

    输入创建仓库时设置的分支,我的是main

  • 设定token

    输入第二步生成的token

  • 指定存储路径

    默认的img/即可

  • 设定自定义域名

    按照以下格式填写

    https://cdn.jsdelivr.net/gh/用户名/仓库名

    例如我的是https://cdn.jsdelivr.net/gh/Master-Frank/Image-hosting

配置好Picgo后,可以上传图片测试。左侧选择上传区,在上方选择GitHub图床。

image-20210710131844979

然后将图片拖拽进去,或者点击上传,然后会出现上传成功的提示。

image-20210710133359021

再打开GitHub上作为图床的仓库,可以看到图片已经在仓库中啦。

image-20210710133501999

在Picgo中点击左侧的相册,也可以看到上传好的图片啦。

在图片的下方有三个按钮,分别是复制图片链接、修改图片链接和删除图片。

注意,在Picgo中删除图片后图片还会保留在GitHub的仓库中。

image-20210710142836447

下面这张就是我上传成功的图片啦。

此时我们的图床已经搭建好了!

# 4、设置Picgo

为了方便在typora中使用这个图床,还需要在Picgo进行一些设置。

点击左边的Picgo设置,找到设置Server,点击设置

image-20210710155528359

将监听端口设置为36677。这是typora使用的端口。

image-20210710155710441

然后拉到最下面。本教程使用的是GitHub图床,所以可以把其他图床取消啦。

image-20210710155830439

# 5、设置Typora

打开Typora,点击文件->偏好设置

image-20210710160117520

接下来按照下图进行设置

  1. 点击图像
  2. 选择上传图片
  3. 打上对应的三个勾
  4. 上传服务选择Picgo(app),然后选择一下刚刚安装Picgo的路径
  5. 点击验证图片上传选项

image-20210710160834837

当验证图片上传显示验证成功,就说明typora已经可以正常使用刚刚搭建好的图床啦!

image-20210710161054758

从现在开始,将图片添加到Typora中,都会自动上传到图床了!

# 6、将之前在Typora写的文章中的图片批量上传到图床

配置好图床后,有的小伙伴可能想知道怎么把之前写的文章的图片也批量上传到图床呢?

Typora有这个功能!点击上方的格式->图像->上传所有图片,一会该文章的所有图片就会全部上传到图床并替换好路径啦!

image-20210710182659061

不过这个方法有可能失败,如果失败的话只能在每张图片右键点击上传图片咯。

在Github中编辑 (opens new window)
上次更新: 2021/11/04, 10:42:18
利用Github Action实现Github到Gitte的持续同步
在idea中导入MyEclipse项目并配置

← 利用Github Action实现Github到Gitte的持续同步 在idea中导入MyEclipse项目并配置→

最近更新
01
面试问题套路
04-21
02
Mysql多版本安装
05-28
03
Go语言基础类型
05-04
更多文章>
Theme by Vdoing | Copyright © 2021-2024 Master Frank | 粤ICP备2021148573号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×