VScode+PicGo+Github+jsdelivr使用图床书写Markdown
2020-08-19 22:19
1466 查看
本文讲述使用Github作为图床,VScode搭配Picgo插件书写Markdown,并使用jsdelivr进行CDN加速的配置流程。
准备阶段
首先进行以下准备工作,都很简单,不再赘述。
- 注册Github账号
- 安装VScode
- 为VScode安装Picgo插件
配置github
创建仓库
- 登陆github,点击右上角加号,选择“New repository”创建新仓库
- 设置仓库属性,具体如下图所示。值得注意的是,仓库可见性必须设为public,否则无法使用仓库作为图床。
获取token
生成一个Token用于操作GitHub repository。
- 点击头像,选择“setting”
- 进入页面后,依次点击“Developer settings-Personal access tokens”,然后点击“Generate new token”按钮,获取一个新的token。
- 点击后,在新出现的页面“Note”选项中键入token的名称,然后勾选下方repo权限后,点击页面最下方“Generate token”按钮
- 创建成功后,会生成一串token,这串token之后不会再显示,所以最好将其记录下来。
配置Picgo插件
打开VScode,找到Picgo插件,在插件上“右击-扩展设置”,往下拉,在设置中找到以下属性并修改:
- "Current":当前使用图床,修改为
github
- “Github: Repo”:github仓库,设置为
用户名/仓库名
,如geoli91/ImageHosting
- “Github: Path”:图片需要存放的文件夹,即图片存放路径为
用户名/仓库/path/图片名.png
。可选,如果有需要可以设置,如img/
- “Github: Custom Url”:自定义域名,可以通过设置该项使用CDN加速,如使用jsdelivr加速这可设置为
https://cdn.jsdelivr.net/gh/geoli91/ImageHosting
,其中结尾为用户名/仓库名
。如果不使用CDN加速,则无需修改。 - “Github: Branch”:分支名,如果仓库只有默认的一个分支,则直接填
master
即可 - “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快捷键
- ctrl+alt+u:从剪贴板插入图片
- ctrl+alt+e:手动选择要插入的图片
OK,打完收工,开始享用吧
本文参考:
相关文章推荐
- 使用PicGo+github+jsdelivr作为图床
- Typora[MarkDown编辑器]+(PicGo+Github+JsDelivr)[个人图床] ,开启你的高效创作
- PicGo+jsdelivr+github打造私人图床
- GitHub+PicGo构建免费图床及其高效使用
- 高雅的markdown与图床(Typora+PicGo+Github+阿里云OSS)
- GitHub+PicGo图床管理配置,让Markdown插入图片更丝滑
- Typora+PicGo+Github+Jsdelivr实现高效图文写作
- Typora+colordrop+PicGo+GitHub图床,让Markdown飞(一)
- PicGo-GitHub图床,让Markdown飞
- vscode从听说到使用,vetur,prettier,htmljscssPrettify踩坑指南。
- windows Go 1.13 Modules 简单使用到 VScode编辑器安装go代码辅助插件
- 关于使用阿里OSS服务搭建图床和使用PicGO上传图片到图床
- 快速使用 VSCode 编搭建 MarkDown 编辑环境
- PicGo+GitHub:你的最佳免费图床选择!
- typora结合PicGo设置github图床
- 使用 VS Code 来编辑 markdown 文章
- 如何利用GitHub+PicGo打造专属私人图床
- PicGo-jsDelivr-GitHub搭建免费cdn图床
- PicGo + GitHub 搭建个人图床工具
- vs code终端中go命令不能使用解决方法