乐趣区

关于git:Picgo-Gitee-Typora自动上传搭建markdown免费图库

Picgo + Gitee +Typora(主动上传)搭建 markdown 收费图库

前言:

​ 在写博客的是时候,之前那都是间接在博客网站下面写好了,再一一插入图片,当要在同时 2 个以上的博客下面发表的时候就会呈现图片援用的问题,在网上找了一久的材料,发现了能够利用 Picgo + Gitee +Typora 搭建一个 markdown 文档的收费图库,感觉十分可行,于是立马尝试了一下,的确可行,以下是这个解决方案的集体实际记录。

以下计划参照了网上大神的计划,并非我原创,内容是依据本人实际下来的记录。

一、须要的软件

1、Picgo 软件(官网下载:https://github.com/Molunerfinn/PicGo)

2、注册 Gitee(码云)账号,搭建图床

3、node.js 本地装置

4、Typora 软件

二、应用 Gitee(码云)搭建图床

1. 注册 Gitee(码云)账号,官网地址:https://gitee.com/

2. 新建 Gitee 仓库

3. 开启 Gitee Pages 服务

Gitee Pages 是一个收费的动态网页托管服务,您能够应用 Gitee Pages 托管博客、我的项目官网等动态网页。如果您应用过 Github Pages 那么您会很快上手应用 Gitee 的 Pages服务。目前 Gitee Pages 反对 Jekyll、Hugo、Hexo 编译动态资源。

4. 生成 To 私钥令牌

步骤依照图片所示进行操作即可,记住生成 token 当前须要保留下来(复制到哪里留着,PicGo 外面用失去)

三、node.js 装置

1、下载安装

(1). 官网地址:

​ 英文:https://nodejs.org/en/

​ 中文:http://nodejs.cn/

Windows7 须要降级装置历史版本地址:

​ https://nodejs.org/en/about/releases/

​ https://nodejs.org/download/release/latest-v10.x/

(2). 装置

​ 像装其他软件一样装置即可,windows7 装置完了会主动配置环境变量,其余的如同须要本人配置。

装置实现之后有一部须要验证。

装置实现之后验证即可

四、PicGo 下载安装配置

1、下载安装

1. 官网(开源 GitHub:https://github.com/Molunerfinn/PicGo)
依据操作系统来下载对应的安装文件(GitHub 官网)
(1). Windows 用户请下载最新版本的 exe 文件。
(2). macOS 用户请下载最新版本的 dmg 文件。
(3). Linux 用户请下载 AppImage 文件。

有一点须要留神,目前最新的正式版是 2.3.0-beta.4,名字带“-beta.x”的是测试版本,貌似说是不太稳固,倡议就下载稳固版本的。这点在 GitHub 我的项目网站 https://github.com/Molunerfinn/PicGo/releases/ 上都有版本阐明。

2、PicGo gitee 插件设置

(1)、gitee 插件装置

如图所示:在“插件设置”中搜寻 gitee,能够搜出 2 个插件,依据网上的材料,2 个插件均能够应用,装置设置根本都差不多,我本人装置的是 gitee-uploader1.1.2

(2)、PicGo 设置

装置实现当前设置图床要要显示的图床库:

(3)、gitee 插件设置

gitee-uploader1.1.2 插件设置,另外 gitee 2.0.3 设置也基本一致

repo:用户名 / 仓库名

最简略的方法,关上 gitee 仓库后,看网址:https://gitee.com/abcd/bg-gys,那么 repo:abcd/bg-gys

path:gitee 仓库中你要存储昭通的门路,简略说就是你新建的 gitee 仓库的外面的文件夹门路

如果:当 gitee 仓库的名:bg-gys,你在上面新建了一个 image 的文件夹存储照片,那么 path 为:image

token:就是 gitee 的私人密钥,间接粘贴进去即可。

branch:gitee 仓库的分支名,个别会默认填写

到这里当前根本就实现 了能够在 PicGo 中尝试是否能够上传

五、Typora 设置

官网地址:https://typora.io/

自行下载安装即可

Typora 其实就一个重要的点须要设置:设置应用 PicGo 上传图片

设置实现当前,在用 Typora 写 markdown 文档的时候,间接复制图片到文章中即可抉择上传,上传当前的图片地址就是 gitee 图床中的地址

六、坑(很重要!!!)

1、对于 node.js 的

(1). 因并未学过 node.js,这一步为什么须要装置,是因为在 PicGo 装置 Gitee 插件的时候,如果是不提前装 node.js,Gitee 插件会始终处于 ” 装置中 …..”,因只是一个工具,并未深入研究,如果分明的大神能够通知我,谢谢!

(2). 装置实现当前要重启

(3). Windows 零碎下载.msi 格局的文件(这点不晓得算不算坑,可能对于相熟 node.js 的不算吧)

(4). Windows 操作系统对应的 node.js 版本有要求。

​ 如果操作系统是 windows7,是装不了14.16.0(目前官网最新版)的,须要降级装置 12 以及下。我是下载了 10.X 版本的,亲测能够。

因为 windows 7 如果是装置 14.X 版本会报错:

2、对于 Picgo 的

(1)、装置 PicGo 之前肯定要先装置 node.js,不然 gitee 的插件会始终装不上,网上很多博客外面都没提这一点

(2)、在 gitee 插件设置中的 path,这个值,你要先想好,如果始终改变,会呈现上传失败的状况,不晓得是 PicGo 的 bug 还是我的操作问题,我呈现了很屡次(因为我频繁改仓库的地址),挺烦的。

4、对于 Typora 的(很重要!!)

(1)、博客网站解析不了图片

这一点是最坑的,网上我就没找到过材料来阐明这一点,不晓得是我的问题还是其他人都没遇到过:

​ 在 Typora 记录的时候,复制图片到文章中,上传当前的地址就是 gitee 图床的地址,你能够间接复制到网上的博客、微博等等,然而我在复制到博客的时候发现,复制进去解析不了图片,钻研了大半天,发现我的 gitee 没问题,外面的图片也能失常拜访,然而当我看到我在 gitee 下面间接关上我上传的图片网址当前,不淡定了:
网址如下:

https://gitee.com/abcd/blogs-gallery/blob/master/image%20/%20202103/2020030701-06-01-BlogsGallery-Typora.png

然而我在 Typora 文章中看到的图片地址是:

https://gitee.com/abcd/blogs-gallery/blob/master/image / 202103/2020030701-06-01-BlogsGallery-Typora.png

在 master 分支上面的文件夹门路:image / 202103/,两头多了 2 个空格,浏览器拜访的时候会间接将空格解析:%20
所以这就是为什么我写好的博客,复制进去博客网站的时候图片解析不了的起因了
解决办法:
我还是失常的在 Typora 下面写文章,然而在写完当前,我是这样解决的:
将 /image / 202103/ 间接替换为 /image%20/%20202103/

感觉还是挺麻烦,然而临时也找不到其余的方法解决,心愿路过的大神予以指导一二。

(2)、Typora 上传失败

如果更改过 PicGo 的一些设置,server 的监听端口会扭转,此时要检车 PicGo 的 server 监听端口号跟 Typora 的端口号是否统一。我在本人折腾的过程中,都是这个起因导致上传失败的。

查看 Typora 端口:

PicGo 端口号查看:

5、图片的命名导致博客五法解析图片网址

我的习惯是会把本人记录笔记、文章的截图保留下来,命名规定是这样的:

日期 + 序号 + 依据这篇文章的题目 + 图片的内容 +……

在搭建完这套收费的图床当前,应用过程中发现的,因为你的图片要上传到 Gitee 下面,文章汇总援用的地址就是 Gitee 下面的地址,所以在图片命名上要留神以下问题:

​ (1)、图片名称中不要呈现“汉字”,经量用英文或者是拼音

​ (2)、不要呈现非凡的符号,目前我会用“-”, 这个临时没发现有什么问题,然而在用 ”()” 就会呈现一些博客下面援用不到

临时就发现了这 2 点,如果有其余的问题,非常感谢给我留言阐明。

七、参考援用阐明

1、对于 node.js,我本不相熟,文章“三、node.js 装置”是参考了这位博主的文章:

https://blog.csdn.net/adisonW/article/details/95475229/

2、对于 Typora+PicGo 的一些设置,参考了这位博主的文章:

https://blog.csdn.net/qq_40683225/article/details/105124810?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

3、Gitee 的帮忙文档:https://gitee.com/help/articles/4136/

在写此文的时候可能还有少部分是参考了其余材料,然而整顿的时候我曾经找不到原文出处了,如果原文作者看到,请及时分割我,我在文章中加上援用出处,谢谢!


免责申明:

 本文中应用的局部内容来自于网络,如有侵权, 请分割博主进行删除。

转载申明:

写博客不易,请尊重原作者!!欢送大家浏览、转载,如果是 ** 整文转载 ** 请在文章结尾或者结尾处 ** 注明 原文地址、作者 **,如果是 ** 大段参考 ** 请 ** 备注 参考链接 **。
退出移动版