目录:

1. 为什么使用vscode+gitee+picgo实现完美图床

为什么要选择VSCode+PicGo+Gitee

主要是平时写文章的平台,要么是收会员费用,要么是本站图片链接只能在本站网站访问,换一个平台,图片就裂了,图片问题困扰我很久,也是经过很多试用,最终选定这个工具组合,之前图片仓库使用的是Github,但是在国内,Github的访问速度简直感人!所以后来就把Github替换成了Gitee,Gitee在国内,访问速度快多了,之前的写文章使用的是Typora,但是现在收费了,就改用VSCode。

2. 安装VSCode

2.1 安装VSCode软件及相关插件

  1. 进入VSCode软件官网:https://code.visualstudio.com,然后下载VSCode。

  2. VSCode安装后,下载中文插件并安装。

  3. 安装Markdown插件:
    1. Markdown All in On
    2. Markdown Preview Github Styling
    3. Markdown PDF
    1. 安装PicGo插件

3. 安装picgo

  1. 进入PicGo官网: PicGo官网

  2. 点击免费下载按钮

  3. 找到一个正式版本, 比如现在最高的正式版是2.3.1, 找到这个版本的资源, 然后展开所有资源.



  4. 现在一般都是64位的系统, 可以下载这个软件.

  5. 下载好后, 打开软件安装, 点击下一步.

  6. 切换安装盘符和安装文件夹, 我这里是安装在 E:\PicGo, 换好后点击安装.

  7. 安装完成后, 点击完成打开PicGo

  8. 点击插件设置, 搜索gitee, 然后安装gitee-uploader 1.1.2

  9. 点击安装后发生错误, 主要是由于PicGo软件是基于node.js, 用electron-vue开发的客户端, 这里我要去node.js 官网下载安装一下.

  10. 打开node.js官网: node.js官网, 下载左边的正式版(LTS版本), 然后按着引导进行安装.



  11. 勾选我同意, 然后下一步

  12. 切换盘符, 我放在E:\nodejs,点击ok, 然后一直点击next







  13. 点击Install进行安装.

  14. 等待的时候会有个弹窗, 点击是

  15. 点击Finish, 到这nodo.js就安装完成了, 然后重启一下PicGo, 右下角右键重启PicGo

  16. 再回到插件设置, 搜索gitee, 然后安装gitee-uploader 1.1.2

  17. 安装中, 安装后会显示已完成

4. 准备Gitee图床

  1. 首先你要有一个Gitee账号, 没有的可以去官网创建一个. Gitee官网

  2. 登陆后点击右上角的 + 号, 新建一个仓库

  3. 设置仓库用户名, 比如我这里叫: pic_bed, 仓库设置为 开源 , 然后勾选初始化仓库, 模板文件设置为 ReadMe文件, 最后点击创建按钮.

  4. 出现这个页面就说明仓库创建成功了.

5. 配置相关设置

  1. 配置PicGo插件
  • repo:用户名/仓库名称,比如我自己的仓库yatok/picture-bed,找不到的可以直接复制仓库的url,复制浏览器的仓库地址,而不是页面左上角显示的,容易出现大小写问题

  • branch:分支,这里写上master

  • token:填入码云的私人令牌

  • path:路径,一般写上img,我默认没填

  • customPath:提交消息,这一项和下一项customURL都不用填。在提交到码云后,会显示提交消息,插件默认提交的是 Upload 图片名 by picGo - 时间

  1. 获取自己的token , 点击右上角找到设置点击
  • 点击私人令牌, 然后生成新令牌.
  • 选择和我相同的权限, 然后提交, 这里会验证一下账号密码(也就是登录密码).
  • 生成的私人令牌只会显示一次,一定要保存好, 如果丢失的话就需要重新生成.
  • 然后设置为默认图床后点击确定.
  • 测试一下是否有效, 截一张图, 按快捷键: Ctrl+shift+P, 右下角显示上传成功, 可以使用Ctrl+v 把图床的链接粘贴到Markdown文档.
  • 下面这张是获取网络图床显示的图片.
  • 去Gitee仓库看看上传的图片

尾声

  • 到此教程就结束了, 但是学习无止境, 祝大家在知识的海洋中勇往直前.
  • 转载: 请附上本文链接

