Preface#
A few days ago, I discovered a major issue where the blog would load instantly, but the images would load slowly, bit by bit, taking up a lot of time, especially when there were multiple large-sized images in some articles. So, in order to solve this problem, I tried to post and find a good solution one of the posts.
Solution#
I also provided three solutions:
Write a program to automatically reduce the size of uploaded images in the Halo backend. This is the best solution I can think of.Use a built-in thumbnail feature of an image hosting service. However, it is more reassuring to have the resources stored on my own server. Unstable image hosting websites may cause image loss.Resize the photos before uploading. Unless there is a recommended batch processing software, it can be quite cumbersome.
However, all three of these solutions have certain problems. After continuous research, I found what could be the best solution.
Optimal Solution#
1. Cloud storage + image processing - Break through the bandwidth limitation and combine it with the built-in image processing feature.
2. Gzip - Optimize webpage loading speed.
3. CDN acceleration or full-site acceleration.
First Choice - Issues discovered during the process of trying Upyun#
Since many people initially configured Upyun storage because it offers free space and bandwidth, costing only a few dollars a year. But later, I couldn't configure it, so I didn't pay attention to it. One day, I suddenly realized that the problem was with the SSL certificate. The image display address needs to be resolved to my own domain name, but Halo will automatically bind the HTTPS webpage to the HTTPS attachment address based on the principle of "certificate synchronization". Therefore, if the blog uses HTTPS, the attachment address should also be HTTPS, otherwise it cannot be accessed.
In short, configuring cloud storage for the first time requires continuous trial and error. Let's get straight to the point.
Configuring Alibaba Cloud Object Storage Service (OSS) for Halo#
Based on the ridiculous logic of using the extended services of the server provider, I chose Alibaba Cloud's Object Storage Service (OSS).
Price Analysis#
Purchase object storage on Alibaba Cloud. According to the pricing, files below 5GB are free, but functions related to data transmission are chargeable. Although you can use it first and pay later, we have no problem with the experience because Alibaba Cloud supports a maximum of 10 yuan in arrears.
Halo Backend Attachment Configuration#
In the Halo backend, go to System - Blog Settings - Attachment Settings - Storage Location and change it to Alibaba Cloud. Other information will be filled in later.
Creating a Bucket#
Create a bucket in the Alibaba Cloud management console, with the storage type set to Standard Storage and the read and write permissions set to Public Read. Other settings do not affect it. Remember to enter the bucket name in the Halo backend.
Click on the created bucket name, go to the left sidebar Overview, and take note of the Endpoint (Region Node) and Bucket Domain Name under External Network Access. Enter these details in the Halo backend. Of course, you can also bind it to your own domain name, you can try it yourself, but pay attention to the HTTP and HTTPS protocols (that's how I stepped into the pit).
Creating an Access Subaccount#
Click on the personal icon in the upper right corner of the Alibaba Cloud interface and go to AccessKey Management, which can be understood as setting up a dedicated account to enable integration permissions.
Start using Subaccount - Create User, and make sure to check Programmatic Access.
After creating the user, you will get the AccessKey ID and AccessKey Secret, which should be entered in the Halo backend.
Go back to the OSS console, click on the created bucket name, go to Permission Management - Bucket Authorization Policy - Add Authorization - Subaccount, and select the newly created subuser. Make sure to select Full Control.
*Image Processing#
Image processing is a very important step. Nowadays, whether it's photos or screenshots, the file sizes are not small. In the case of slow broadband, it is necessary to compress the images appropriately to improve the loading speed.
In the OSS console, go to Data Processing - Image Processing - Create Style, and adjust it according to your needs.
After creating it, pay attention to the Image Processing Domain Name Rules above.
Domain/sample.jpg?x-oss-process=style/stylename
This corresponds to the Image Processing Strategy in Halo. Modify and fill it in.
It is important to note that image processing is done during the upload process, so changes to the image processing plan cannot be applied to existing processed images. Therefore, it is recommended to keep trying until you find the perfect solution before batch uploading.
Here is my recommended solution:
Other Recommended Cloud Storage Platforms#
I recommend the free cloud storage platform Upyun, and I have high hopes for their Upyun League activity. Simply add a link to the league in the footer of your website. However, Upyun does not support browsing attachments in the Halo backend.
Reference Articles#
Building an Image Hosting Service for a Blog
Practical Results of OSS Pricing
Halo & Upyun
Enabling Gzip on a Website