Typora picture layout & personal picture bed Github + PicGo

Typora picture layout & personal picture bed Github + PicGo

1. Insert 1 image

Grammar one

![]()

() means path, both absolute path and relative path are acceptable, you can use network url; it can also be followed by a text, which is used to display the image when the mouse hovers over it

[] can also be used to enter text, and its functions are:

1) Alternative text that appears when the image cannot be displayed for some reason;

2) Used for SEO, it can facilitate search engines to search for pictures based on the keywords in Alt text (I don’t know what it is).

Example

!["For undisplayable text"](./imgs/Cat-01.jpg"Mouseover: kitten")

The effect is as follows

[Image bed settings] for image insertion in Markdown

Syntax 2 html tag format

<img src ="xxx/xxx/a.jpg" width="50%" title="Cat HTML">

src represents path, both absolute path and relative path are acceptable;

width represents the width ratio

title represents the title displayed when the mouse hovers

Example

<img src ="./imgs/Cat-02.jpg" width="50%" title="Cat HTML">

The effect is as follows

It is recommended to use syntax 2, HTML tag format

• It is recommended to use the format of HTML tags, which have many styles, are centered, and can be used to set titles;
• The image adjustment in Grammar 1 is very limited, and the size alone cannot be adjusted;
• The most important thing is syntax. When using online images, such as quoting images on github, there will be some problems. There is basically no problem when quoting locally. Sometimes when we upload the MD file to CSDN, the picture referenced by syntax 1 cannot be recognized on CSDN, and an error will be reported ———–>【External link The picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly]; but grammar 2 can read network pictures normally, so grammar 2 is recommended

The following images are all in the form of HTML tags

The way to display pictures in MarkDown can introduce HTML methods

2. Insert multiple pictures

Grammar

# Center display
<center class="half">
    <img src="http://xxx.jpg" width="300" title="Cat-01.jpg"/>
    <img src="http://yyy.jpg" width="300" title="Cat-02.jpg"/>
    <img src="http://zzz.jpg" width="300" title="Cat-03.jpg"/>
</center>

src: image path, width: width, title: title when the mouse hovers

class: optional, you can also set the value yourself, just write “nihao”

Example

<center class="half">
    <img src="./imgs/Cat-01.jpg" width="200" title="Cat-01.jpg"/>
    <img src="./imgs/Cat-02.jpg" width="200" title="Cat-02.jpg"/>
    <img src="./imgs/Cat-03.jpg" width="200" title="Cat-03.jpg"/>
</center>

The effect is as follows

3. Use your own image bed

When sharing your own markdown files on CSDN, the paths of the images are all local, which will definitely not work. Therefore, you need to upload local images as well, which is too troublesome. At the beginning, just put the images on the Internet, so When uploading markdown files, the image path does not need to be changed.

GitHub + PicGo

I originally wanted to use Gitee, but it seems that Gitee is no longer available.

3.1 Gitee creates a warehouse and generates a private token

Create a new warehouse

Set configuration

Create private token

Find Private Token

Click Generate New Token

Configure the token permission, for example, the description is “BlogsImg”, the permission can be selected as projects, user_info is checked by default, and then submit

Enter password to verify

Get the plaintext private key of Private Token, copy it and save it

Note: The plain text of the private key will only be displayed once, be sure to save it first

3.2 Github creates a warehouse and generates a private token

Create a new warehouse

Set the configuration. The warehouse is named ImageBed. Note that it must be set to public. You can add a README file.

Create private token

Click on the avatar in the upper right corner and find Settings

After entering, find Developer settings

Select Personal access tokens → Tokens(classic) → Generate new token → Generate new token(classic)

Click Generate New Token

Note Define it casually, such as imgs

Expiration is not sure, just default to 30 days.

It is enough to select the first repo for permissions, and then Generate token

Get the plaintext private key of the private token, copy it and save it

Note: The plaintext of the private key will only be displayed once, be sure to save it first

3.3 Install PicGo

PicGo download address

PicGo documentation

Find the version with latest, it is the latest stable version, beta may be unstable, here is the 2.3.1 version

Find Assets under this version and download the x64 version

Here is a version I downloaded

PicGo-Setup-2.3.1-x64.exe

After downloading, it is the exe file, which can be installed step by step. Here is my installation process for reference only;

Double-click the exe file to open the installer

It is best to reset the installation path yourself

Then just wait for the installation to complete

After the installation is complete, I usually remove the automatic operation, complete

3.4 Configuring PicGo

Open the installed PicGo

3.5 Install the gitee plug-in in PicGo

When using PicGo for the first time, there is generally no gitee option on the left side, so you need to install it yourself.