vscode+gitee+picgo实现稳定图床的更多相关文章

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

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

  2. PicGo:搭建图床

    PicGo:搭建图床 PicGo 免费搭建个人图床工具PicGo: 支持Windows.MacOS 和 Linux 软件目前覆盖的图床有8个平台: SM.MS图床.腾讯云COS.GitHub图床.七牛 ...

  3. Typora + picgo + sm.ms 图床设置笔记

    Typora + picgo + sm.ms 图床设置笔记 编辑于2020-03-26 本文部分内容在作者教程的基础上进行了二次编辑,如有重复,纯属必然 在此感谢大佬们的无私付出与分享 之前 用了 g ...

  4. 使用gitee创建个人的图床

    使用gitee创建个人的图床 1.如果还没有gitee(码云)账号,可以注册一个,注册后登陆进入个人中心 2.点击新建仓库 3.进入创建页面 创建成功 5.在本地电脑创建一个文件夹,专门用来放置要上传 ...

  5. [超详细] [效能工具]Typora+PicGo+Github免费图床快速搭建,提升技术文档输出效率

    一.前言 在我们日常的学习和工作中,我们经常需要进行写作.尤其对于我们程序技术人员而言,工作中的技术方案文档或者接口文档等,都是经常需要用上的. 那么如果没有一个高效的工具,去帮助我们记录和创作,这将 ...

  6. PicGo+Typora+Github图床配置步骤(一键上传本地图片)

    PicGo+Typora+Github图床配置步骤(一键上传本地图片) 一.配置前的准备 首先你需要有一个Github账号[GitHub]. 然后下载PicGo图片上传工具[PicGo]和Typora ...

  7. PicGo + Gitee +Typora实现markdown图床

    目录 1. PicGo安装 2.Gitee配置 3.配置PicGo 3.Typora的设置 网上有一些很详细的教程,我这里只记录要点,其余部分按以下教程步骤来就行. 1. PicGo安装 国内下载可能 ...

  8. 免费稳定图床最佳实践:PicGo+GitHub+jsDeliver 极简教程

    一.下载 PicGo PicGo 是啥?顾名思义,它是一个快速上传图片并获取 图片 URL 链接的工具. 目前支持七牛.腾讯云.阿里云和 GitHub 等图床.该工具代码已在 GitHub 开源,读者 ...

  9. Typora使用教程 之 PicGo集成做图床

    目录 一.Typora是什么 二.研究它的原因 三.需要解决的问题 四.解决图床问题 1.下载PicGo 2.安装下载的PicGo,并根据下图所示配置(必须安装nodejs,否则插件一直是" ...

  10. 【教程】使用gitee搭建免费的图床

    前几天七牛云的免费图床测试域名回收,导致我上传的图片都不能访问!要配置自定义域名,域名还要绑定主机.没有云主机的我开始想你们搞一个免费的图床,并且数据也不会丢失呢 ? ​ 想到之前自己在GitHub上 ...

随机推荐

  1. EXPLAIN分析pgsql的性能

    EXPLAIN分析pgsql的性能 前言 EXPLAIN命令 EXPLAIN -- 显示一个语句的执行计划 命令详解 EXPLAIN输出结果展示 analyze buffers 全表扫描 索引扫描 位 ...

  2. SqlSugar常见问题汇总

    1.已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭. There is already an open DataReader associated with this ...

  3. 遥感图像处理笔记之【Automatic Flood Detection from Satellite Images Using Deep Learning】

    遥感图像处理学习(7) 前言 遥感系列第7篇.遥感图像处理方向的学习者可以参考或者复刻 本文初编辑于2023年12月29日 2024年1月24日搬运至本人博客园平台 文章标题:Automatic Fl ...

  4. Json Schema高性能.net实现库 LateApexEarlySpeed.Json.Schema - 直接从code生成json schema validator

    LateApexEarlySpeed.Json.Schema - Json schema validator generation from code 除了用户手动传入标准的json schema来生 ...

  5. ARKit的理解与使用

    AR概述 AR的意义:让虚拟世界套与现实世界建立联系,并可以进行互动. AR的技术实现:通过实时地计算摄影机输出影像的位置及角度,并在内部通过算法识别将场景中的事物,然后在内部模拟的三维坐标系中给识别 ...

  6. abc339 详解

    第一篇整场题解纪念我第一次 AK 的 abc! A #include <iostream> using namespace std; int main(int argc, const ch ...

  7. 吉特日化MES 与周边系统集成架构

    作者:情缘   出处:http://www.cnblogs.com/qingyuan/ 关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路 版权声明:本文版权归作者和博客园 ...

  8. nginx做白名单和限流

    ​ 在我们生产环境中使用到了地图服务,每个月有免费请求次数,近一个月请求次数突然暴涨,导致直接开启付费模式,一个月上百刀的花销着实难扛,根据实际我们的业务使用情况,远达不到付费标准,故考虑做白名单和限 ...

  9. JS leetcode 反转字符串 题解分析

    壹 ❀ 引 今天做的一道题非常简单,原题来自leetcode第344题反转字符串,题目如下: 编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出. 不要给另外 ...

  10. 收集 VSCode 常用快捷键

    快速复制行 Shift + Alt + ↑/↓ 都是往下复制行,区别是:按↓复制时光标会跟着向下移动,按↑复制时光标不移动. 向上/向下移动一行 Alt + ↑/↓ 删除整行 Ctrl + Shift ...