VScode+PicGo+Github+jsdelivr使用图床书写Markdown

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

准备阶段

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

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

配置github

创建仓库

  1. 登陆github,点击右上角加号,选择“New repository”创建新仓库
    20200819221212
  2. 设置仓库属性,具体如下图所示。值得注意的是,仓库可见性必须设为public,否则无法使用仓库作为图床。
    20200819221248

获取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之后不会再显示,所以最好将其记录下来。

20200819221635

20200819221517

配置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

原文链接:https://www.cnblogs.com/geoli91/p/13532284.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/7283

(0)
优速盾-小U的头像优速盾-小U
上一篇 2022年8月5日 07:03
下一篇 2022年8月5日 07:33

相关推荐

  • 表单

    l  用form元素表示表单 l  用action属性表示表单提交地址 l  用method属性表示表单的提交方式 注意:在制作静态页面时,可以不用书…

    行业资讯 2025年5月28日
    00355
  • 使用谷歌jquery库文件的理由

    最近看到,那些引用jquery的文件那些网站,好多是使用谷歌的库;前端开发 很是有必要啊。像这样的<script type=”text/javascript”src=”htt…

    行业资讯 2022年7月30日
    00907
  • kangle配置cdn_kangle穿刺及cdn回源配置

    ##1. kangle的先期使用配置## – 域名的配置 ![QQ浏览器截图20190906111946.png][1] 点击面板上面的服务器设置 找到 赠送域名那里 …

    行业资讯 2025年1月12日
    00371
  • 外贸网站如何使用免费的CDN加速

    网站打开速度对于一个外贸网站来说相当的重要,决定了你网站前期的流量流存,特别是做付费的时候,如果网站打开速度很慢,将会直接造成推广费用的浪费,以前的文章中讲过:外贸网站测试速度的方…

    2022年9月27日
    00882
  • |

    四川成都联想服务器代理商,联想Thinksystem SR670机架式服务器报价,成都联想服务器授权经销商成都佳诚伟业科技有限公司 成都南充联想服务器代理商 四川联想服务…

    行业资讯 2025年3月9日
    00414
  • 服务器动态上下线监听案例

    服务器动态上下线监听案例 需求 具体实现 测试 需求 某分布式系统中,主节点可以有多台,可以动态上下线,任意一台客户端都能实时感知到主节点…

    2022年9月4日
    001.1K
  • CDN原理

    cdn是什么 CDN是Content Delivery Network 即内容分发网络 优势 1. 根据上图的拓扑结构,用户可以就近取到所需内容,解决Internet网络拥堵状况,…

    2022年11月16日
    00988
  • 部署vue项目

    一、项目简介与技术栈 1、WebApp(H5项目) 技术栈:vue、vue-router、vuex、vant、sass、rem。 主要功能…

    行业资讯 2022年7月30日
    00828
  • hopeisagoodthing!

    好久没有写博客了,在这么特殊的日子里,似乎不写点东西感觉总是少了点什么。其实从昨天开始就在努力的回忆,回忆自己这个2014年都做了些什么?自己收获了些什么?突然就觉得去年的那个暑假…

    行业资讯 2025年8月28日
    00246
  • 自研CPU架构与品牌

    自研CPU架构与品牌      国产 CPU 厂商得到了相应指令集的架构授权,发展成为6大主流厂商:龙芯、飞腾、鲲鹏、海光、申威、兆芯。CPU 的指令…

    2025年10月20日
    00517

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml