The road is hindered and long, and the line is coming. Keep your head down and work hard, if you don't talk, you will be a blockbuster! Come on, Sao Nian! ! !
1 Preface & Basic Introduction
Previously, I used Markdown to write blogs directly on the web, and I could copy and paste directly. But now that I found Typora such a good Markdown editor, I want to blog locally and upload it to GitHub for backup.
But when you write a local blog, you have to insert pictures, right? But when I insert an image and upload it to GitHub, what should I do if the image does not display? This problem has bothered me for several days, and I finally got it done today. I must write a blog to record it!
1.1 Overall plan
The overall use is: GitHub + Typora + PicGo to achieve.
1.2 Reference URL
When implementing the functions I want, I refer to several useful blogs, but their articles are not exactly the same as the solutions I want, so I refer to their articles and summarize my own experience.
1. An article equivalent to enlightenment: the process of building a markdown editor typora and the image bed
2. This uses Gitee: windows local markdown environment configuration: use typora, and realize the picture is automatically inserted and uploaded to the bed
3. This is the link in the second article, for pit pits: teach you how to use Typora to automatically upload to picgo bed [tutorial and pits]
1.3 Software download address
-
Typora official website: Typora
-
If you cannot go to the official website, you can directly use the domestic software manager, and then upgrade to the latest version in the software. For example, the Tencent Computer Manager -> Software Manager I use:
-
PicGo Blue Music Cloud download address: PicGo-Setup-2.2.2.exe
-
PicGo's address on GitHub: GitHub-PicGo
-
node.js plug-in download address: node.js download
-
If you don’t have a GitHub account, you need to register an account first~
Do the preparations above and start the configuration steps below~
2 GitHub
2.1 Create a picture library
Create a library on your own GitHub, as a picture bed, dedicated to storing pictures. The specific operation process is the same as that of building a warehouse.
Since GitHub does not allow empty repositories or folders, you can check to create a ReadMe file by default
2.2 Get token
GitHub's token is actually a token. It feels like a public key to the outside world of GitHub, allowing software with this token to access GitHub's API interface.
For the generation process, refer to experience, the general steps are as follows:
- Click on your GitHub avatar
- Settings
- Developer settings
- Personal access tokens
- Generate new token
As shown in the figure below, note that all the options below are checked. (The details are not clear, it is probably to give some permissions to the software that uses this token)
At this time, you can save it for later use, or you can generate the token according to the above steps when you use it below.Note that the token is private and needs to be secured!
3 Local configuration steps
3.1 Installation and Configuration PicGo
For win10 computer, you can install the downloaded EXE file directly, and the whole installation step is next.
The software interface after installation is as follows:
-
Next, configure GitHub as the image bed, find the image bed settings on the left , and find the GitHub image bed .
-
The items with an asterisk in front are required. Fill in the warehouse name created before in turn. Note that:Account name/warehouse name；
-
Then fill in the set branch name (if no other branches are created when the warehouse is created, the default is the master branch);
-
Finally, fill in the previously generated token, and click OK.
-
Then find PicGo set to open inside the timestamp rename , to avoid drawing the wrong bed when uploading a file, the file name is the same result.
-
Then the rest of the configuration items can be ignored. The referenced article does not recommend setting it to self-start after booting, because after typora is configured, typora will automatically open the PicGo software when uploading pictures.
3.2 Install and configure node.js
I don't know exactly what this is, but for what I don't know, let's step on the footsteps of the predecessors, and I will have time to learn more later.
The entire installation process is also very simple, all the way to next, all use the default configuration.
3.3 Test PicGo
At this step, you can open the software and drag it directly to the home page upload area to test whether the upload is successful; or directly use the screenshot, and then click on the lower right cornerClipboard image upload, You can quickly upload.
After actual verification, there are some understandings:
- When uploading, if the progress bar appears red in half, it means the upload failed;
- When uploading, if the progress bar is always blue, the upload should be successful;
- Under
PicGo设置this option, you can find the corresponding log file, view related error information, and help us troubleshoot the problem.
3.3 Installation and Configuration Typora
Typora installation tutorial, it should be possible to next all the way. . . I installed the software that I used directly at the time, and then updated to the latest version in the software.
After installation, you can perform a simple configuration, click on the file, and then select preferences.
3.3.1 General
On this page, checkAuto save, It is very helpful for writing files.
3.3.2 Appearance
My own settings are as follows:
3.3.3 Editor
Refer to the figure below for my own configuration:
3.3.4 Image
This is our focus this time, follow the configuration in turn
When the configuration is complete, you can clickVerify image upload options, Perform a test to see if the configured PicGo plug-in is useful. The following interface will appear at this time. Since GitHub is used, it is easily affected by internet speed
After the upload is successful, the interface is as follows:
The above process is prone to errors. For details, please refer to the blog referenced at the beginning of the article.File name already existsThis error, if you checked the option to open the timestamp before, there should not be this error here.
In this test, I just started to use the home WiFi to upload the test, but an error was reported. So I used my mobile phone hotspot to test the upload, and soon I saw ok. The pictures in this blog were also uploaded using the mobile phone hotspot. I don't know why WiFi fails.
There is another error: Failed to fetch. This error refers to the experience of the article. It is usually caused by a wrong port setting. At this time, you need to open the PicGo setting and click Set up Server, The listening port number at this time needs to be consistent with the port number in Typora, and generally the default is 36677, Just need to check whether it has been tampered and so on.
3.3.5 Markdown
Special note: All the configurations under this option need to restart Typora to take effect after modification.
My own configuration is as follows, for reference only
At this point, all the configurations of Typora software have been completed. Have you found out that we have realized our initial plan without knowing it, using Typora to write, and then using GitHub + PicGo to make our own picture bed, so that subsequent articles are moving At that time, you are not afraid of losing pictures!
4 pit record
Here is a summary of some pits I encountered in the process of use, and record them.
4.1 GitHub successfully uploaded the picture, but it cannot be displayed normally
This seems to be due to the problem of hosts file parsing. During the use, I refer to this URL: Solve the problem of not displaying github images . After configuration, GitHub can display the images normally. Very good, favorite articles.
Special reminder: Before modifying the hosts file, remember to back it up! Backup! Backup! ! ! Avoid some unknown reasons, it will be difficult to recover at that time.
4.2 Both devices must be configured with the same environment, can the token be the same?
In fact, when I configured it myself, I was also very compelled. Because I configured a computer before and generated a token, then when the second computer wanted to use the previous token again, I found that I couldn’t find it. This inference: The token given by GitHub should be one for a device , and then I regenerated a token for the second computer.
5 Summary
- The whole configuration process was quite bumpy. Initially, it was configured on the laptop at home. However, the Internet access to GitHub at home was very slow, which caused the timeout to always occur. However, after trying to use the mobile hotspot, it was OK.
- One step at a time, Go! Go! Go!