How do I write a blog—Typora+jsDelivr+Picgo+TinyPNG realizes image compression and watermarking and global CDN access acceleration
1 Introduction
It has been a long time since I first blogged and used halo blog. After a recent period of filing, the server has moved from Alibaba Cloud Hong Kong to Tencent Cloud Guangzhou. It uses a lightweight application server with a 1 core 2G5M40G version. It has 1000G traffic per month. After the CDN of the cloud is set, the traffic is completely enough. Yes, the access speed is also very fast.
It’s just that the problem of often quoting pictures in blogs is troublesome. If you use Tencent Cloud COS, you need to pay traffic fees in addition to storage fees. If the amount of pictures is large, it will be an annoying thing to be brushed . The traffic provided by Paiyun is only 15G a month, and the traffic is not enough!
It seems that there is only one way left to build a picture bed. If you want to access fast + custom domain names, then South Korea, Hong Kong, Singapore, and Taiwan are all available. All countries need fast access. So many lines of BGP servers are essential. The domestic lines are very complicated and there are various routes. Then the optional CN2 line is the price, but it is not economical.
At this time, the benefits of jsDelivr are here. We only need to host the pictures on GitHub, and the pictures and files (within 20M) after the hosting will be used in China's Wangsu CDN. The speed has been accelerated in all regions of the country, and the ones used for foreign visits are famous CloudFlare CDN, which realizes global access acceleration and terrible low latency.
| line | Fastest node | Slowest node | Average response |
|---|---|---|---|
| telecommunications | Jiangsu Changzhou Telecom 0.07s | Zhongshan City, Guangdong Telecom 5.58s | 0.58s |
| Unicom | Beijing Beijing Unicom 0.07s | Fuxin City, Liaoning Unicom 2.87s | 0.34s |
| mobile | Tianjin Tianjin Mobile 0.07s | Hegang City, Heilongjiang Mobile 8.85s | 0.68s |
| overseas | Outside the U.S. 0.22s | Outside Australia 1.08s | 0.53s |
| Education Network | Beijing Beijing Education Network 0.17s | Liaoning Shenyang Education Network 0.34s | 0.25s |
| Hong Kong | Hong Kong Hong Kong 0.05s | Hong Kong Hong Kong 0.19s | 0.12s |
| Taiwan | Taiwan Taiwan 0.09s | Taiwan Taiwan 0.18s | 0.14s |
| Macao | Macau Macau 0.12s | Macau Macau 0.12s | 0.12s |
Note: Don't abuse it, just recommend it to blogging children's shoes!
2. Blog writing tool architecture
As a big fan of markdown, I use Typora, which can be downloaded directly from the official website . Very comfortable to use, with Picgo and image plugins, you can directly insert pictures in markdown image format into your blog and enjoy the pleasure of automation!
Original steps required:
- Screenshot
- Put a blog watermark https://reid.run
- Upload to TinyPNG compression
- Get compressed picture
- Rename in time format
- Upload to GitHub repository
- Get the jsDelivr accelerated image address
Now with Typora, TinyPNG API, Picgo, Picgo-plugin-compress (compression plug-in), Picgo-plugin-watermark (watermark plug-in), you only need to take screenshots and paste, you can just focus on the writing itself and don't need to consider these complicated things.
2.1 Recommended topics
There are many excellent themes in Typora, I recommend this theme I use typora-theme-orange-heart
3. Picgo and plugins
This is an excellent image upload tool, GitHub star 10K+. Many people have developed third-party libraries for it, including the Picgo-plugin-compress (compression plug-in) and Picgo-plugin-watermark (watermark plug-in) that we recommend this time.
Picgo ：PicGo
Picgo third-party plugin repository: Awesome-PicGo
Picgo-plugin-compress (compression plug-in): picgo-plugin-watermark
Picgo-plugin-watermark (watermark plug-in): picgo-plugin-compress
3.1 Picture bed settings
3.1.1 Create a new GitHub repo
3.1.2 Create token
On the homepage, select [Settings] -> [Developer settings] -> [Personal access tokens] -> [Generate new token]
Fill in the description, check [repo], and then click [Generate token] to generate a token.
Note that this token will only be displayed once, save it by yourself, otherwise you can only generate a new non-duplicate token again
3.2 Picgo settings
Fill in the information as shown in the figure to complete the uploading of the picture. You also need to configure the upload tool in Typora’s preferences asPicGo.app
After the configuration is completed, pasting the screenshot on Typora will directly call the rules, complete the image upload and return the accelerated image address in markdown format.
We can also manage the uploaded pictures separately in PicGo's album.
3.3 Watermark plugin
Picgo-plugin-watermark (watermark plug-in): picgo-plugin-compress
Directly search for the required plug-in name in [Plug-in Settings] watermarkand install it.
Note: Since some dependent packages are on GitHub, some "means" may be needed to install them normally.
This is my configuration information. The specific configuration information can be viewed from the plugin's GitHub.
3.4 Compression plugin
TinyPNG ： https: //tinypng.com
Picgo-plugin-compress (compression plug-in): picgo-plugin-watermark
Before configuring the compression plugin, we first need to apply for a TinyPNG compression API to compress the images we upload.
Free users are 500 images per month, but Picgo-plugin-compress allows us to use multiple free account APIs to cheat .
Through the [LOGIN] in the upper right corner, enter the email address to complete the registration.
After the registration is complete, click [add API key] on the page to activate the API and record it. We need to fill in the compression plugin.
Open PicGo's plug-in settings, click the "screw" button, select [configure plugin-compress], select [tinypng], fill in the API key, and select OK.
4. Summary
Now that we have completed all the configuration, upload a picture, you will find that it has automatically compressed and added a blog watermark to us.
Check the effect through a moving picture:
For the follow-up update of the blog post, please follow my personal blog: Stardust Blog