When the path is long and obstructed, it will come. It never rains but it pours. Come on, SAO Nian!!
1 Introduction & basic introduction
I used to blog directly on the web page using Markdown, which can be copied and pasted. But now that Typora is such a great Markdown editor, I want to blog locally and upload it to GitHub for backup.
But you can’t blog locally without inserting images, can you? But what if I insert an image and upload it to GitHub but it doesn’t show up? 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 Websites
When I implemented the function I wanted, I referred to several useful blogs, but their articles were not exactly the same as the solution I wanted, so I referred to their articles and summarized my own experience.
1. An article equivalent to enlightenment: typora, a Markdown editor, and the construction process of the chart bed
2, This uses Gitee: Windows native Markdown environment configuration: use Typora, and realize the automatic insertion and upload of images to the map bed
3, this is the link from the second article, pit for: How to use Typora to automatically upload picgo bed.
1.3 Software Download Address
-
Typora official website: Typora
-
Go up those who cannot go up official website, can use domestic software housekeeper directly, upgrade inside software next newest version can. For example, I use Tencent computer housekeeper -> software housekeeper:
-
PicGo Blue Cloud download address: picgo-setup-22.2.exe
-
PicGo at GitHub: GitHub – PicGo
-
The node.js plugin can be downloaded from node.js
-
If you don’t have a GitHub account, you need to create one
Do the above preparatory work, below the configuration steps ~
2 GitHub
2.1 Creating an Image Library
Create a library on Your GitHub and use it as a map bed for storing images. The specific operation process is the same as that of building a warehouse.
Since GitHub does not allow empty repositories or folders, you can create a ReadMe file by default
2.2 Obtaining a token
GitHub’s token is actually a token that acts like a public key to GitHub and allows software that owns the token to access GitHub’s API.
The generation process can refer to experience, and the general steps are as follows:
- Click on your GitHub avatar
- Settings
- Developer settings
- Personal access tokens
- Generate new token
As shown below, note that all the options below are checked. Grant permissions to software that uses this token.
At this time, you can save the token for later use or generate the token according to the preceding steps. Note that tokens are private and need to be protected.
3 Local configuration procedure
3.1 Installing and Configuring PicGo
Win10 computer, direct installation download down EXE file can be, the whole installation steps all the way next.
The software interface after installation is as follows:
-
Next, configure GitHub as a bed, go to bed Settings on the left, and find GitHub bed.
-
The items with asterisks (asterisks) before them are mandatory. Fill in the warehouse names created before.
-
Then fill in the specified branch name (the default is the master branch if no other branches are created while creating the repository).
-
Finally fill in the previously generated token and click OK.
-
Then find the PicGo Settings, open the timestamp inside the rename, this can avoid map in the upload file, due to the same file name caused by the error.
-
The rest of the configuration items can be ignored. The reference article does not recommend setting it as self-boot, because after configuring Typora, Typora will automatically open PicGo software when uploading pictures.
3.2 Installing and Configuring Node.js
I don’t know what it is, but for what I don’t know, I’d better step on the footsteps of our predecessors and have time to learn more about it 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 point, you can open the software and drag it directly to the upload area on the home page to test whether the upload is successful. Or directly use the screenshot, and then click on the bottom right corner of the clipboard picture upload, you can quickly achieve upload.
After actual verification, there are some understandings:
- During the upload, if the progress bar appears red halfway, the upload fails.
- If the progress bar remains blue during the upload, the upload is successful.
- in
PicGo setUnder this option, you can find the corresponding log file and view related error information to help us troubleshoot problems.
3.3 Installing and Configuring Typora
Typora installation tutorial should also be available all the way to next… I used the software directly at that time to install the butler, and then updated to the latest version in the software.
Once installed, you can do a simple configuration by clicking On File and selecting preferences.
3.3.1 general
On this page, check automatic save, for writing files is very helpful.
3.3.2 rainfall distribution on 10-12 appearance
My own Settings are as follows:
3.3.3 editor
My own configuration is as follows:
3.3.4 image
This is our focus this time. Follow the configuration in turn according to the diagram
When the configuration is complete, you can click the Verify image upload option to test and see if the configured PicGo plug-in is useful. The following screen is displayed. You are using GitHub and may be affected by the network speed
After the upload is successful, the following interface is displayed:
The above process is prone to error. For details, please refer to the blog at the beginning of this article. The file name already has this error, if the open timestamp option was checked earlier, this error should not be present here.
In this test, I just used the WiFi at home to upload the test, but there was an error. So I used my mobile hotspot to test the upload and soon saw that it was OK. The pictures of this blog were also uploaded using the mobile hotspot. I am not sure why the WiFi failed.
One more mistake: At this time, you need to open the PicGo setting and click Set Server. At this time, the monitored port number needs to be consistent with the port number in Typora. Generally, the default is 36677. You just need to see if it’s been tampered with and so on.
3.3.5 Markdown
Note: All 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 configuration of Typora software has been completed. Have you noticed that, unconsciously, we have realized our initial plan, using Typora to write, and then using GitHub + PicGo to make their own graph bed, so that the subsequent article in the move, not afraid of the picture lost!
4 Pit discharge records
Here to summarize their use in the process, encountered some pits, record.
4.1 GitHub Uploaded the image successfully, but the image cannot be displayed properly
Github does not display images. After configuration, github can display pictures normally. It is very nice.
Special reminder: Before modifying the hosts file, be sure to remember to backup first! Backup! Backup!! Avoid some unknown cause, it will be difficult to recover.
4.2 Can the Token be the Same if the Same Environment needs to be Configured for both Devices?
As a matter of fact, I was also very confused when I configured one computer and generated a token. Then when THE second computer wanted to use the token again, I found that I could not find it. Therefore, I inferred that: The token given by GitHub should be one for each device, and then I regenerated a token for the second computer.
5 concludes
- The whole configuration process, or rather bumpy, at the beginning of the laptop configuration at home, but the home network access to GitHub, very slow, resulting in always timeout, but later tried to use the mobile hotspot, also OK.
- One step at a time, Go! Go! Go!