本文讲述使用Github作为图床,VScode搭配Picgo插件书写Markdown,并使用jsdelivr进行CDN加速的配置流程。

准备阶段

首先进行以下准备工作,都很简单,不再赘述。

  1. 注册Github账号
  2. 安装VScode
  3. 为VScode安装Picgo插件

配置github

创建仓库

  1. 登陆github,点击右上角加号,选择“New repository”创建新仓库

  2. 设置仓库属性,具体如下图所示。值得注意的是,仓库可见性必须设为public,否则无法使用仓库作为图床。

获取token

生成一个Token用于操作GitHub repository。

  1. 点击头像,选择“setting”
  2. 进入页面后,依次点击“Developer settings-Personal access tokens”,然后点击“Generate new token”按钮,获取一个新的token。
  3. 点击后,在新出现的页面“Note”选项中键入token的名称,然后勾选下方repo权限后,点击页面最下方“Generate token”按钮
  4. 创建成功后,会生成一串token,这串token之后不会再显示,所以最好将其记录下来。

配置Picgo插件

打开VScode,找到Picgo插件,在插件上“右击-扩展设置”,往下拉,在设置中找到以下属性并修改:

  1. "Current":当前使用图床,修改为github
  2. “Github: Repo”:github仓库,设置为用户名/仓库名,如geoli91/ImageHosting
  3. “Github: Path”:图片需要存放的文件夹,即图片存放路径为用户名/仓库/path/图片名.png。可选,如果有需要可以设置,如img/
  4. “Github: Custom Url”:自定义域名,可以通过设置该项使用CDN加速,如使用jsdelivr加速这可设置为https://cdn.jsdelivr.net/gh/geoli91/ImageHosting,其中结尾为用户名/仓库名。如果不使用CDN加速,则无需修改。
  5. “Github: Branch”:分支名,如果仓库只有默认的一个分支,则直接填master即可
  6. “Github: Token”:从Github获得的提交token,复制粘贴即可,注意保护好不外泄。

配置jsdelivr CDN加速

将Picgo插件中“Github: Custom Url”自定义域名属性设置为https://cdn.jsdelivr.net/gh/用户名/仓库名开头,如https://cdn.jsdelivr.net/gh/geoli91/ImageHosting即可自动使用jsdelivr 免费CDN加速服务。尤其是2020年开始https://raw.githubusercontent.com被墙之后,更是只有利用CDN才能访问github图床了。

Picgo快捷键

  1. ctrl+alt+u:从剪贴板插入图片
  2. ctrl+alt+e:手动选择要插入的图片

OK,打完收工,开始享用吧


本文参考:

  1. PicGo帮助文档 https://picgo.github.io/PicGo-Doc/zh/guide/config.html#github图床
  2. 博客 https://blog.csdn.net/weixin_46486966/article/details/104968819
  3. https://ee.ofweek.com/2020-06/ART-11000-2818-30445800.html

