Make your Pictures a Home – Typora free graphics bed for quick configuration based on PicGO and Gitee

Tags: Markdown, Typora, Chart bed

Background knowledge

What is a chart bed?

Where do you store web images? That’s a good question. On the web, from headlines to personal blogs, images are commonplace. So where are the images stored on web pages, especially personal blogs? Is it all on the web service provider’s server? Not quite, some of it isn’t, but it has to be somewhere with a web address that the Internet can access, and certainly not the hard drive of a personal laptop.

My life first blog is stored in the first picture the CSDN on the server, visit https://img-blog.csdn.net/20180921111615848?.

All the pictures of this blog are stored in gSF9588PIC, a personal image repository of Gitee. This blog post on the top of the image of the access address is https://gitee.com/gsf9588/gsf9588pic/raw/master/img/coder.jpeg.

Can store Jpeg, GIF and other various formats of picture files, for picture files to provide external chain address and access to the storage space, we call it the map bed. For this post, I’m using the personal repository on Gitee as a bed for storing images that I’ve added to the post. There are many forms of graph bed, the common ones are the use of sm.MS and other specialized graph bed websites, the use of Weibo, Gitee personal space as a graph bed, or rent ali cloud space as a graph bed, etc. Some even build their own servers or rent cloud servers.

Why did Typora want a bed?

Markdown allows writers to focus on their content, and Typora is the most elegant Markdown offline editor I’ve seen.

If you are not using a graph bed, you can enter images in the Typora editor, but the address of the image is the local path of the image. For example, enter the Markdown code for the image at the top of this blog.

! [I am coder](D:\ download \FirefoxDownload\coder.jpeg)Copy the code

The url of this link cannot be accessed by the browser and the image cannot be displayed.

CSDN and some other blog sites directly upload the pictures in the blog posts to their own servers according to the access address in the code, but the address in the above code is inaccessible to CSDN, so the picture transfer fails, and the effect is as follows.

[Img-ezszauuk-1616033548823] (D:\ download \FirefoxDownload\coder.jpeg) [ezszauuk-1616033548823]

After using the graph bed, input the picture in Typora editor, Typora will automatically upload the picture to the specified graph bed, and set the picture opening address as the external link address of the picture.

In order to use Typora to write blog posts offline and publish to multiple blogging sites, and to have a permanent home for your pictures, you need to set up a picture bed for Typora.

Why PicGO and Gitee?

PicGO is the only graphical interface upload service tool that Typora can set. Other tools are command line tools, as shown in the figure below. So Typora had to use PicGO for the upload service. Who else uses a command line tool now?

There are lots of picture beds. If using your own server is the best, but the cost is high; Rent Ali cloud, seven niuyun and other big cloud service providers to provide cloud space storage picture is also very stable, fast, but if you forget to renew the lease, the chain will fail, the picture will be split; There are a lot of special graph bed services, are recommended sm.MS, aggregation graph bed, small base graph bed, etc., but these graph bed is not the server in foreign countries is too small, there are all kinds of unsatisfactory, use them to store pictures, not sure which day the picture on the blog is like the following appearance.

Figure bed, server in the domestic, big, free, fast loading, I want all. Is there a drawing bed like this? Indeed, gitee’s personal code repository, the domestic alternative to Github, can be a great home for your images. The Twitter bed is also said to be stable, but it’s difficult to set up, and PicGO doesn’t have a plugin for it yet. Map bed, I’m going to code cloud.

Gitee image repository configuration

Log in to gitee personal account

Go to the Gitee home page and log in with your personal account, go to the Gitee Workbench page, or apply for a Gitee account if you don’t already have one.

Create a Gitee image repository

Move the mouse over the icon in the upper right corner of the Gitee workbench pageLocation, popup menu, click “New warehouse” item on the menu, that is, enter the page of new warehouse to create picture warehouse.

In the new warehouse page, 1, fill in the name of the warehouse, 2, fill in the path, 3, “open source” select “open”, 4, select “initialize this warehouse with Readme file”, 5, click “create”, gitee picture warehouse is created.

Get a Gitee private token

On the Workbench page, click to the right of your avatarIcon enter the Settings page to set, click “private token” to enter the private token Settings page, click the iconThe new token generation page is displayed.

On the Generate Private token page, fill in the private token description and submit it. A new private token is generated, that is, the long string of numbers and lowercase letters shown in the picture below. If you already have a private token, use an existing one.

