Self-built blog address: https://www.bytelife.net, welcome to visit! This article is an auto-synced blog post. For a better reading experience, I suggest you visit my blog at 👇

The author:
Jeffrey


Link to this article:
https://www.bytelife.net/articles/52761.html


Copyright Notice: All articles in this blog are used unless otherwise stated
BY-NC-SALicense Agreement. Reprint please indicate the source!

Now more and more people use Hexo to build static sites, and many people will choose to try out GitHub Pages service to deploy their own static sites. However, the domestic access speed of GitHub Pages is really unacceptable. This paper introduces how to deploy Hexo sites with Ali Cloud OSS object storage service with one click. Resolve a hole in the browser cache at the same time.

Acceleration program

  • Netlify: It is very convenient to use with GitHub, but the domestic access speed is not good, so you need to use it with a domestic CDN
  • Vercel: Similar to Netlify, domestic access speed is good, and if the domain name is not registered, it is a good choice
  • Object storage: using Aliyun OSS or similar object storage service, domestic access speed is good, can also be used with domestic CDN, the best speed, but requires your domain name to have a record number
  • Domestic Object Storage + Overseas Vercel/Netlify: The solution I have adopted is probably the best one

Create a Bucket

The first thing to do is to go to Aliyun (https://aliyun.comCreate a Bucket:

  • Bucket name: Any name, as long as it is not repeated
  • Region: According to your needs, the domestic access speed of Ali Cloud nodes can be, if you do not plan to use CDN service, you can choose East China node, the national access speed can be taken into account. If you use a CDN service, it makes no difference. You can choose either one.
  • Storage type: the general choice of standard storage can be, of course, if the traffic is very small, choose low frequency access storage can also save a little money.
  • In-city redundant storage: No
  • Versioning: No
  • Read/write permission: it should be noted here that we choose public read, remember not to choose private, on the one hand, if you do not open the CDN, private permission can not be accessed in the public network. On the other hand, if CDN is turned on, Ali Cloud’s CDN private back-feed function conflicts with the static page function of OSS (don’t ask me how I know, they are all pits).
  • Server-side encryption: none
  • Live log query: depending on the demand, there are free 7 days of live log query, but there is a 900GB/ day limit
  • Timed Backup: Not enabled

Enable static pages

Go to the Bucket configuration page and select “Basic Settings – Static Pages” :



Configure as shown in the figure:

  • Default home page: index.html
  • Default 404 page: 404.html (use your actual 404 page address)
  • Subdirectory Home: Enable. Since all Hexo pages are subdirectories (e.g. /tags/), if not enabled, it will not automatically navigate to the index.html of the corresponding directory
  • File rule 404: Index

Create the AccessKey and authorize it

In fact, now you can upload files to deploy the website in the management page of Ali cloud, but it is too troublesome, we hope is an automated solution. Here we need to create an API to authorize the AccessKey:



Aliyun now enables the sub-account authorization function, so we can choose to jump to the sub-account management page:



First create a sub-account:



Note that since our account is for API use, we must enable programmatic access:



When you return, click “Add Permissions” on the right side of the account you just created:



Search for “OSS” here and select AddAliyunOSSFullAccessJurisdiction:



Return to the list, click on the account name you just created, and create an AccessKey. Note that after creating an AccessKey, an AccessKey and a SecretKey will be displayed. Be sure to save it and it will only be displayed once:

Install the one-click deployment script

I wrote a Hexo plug-in that deploys Hexo to AliCloud OSS with one click and supports configuring browser cache HTTP response headers. Source address: https://github.com/huzhanfei/hexo-deployer-ali-oss-extend

To use it, simply execute the installation command under the Hexo project:

npm i hexo-deployer-ali-oss-extend

Add the following configuration in the Hexo project configuration file _config.yml:

Deploy: -type: ali-oss region: "< OSS area code >" accessKeyId: "< OSS accessKeyId>" accessKeySecret: "< your OSS accessKeySecret>" bucket: "< your bucket name>" cacheControl: images: "< image file HTTP response header cache-control >, leave blank with no-cache" CSS: "< your OSS accessKeySecret>" "<CSS file HTTP header cache-control >, leave blank for no-cache" js: "< js file HTTP header cache-control >, leave blank for no-cache" HTML: "<HTML file HTTP response header cache-control >, leave blank for no-cache"

The area code can be found in the Bucket Overview of OSS, as shown in the figure below:

In addition, the Cache-Control function is added here because the OSS object storage does not set the default HTTP response header for common web files (such as CSS, JS, pictures, etc.). These infrequently updated files are not cached, which will lead to a large amount of waste of traffic. CDN can not obtain the cache configuration will continue to source back, resulting in a waste of back traffic.

The configuration is as simple as that, and then execute the deployment command:

hexo d

By default, the files are uploaded to the root directory of the bucket. If you need to deploy to another directory, add the remotePath option under Deploy

RemotePath: "< directory you want to deploy >"

Of course, if you use GitHub’s Actions feature, you can configure the hexo d to automatically execute the deployment script when you submit the source code. This is not an easy thing to do, but it’s not the focus of this article.

Configure a custom domain name

You can find your domain name in the Bucket overview page. Of course, most of the time, you will need to use your own domain name to visit your website. If your domain name has been registered, you can add your own domain name.

You can configure the domain name in “Transport Management – Domain Name Management” :



Click “Bind domain name” and fill in your own domain name as shown in the picture. If your DNS server is AliCloud, you can click “Automatically Add CNAME Record” to quickly set the domain name resolution:



If your domain name is not resolved by Ali Cloud, please manually set the domain name resolution according to the prompts on the page.

The latter

At this point, you can access the site from your domain name, or you can upload an SSL certificate to enable HTTPS access. Of course, if you have higher requirements, you can choose more optimizations:

  • Open the CDN service: After opening the CDN service, it is equivalent to deploying your mirror stations in many places across the country to obtain faster access speed. At the same time, you can open the functions of image compression, page optimization and so on through the CDN service
  • Regional parsing: Set DNS parsing to domestic parsing to Ali Cloud OSS or CDN, foreign parsing to Netlify, Vecel or even directly parsing to GitHub Page service