Sometimes when you open PicGo, you may see the New version upgrade window. What I show here is the beta test version, so I won’t upgrade it

In Plug-in Settings, enter gitee to search

When searching, I found that it couldn’t be found and kept spinning in circles. It is recommended to restart PicGo several times…

Here I installed gitee 2.0.5

An error is reported, indicating that there is no Node.js

Click Yes to jump directly to the nodejs official website homepage > nodejs

3.6 Install Node.js

Here select the version recommended by the official website 18.17.1

Attach the version I downloaded node-v18.17.1-x64.msi

After downloading, double-click to open

agree, next

It is recommended to modify the installation path. Here select D:\ProgramFiles\\
odejs\

By default, then next

Here I do not check, directly next

Click install to install

Wait for the installation to complete

The installation is complete

After my installation is complete, the system’s Path environment variable automatically configures Node, which is the path where Nodejs was just installed

win + R Enter cmd to enter the command line prompt, enter node –version , the version number appears, indicating that Nodejs is installed successfully

Refer to Node.js Installation and Configuration | Novice Tutorial

3.7 Configuring Gitee in PicGo

Note, here I still report an error when downloading, even if I restart PicGo, I keep playing this error

Restart the computer, then return to the installation interface of the gitee plug-in, click Install

After the installation is complete, click Image bed settings

Select gitee image bed and configure relevant information

• owner: gitee account name
• repo: warehouse name
• path: If you don’t fill it in, you can choose the root directory. Here I created a new MarkDown/01 image layout directory in the warehouse, and I created it casually
• token: the token key saved in step 3.2 > [3.2 Create Private Token] (#3.2 Create Private Token)
• message: can be left blank

Whether set as the default image bed depends on your own needs, here I will set as default first, so that you can directly upload it to the gitee warehouse in the upload area

Finally click OK

In the lower right corner of the taskbar, right-click PicGo → select the default image bed, and you can also modify it.

3.8 Configure Github in PicGo

Click Image bed settings

Select github image bed and configure relevant information

• Set warehouse name: RYW0203/ImageBed

• Set branch name: main Note that Github shows main

• 

• Set Token: the token key saved in step 3.2 > [3.2 Github create warehouse, generate private token](#3.2 Github create warehouse, generate private token)

• Set the storage path: you can leave it blank, the default is the root directory of the warehouse, here I wrote a path /Markdown/01 image layout/ (even if there is no such path in the warehouse, it will be created automatically)

• Set a custom domain name: https://cdn.jsdelivr.net/gh/RYW0203/ImageBed@main It is said that it can be accelerated, but it seems of no use

Whether set as the default image bed depends on your own needs, here I will set as default first, so that you can directly upload to the gitbub warehouse in the upload area

Finally click OK

In the lower right corner of the taskbar, right-click PicGo → select the default image bed, and you can also modify it.

Go back to the upload area of PicGo. Note that you are using Github. Try to upload a picture.

The lower right corner displays a prompt that the upload was successful

The uploaded image can be seen on Github

3.9 Configuring Typora

Go to Preferences

Select image→upload service and select PicGo(app)→PicGo path to find the installation path of PicGo [See 3.3 Installing PicGo](#3.3 Installing PicGo) → Finally, verify the image upload option;

Show success

The test images uploaded by Typora can be viewed on Github

After Typora and PicGo are successfully configured, select a picture in Typora. The path of the picture is the local path. Right-click the picture → Upload Picture

After uploading, you will find that the path of the image changes to Network path

Enter Github, you can see that the picture has been uploaded

Note that files with the same name can only be uploaded sequentially, multiple uploads will report an error, and the PicGo log will display “Request failed with status code 422”, and sometimes after uploading a picture successfully, the local picture path becomes github’s The network path, and then the image cannot be loaded, and image load failed is displayed. I don’t know why, but the upload is indeed successful on github. It is estimated that the github server is abroad, and the access is too slow, but after uploading this The image network path can be displayed when copied to CSDN. How many times can you try refreshing it? ? ? Reopening the Typora file seems to do the trick.

3.10 Remaining issues

1. Does setting the custom domain name take effect and accelerate the effect?

2. What will happen after 30 days of expiration? Today is 2023/08/22

3. What happens if it is not set to public or private? Can it be changed to private? How to change it?

3.11 Reference link

Typora + picgo + github image bed tutorial

PicGo + GitHub + Typora to build a personal picture bed tool

PicGo one-stop service: download, install, configure gitee, configure typora

Gitee (code cloud) implements free Markdown image bed

[Image bed settings] for image insertion in Markdown