Copy the generated private token and save it in notepad or screenshot for later use. Since in the future, the clear text of the private token is not visible on the platform, so it is very troublesome to lose the private token, I do not know if I can find it again, at least I can not.

Upload service tool PicGO configuration

Download and install Node.js

You need to install Node.js to install PicGO’s Gitee graph bed plug-in. Select the latest version to download Node.js and install it, using all the default options.

Download and install PicGO

Choose the version suitable for your platform to download PicGO and install it, picgo-setup-2.3.0-beta.4. exe is installed in the example, also choose the default options when installing.

Install the Gitee chart bed plug-in

Open PicGO and enter the “Plug-in Settings” TAB. Enter Gitee in the search bar and you will find multiple Gitee plug-ins. For example, select Gitee 2.0.3 and click “Install”, and select Gitee – Uploader 1.1.2 is also ok. “Gitee Map bed” was added to the map bed displayed in “PicGO Settings” after installation.

Set the PicGO

Enter the “PicGO Settings” TAB, select “Gitee Beds” in the “Select beds displayed” check box, other beds as default, then “Gitee Beds” will appear under “Beds Settings”.

To publish a Markdown document on the blog CSDN, set the Timestamp rename TAB to On. “Time Stamp Rename” is set to “on”, no matter what the original file name of the image file is, whether there are parentheses or not, it will be renamed according to the upload time. If the same image is uploaded for many times, there will be multiple identical images with different names in the picture bed. “Timestamp Renaming” is set to “off”. The name of the image file remains unchanged after uploading to the image bed, and only one image with the same file name is uploaded to the image bed for several times.

Set up the Gitee chart bed

Enter the “Map bed Settings” TAB, 1, select “Gitee map bed”, 2, enter the Gitee user name, 3, enter the image warehouse name, 4, path default, you can also according to their own ideas, 5, one by one to enter the Gitee private token character, can not copy paste, 6, set as the default map bed and confirm.

The upload services PicGo and Gitee are now set up and ready to upload images. Try it in the upload section.

Configure the Typora image uploading service

The Preferences page is displayed

In the “File” menu bar of Typora, click the “Preference Settings” item, that is, open the “preference Settings” page.

Set up picture upload service

On the “Preference Settings” page, 1, select “Image” option, 2, select “Upload picture”, 3, select “apply the above rules to the local location of the picture”, 4, select “PicGo(app)” as the upload service tool, 5, select the PicGo installation path, 6, the Settings have been completed, verify the image upload effect.

Typora graph bed application

Upload service tools PicGO and Gitee map bed have been set up, upload service of Typora has been configured, You can insert a picture in Typora’s Markdown document, the picture can be automatically uploaded to gitee map bed and input the external link address of the picture in GITee in the document as the picture opening address.

The easiest way to do this is to drag and drop images directly to the desired location of the document. You can also open the “Insert” item in the right menu to insert a picture.

Follow-up matters

Gitee’s convention for image file sizes

Due to Gitee, accessing files larger than 1M in the repository requires a login, as shown below.

To prevent web pages from loading image files uploaded to the map bed, do not include images larger than 1M in Markdown documents edited by Typora.

Video to GIF application problem

Typora’s Markdown file could not be added to the video. To illustrate the point, some clever writers turn videos into GIFs and add them to their documentation. However, the size of such GIF files often exceeds 1M. After uploading to Gitee, the web page cannot access the image and display it correctly. Therefore, such GIF files need to be checked for size.

CSDN failed to save the picture file name. Procedure

CSDN post cannot be archived images like this address https://gitee.com/gsf9588/gsf9588pic/raw/master/img/20210317141844 (1). As JPG file name in parentheses (). This requires us to set the “timestamp renaming” item of PicGO to “on” as far as possible, otherwise the document edited on Typora cannot add the picture with parentheses () in the file name, or the picture published to CSDN will not be displayed correctly.

Segmentfault External link picture file name problem

Blog site SegmentFault’s Markdown syntax does not allow parentheses to be attached to external links. This also requires us to set the “timestamp renaming” item of PicGO as far as possible to “on”, otherwise the document edited on Typora cannot add a picture with parentheses () in the file name, or the picture published on the segmentFault will not display correctly.

So far, we have configured a free picture bed for Typora based on PicGO and Gitee to make the picture a home. Let’s immerse ourselves in Typora’s elegant Markdown editor to showcase our knowledge and share our joy.

Enjoy yourself !