VScode+PicGo+Github+jsdelivr使用图床书写Markdown
本文讲述使用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,打完收工,开始享用吧
23年更新,现在 jsdelivr 在墙内很多时候也连接不上了,导致图片无法显示。目前的思路是在坚果云内建立一个同步文件夹,本地 Markdown 所有的图片都存到该目录下。只要不同的设备都安装了坚果云,就能多端查看。发布博客时,博客园的 VS Code 插件提供了 提取图片
功能,可以在 VS Code 中打开 Markdown 文件,点击 右键-提取图片
,即可将所有的本地和网络图片上传到博客园并自动替换链接,通过该方式实现图片的公开访问。
感谢博客园,且用且珍惜。
本文参考:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步