VScode+PicGo+Github+jsdelivr使用图床书写Markdown的更多相关文章

  1. VSCode + PicGo + Github + jsDelivr 搭建稳定快速高效图床

    VSCode + PicGo + Github + jsDelivr 搭建稳定快速高效图床 目录 前言 准备 配置 验证 前言 所谓图床,就是将图片储存到第三方静态资源库中,其返回给你一个 URL 进 ...

  2. PicGo+jsDelivr+GitHub搭建免费图床,Typora使用图床

    Github配置 首先,创建一个GitHub账号 然后添加一个仓库 创建完后点头像,Setting 然后点击Developer settings 然后点击Personal access tokens ...

  3. Typora[MarkDown编辑器]+(PicGo+Github+JsDelivr)[个人图床] ,开启你的高效创作

    使用Typora搭配Picgo开启你的高效创作 0x00 一切都要从MarkDown说起 富文本语言的弊端 平常我们最常用的写作工具,无非是富文本编辑器中的代表--微软家的Office Word.这种 ...

  4. 一劳永逸,使用 PicGo + GitHub 搭建个人图床工具

    原文链接: 一劳永逸,使用 PicGo + GitHub 搭建个人图床工具 经常写博客的同学都知道,有一个稳定又好用的图床是多么重要.我之前用过七牛云 + Mpic 和微博图床,但总感觉配置起来比较麻 ...

  5. Vscode+Picgo+github+Markdown Preview Enhanced实现Markdown一键上传图床以及导出pdf文件

    目录 安装Vscode 安装及配置Picgo插件 安装Markdown Preview Enhance 安装Vscode 安装Vscode(不解释了) 安装及配置Picgo插件 在github中新建仓 ...

  6. 10分钟教你使用Picgo+GitHub+ jsDelivr搭建CDN加速免费图床

    前言 经常写Markdown或者博客的同学,肯定都要用到图床.图床是什么呢?其实相当于一个存储图片的网站,类似百度云这样,不过上传图片到图床后可以直接通过外链进行访问. 比如把本地一张a.jpg上传到 ...

  7. 使用Github+jsDelivr搭建图床和存储服务

    使用元素 我的博客NLNet 并未搭建自己的博客,使用博客园(cnblogs),自定义了主题NLNet-Theme. 写作工具Typora 优秀的Markdown编辑器.参考NLNet-Theme,我 ...

  8. GitHub+JSDelivr+PicGo+Typora免费白嫖高速稳定图床

    0. 初衷1. 创建 GitHub 仓库2. 使用 jsDelivr 进行 CDN 加速3. 使用PicGo上传图片4. Typora 配置 PicGo 上传 0. 初衷 平时写文章,经常需要插入图片 ...

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

    GitHub + jsDelivr + PicGo + Imagine 打造稳定快速.高效免费图床 前言 为什么要使用图床呢? 因为在不同平台发布同一篇文章的时候,最一个痛苦的点就是,图片存储问题,各 ...

随机推荐

  1. From 表单序列化为json对象(代码片段)

    $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...

  2. 图像增强 | CLAHE 限制对比度自适应直方图均衡化

    1 基本概述 CLAHE是一个比较有意思的图像增强的方法,主要用在医学图像上面.之前的比赛中,用到了这个,但是对其算法原理不甚了解.在这里做一个复盘. CLAHE起到的作用简单来说就是增强图像的对比度 ...

  3. sed在文本第一行和最后一行添加字符串

    shell在文本第一行和最后一行添加字符串 sed -i '1 i\ApiInterfaceName ResposeTime' /tmp/apiLog/apiLogFromatSecond.logse ...

  4. Fortify Audit Workbench 笔记索引

    Password Management: Password in Configuration File(明文存储密码) https://www.cnblogs.com/mahongbiao/p/124 ...

  5. Filebeat日志收集简单使用

    1.简略介绍 轻量型日志采集器,用于转发和汇总日志与文件. 官网: https://www.elastic.co/cn/beats/filebeat 2.本文实现的功能 3.事先必备: 至少一台Kaf ...

  6. PHP is_int() 、is_integer()、is_long() 函数

    is_int() 函数用于检测变量是否是整数.高佣联盟 www.cgewang.com 注意: 若想测试一个变量是否是数字或数字字符串(如表单输入,它们通常为字符串),必须使用 is_numeric( ...

  7. JWT到底是个什么鬼?

    前面一篇我们了解了微服务安全认证架构是如何演进而来的,但是发现v2.5架构仍然较重,有没有轻量级一点的方法呢?其实业界早已有了实践,它就是基于JWT的安全认证架构.JWT到底是个什么鬼呢?本篇为你解答 ...

  8. layui 父页面获取弹窗传递的值 和 父页面传值给子弹窗的方法

    1.父页面获取子页面(弹窗)的值: 现在父页面页面加载方法中定义方法,专门用来获取从子页面的值 $(document).ready(function() { //拿到子窗口中传回的数据 functio ...

  9. JDK下载和安装教程,超详细

    下载并安装JDK JDK的全称是JavaSE Development Kit,即java开发工具包,是sun公司提供的一套用于开发java应用程序的开发包,它提供了编译.运行java程序所需的各种工具 ...

  10. Android Spinner的简单用法。

    今天学到的是spinner,就是下拉列表,这可不是ExpandListView哈. 闲话不解释.这是控件,所以先上布局:就不上线性布局了,基本上可以总结出,控件都得在布局里写,写之前嵌个布局就行. & ...