Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Time:2022-9-23

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Foreword:

​ When I was writing a blog, I wrote it directly on the blog website before, and then inserted pictures one by one. When I want to publish it on more than 2 blogs at the same time, there will be a problem of picture citation. On the Internet After looking for information for a long time, I found that you can use Picgo + Gitee + Typora to build a free gallery of markdown documents. It felt very feasible, so I tried it immediately. It is indeed feasible. The following is a personal practice record of this solution.

The following plan refers to the plan of the Great God on the Internet, not my original, and the content is based on my own practice records.

1. Required software

1. Picgo software (download from official website:https://github.com/Molunerfinn/PicGo

2. Register a Gitee (code cloud) account and build a map bed

3. Node.js local installation

4. Typora software

2. Use Gitee (code cloud) to build a map bed

1. Register a Gitee (code cloud) account, the official website address:https://gitee.com/

2. Create a new Gitee warehouse

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

3. Turn on the Gitee Pages service

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Gitee Pagesis a free static web hosting service, you can use GiteePagesHost static web pages such as blogs and project official websites. if you have usedGithub Pagesthen you’ll be up and running with Gitee in no time.PagesServe. Currently GiteePagesSupport Jekyll, Hugo, Hexo to compile static resources.

4. Generate To private key token

The steps are as shown in the picture, remember that you need to save the token after you generate it (where you copy it and keep it, you can use it in PicGo)

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Three, node.js installation

1. Download and install

(1). Official website address:

​ English:https://nodejs.org/en/

​ Chinese:http://nodejs.cn/

Windows7 needs to downgrade and install the historical version address:

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

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

(2). Installation

​ Just install it like other software. After Windows 7 is installed, it will automatically configure the environment variables. Others seem to need to be configured by yourself.

After the installation is complete, there is a need to verify.

After the installation is complete, you can verify

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

4. PicGo download and install configuration

1. Download and install

1. Official website (open source GitHub:https://github.com/Molunerfinn/PicGo
Download the corresponding installation file according to the operating system (GitHub official website)
(1). For Windows users, please download the latest version of the exe file.
(2). For macOS users, please download the latest version of the dmg file.
(3). For Linux users, please download the AppImage file.

One thing to note, the latest official version is2.3.0-beta.4, the name with “-beta.x” is the test version, it seems that it is not stable, it is recommended to download the stable version. This is on the GitHub project sitehttps://github.com/Molunerfinn/PicGo/releases/There are release notes above.

2. PicGo gitee plugin settings

(1), gitee plugin installation

As shown in the figure: Search for gitee in “Plugin Settings”, and you can find 2 plugins. According to the information on the Internet, both plugins can be used. The installation settings are basically the same. I installed gitee-uploader1.1.2.

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

(2), PicGo settings

After the installation is complete, set the map bed library to be displayed by the map bed:

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

(3), gitee plugin settings

gitee-uploader1.1.2 plugin settings, and gitee 2.0.3 settings are basically the same

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

repo: username/repository name

The easiest way is to open the gitee repository and look at the URL:https://gitee.com/abcd/bg-gys, then repo: abcd/bg-gys

path: the path where you want to store Zhaotong in the gitee repository, which is simply the folder path in the newly created gitee repository

Suppose: When the name of the gitee warehouse is: bg-gys, you create a new image folder below to store photos, then the path is: image

token: It is the private key of gitee, you can paste it directly into it.

branch: the branch name of the gitee repository, usually filled in by default

After getting here, it is basically completed. You can try to upload it in PicGo.

Five, Typora settings

Official website address:https://typora.io/

Download and install by yourself

Typora actually needs to be set up on an important point: set up to upload pictures using PicGo

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

After the setting is completed, when writing a markdown document with Typora, you can directly copy the image to the article and choose to upload. The address of the image after uploading is the address in the gitee image bed.

Six, pit (very important!!!)

1. About node.js

(1). Because I have not learned node.js, why do I need to install this step, because when PicGo installs the Gitee plug-in, if node.js is not installed in advance, the Gitee plug-in will always be “installing… .”, because it is just a tool and has not been studied in depth, if you can tell me clearly, thank you!

(2). Restart after installation is complete

(3). Windows system downloads files in .msi format (I don’t know if this is a pit, maybe it’s not for those who are familiar with node.js)

(4). The node.js version corresponding to the Windows operating system is required.

​ If the operating system is windows7, it cannot be installed14.16.0(The latest version of the official website), you need to downgrade and install 12 and below. I downloaded the 10.X version, and I can test it myself.

Because Windows 7 will report an error if the 14.X version is installed:

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

2. About Picgo

(1) Before installing PicGo, you must install node.js first, otherwise the gitee plug-in will never be installed, which is not mentioned in many blogs on the Internet

(2) The path and this value in the gitee plugin settings, you have to think about it first. If you keep changing it, the upload will fail. I don’t know if it’s a PicGo bug or my operation problem. I have appeared many times ( Because I frequently change the address of the warehouse), it is very annoying.

4. About Typora (very important!!)

(1), the blog website cannot parse the picture

This is the most pitiful point. I haven’t found any information on the Internet to explain this. I don’t know if it’s my problem or no one else has encountered it:

​ When recording in Typora, copy the picture to the article, and the address after uploading is the address of the gitee image bed. You can directly copy it to online blogs, Weibo, etc., but I found it when copying to the blog, copy it in I couldn’t parse the picture, and after researching for a long time, I found that my gitee is fine, and the pictures inside can be accessed normally, but when I saw that I directly opened the URL of the picture I uploaded on gitee, I was not calm:
The URL is as follows:

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

However, the image address I saw in the Typora article is:

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

The folder path under the master branch: image / 202103/, there are 2 more spaces in the middle, when the browser accesses it, the spaces will be parsed directly: %20
So this is the reason why the pictures cannot be parsed when I copy the blog I wrote into the blog website.
Solution:
I still write articles on Typora normally, but after writing, I deal with it like this:
Replace /image/202103/ directly with /image%20/%20202103/

It still feels very troublesome, but I can’t find any other solution for the time being. I hope the passing gods can give some pointers.

(2), Typora upload failed

If some settings of PicGo have been changed, the listening port of the server will change. At this time, it is necessary to check whether the listening port number of PicGo server is the same as that of Typora. In the process of my own tossing, this is the reason why the upload fails.

Check out the Typora port:

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

PicGo port number view:

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

Picgo + Gitee + Typora (automatic upload) to build markdown free gallery

5. The naming of pictures leads to five methods of blog analysis of picture URLs

My habit is to save the screenshots of my notes and articles. The naming rules are as follows:

Date + serial number + according to the title of this article + the content of the picture + …

After building this set of free image beds, I found out during use, because your images need to be uploaded to Gitee, and the address quoted in the article summary is the address on Gitee, so pay attention to the following issues when naming images:

​ (1) “Chinese characters” should not appear in the picture name, and English or Pinyin should be used for the measurement.

​ (2), do not appear special symbols, currently I will use “-“, there is no problem with this temporarily, but when using “()”, there will be some blogs that cannot be quoted above

I found these 2 points for the time being. If you have other questions, thank you very much for leaving me a message.

7. References and references

1. I am not familiar with node.js. The article “3. Node.js installation” refers to this blogger’s article:

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

2. For some settings of Typora+PicGo, refer to this blogger’s article:

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’s help documentation:https://gitee.com/help/articles/4136/

When writing this article, there may be a small number of references to other materials, but I can’t find the source of the original text when I organize it. If the author of the original text sees it, please contact me in time, and I will add the source to the article. Thanks!


Disclaimer:

Some of the content used in this article comes from the Internet. If there is any infringement, please contact the blogger to delete it.

Reprint statement:

Writing a blog is not easy, please respect the original author! !
Welcome to read and reprint, if it is **full text reprint**, please indicate the original address and author** at the beginning or end of the article, if it is a **large paragraph reference**, please **remark reference link** .