前言

个人非常喜欢用md来撰写博文,一般是在Jypyter notebook中连文字带代码的编辑好,然后下载其md文件,然后直接复制粘贴到博客中,非常方便。但如果要插入图片的话,本地图片无法直接被博客读取,虽然可以再一个一个图片的在博客编辑中上传,但图片数量巨大的情况下,这种繁琐单调的操作显然不是一个明知的方法,那有没有一种方法可以批量传到博客中呢?答案是肯定的,运用typora,PicGo,Github可以搭建一个自己的图床(https://baike.baidu.com/item/%E5%9B%BE%E5%BA%8A/10721348?fr=aladdin)工具,它确实非常方便,强大,但搭建过程坑也很多,下面就简要总结下搭建过程和遇到的各种坑。

搭建过程及遇到的坑

Typora

(1)下载:Typora是非常专业的轻量级md文本编辑器,在https://typora.io/#windows,按照电脑位数,下载所需要的版本:

PicGo

(1)下载:在下载好的Typora中点击“文件”-“偏好设置”-“图像”(如下图),直接点击下载PicGo即可

点击set-up.exe(如下图)即可。

Github

对于Github就不多做介绍了,需要说明的是最好设为公共仓库,然后取到一个token(该token只会在创建token时出现一次,需要妥善保管,后面将不再显示),然后在PicGo中进行如下设置。

重要设置

  • 在PicGo中,设定仓库名:用户名/仓库名,特别特别需要注意的是如果是从github创建代码仓时拷贝过来的名字,用户名与”/“之间,”/“与仓库名之间如果有空格,那么就会出错,显示”server端错误“!这点非常要注意,网上绝大数文章只指出来了用户名与”/“有空格会导致出错,没指出来也有后者的影响,我就是因为这个坑花费了非常久的时间才发现并解决的。
  • 指定存储路径:设置了这个后,在图片上传时,会自动在代码仓中创建同名的文件夹,并将图片上传至该文件夹下。
  • 设定自定义域名:也非常重要,主要是cdn加速,一般这样设置:https://cdn.jsdelivr.net/gh/用户名/仓库名

    建议设置为默认图床

另外,建议也进行如下设置:

此外还要检查下PicGo的server的监听地址和端口是否和Typora一致:

可见PicGo的端口是36677,在Typora中点击”验证图片上传选项“(如下图)

可见,一致!

插入图片

在撰写博文时,插入图片方式有很多,比如可直接复制图片过来,也可以右键选择插入图片,然后就会自动上传图片到github

显示成功!

点击开图片,可以看到图片的链接不再是本地链接。

如果出现上传不成功的,建议打开该文件的位置,看是否能查到,还要要保证路径正确,特别是对于相对路径的情况,最后文件名越简单越好,有时候”image-20200905103555183.png“这样的都会出错。

markdown 语法大全

https://www.zybuluo.com/codeep/note/163962

总结

通过这一系列操作,也可以简单的明白图床作用是什么。简单而言,在撰写博文时,文章中的本地图片是访问不到的,这时候需要将图片传到网络空间(比如github),然后文中图片引用存储在网络空间的位置,博客就可以访问到了。

Typora,PicGo,Github搭建个人图床的更多相关文章

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

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

  2. picGo+gitee搭建Obsidian图床,实现高效写作

    1 picGo安装 [picgo下载链接](https://molunerfinn.com/PicGo/) 选择安装目录,可以选择安装在D:\Program Files 然后点击安装即可 2. git ...

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

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

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

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

  5. Typora+PicGo+GitHub实现md自带图床效果

    1 GitHub创建作为图床的仓库 1.1 在GitHub中创建一个仓库 注意仓库要是public的,不然上传的图片还是无法使用的.如果不知道怎么创建仓库,可以百度一下. 1.2 在GitHub生成一 ...

  6. 教你如何使用github+jsDelivr搭建免费图床

    前言 之前写了一篇文章,教你如何使用Typora+PicGo实现图片自动上传到图床 . 这里我用的是七牛图床,七牛图床有一定的免费使用量(没记错的话应该是10个G),如果你的存储量超过这个大小就需要付 ...

  7. 使用Typora + 阿里云OSS + PicGo 打造自己的图床

    使用Typora + 阿里云OSS + PicGo 打造自己的图床 为什么要打造图床? 让笔记远走高飞 试问以下场景: 我们要把 markdown 笔记放到某博客上,直接进行复制即可.但因你的图片存储 ...

  8. Chevereto免费图床搭建教程 | vps搭建免费图床教程

    Chevereto免费图床搭建教程 | vps搭建免费图床教程 本文首发于:https://chens.life/How-to-build-a-free-image-bed.html 前言 自从有了个 ...

  9. 威联通(NAS)搭建个人图床

    名词解释: 图床:一般是指储存图片的服务器,有国内和国外之分.国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度.国内也分为单线空间.多线空间和cdn加速三种. 更详细的内容,请左转查看百 ...

  10. 使用Gitee搭建个人图床

    使用Gitee搭建个人图床 一.前言 搭建个人的图床可以更加方便地管理个人图片,虽然Github也可以实现个人图床的搭建,但是,Github毕竟是外网,访问速度慢且不稳定.因此采用Gitee来搭建图床 ...

随机推荐

  1. 给大模型添加联网功能的免费方案,以langchain为例

    langchain介绍 LangChain 是一个用于开发由大型语言模型 (LLM) 驱动的应用程序的框架. 简单来说,它可以帮助你更轻松地构建利用 LLM(例如 OpenAI 的 GPT 模型.Go ...

  2. 读论文-新闻推荐系统:近期进展、挑战与机遇的评述(News recommender system_ a review of recent progress, challenges, and opportunities)

    前言 今天读的论文为一篇于2022年发表在"人工智能评论"(Artificial Intelligence Review)的论文,文章主要强调了NRS面临的主要挑战,并从现有技术中 ...

  3. 08_使用python 内置 json 实现数据本地持久化

    使用python 内置 json 实现数据本地持久化 四个json函数 函数 json.load() 将本地json数据文件读取出来,并以列表形式返回从文件对象中读取 JSON 格式的字符串,并将其反 ...

  4. 【Verilog】表达式位宽与符号判断机制

    缘起于p1课下alu算数位移设计.查了好多资料,最后发现还是主要在翻译官方文档.浪费了超多时间啊,感觉还是没搞透,还是先以应用为导向放一放,且用且归纳 1.表达式位宽 expression bit l ...

  5. hexo 本地启动项目 hexo-browsersync 不工作原因总结

    问题 1 : hexo-server 开启 compress 压缩后 hexo-browsersync 插件热更新完全无效,没办法自动刷新 此问题表现在 hexo 任何版本 问题原因: hexo-se ...

  6. Oracle客户端中文显示问号乱码问题

    Oracle显示中文显示??乱码 问题如下图 解决方法 打开Oracle客户端,新建一个SQL Window 输入select userenv('language') from dual 复制搜索到的 ...

  7. 自行为一加6编译Postmarket os内核

    序 在为自己的一加6刷上PostmarketOS后突然某一天想使用它的照相机功能.原因是想到使用pmos拍照后笔者可以直接使用scp指令来传输手机相片到自己运行着GNU/Linux的电脑上,就感到相对 ...

  8. WebKit Inside: CSS 的匹配原理

    相关文章 WebKit Inside: CSS 样式表的解析 WebKit Inside: CSS 样式表的匹配时机 WebKit Inside: Acitvie 样式表 当WebView解析完所有外 ...

  9. Django实战项目-学习任务系统-查询列表分页显示

    接着上期代码框架,6个主要功能基本实现,剩下的就是细节点的完善优化了. 接着优化查询列表分页显示功能,有很多菜单功能都有查询列表显示页面情况,如果数据量多,不分页显示的话,页面展示效果就不太好. 本次 ...

  10. ESXi、PVE、unRaid对比

    目录 收起 [前言] [概述] [系统安装] [系统资源占用] [创建/编辑虚拟机] [硬盘直通] [PCI硬件直通] [显卡直通] [虚拟光驱] [自动开机.关机] [网络管理] [稳定性] [CP ...