The preface
Personally, HEXo is used to build a blog, which has just been launched. The blog address is www.xiezhrspace.cn. ‐ ^ ▽ ^ ‐ welcome to visit.
Although put on the cloud server, but due to the blog uploaded pictures and other resources more and more, more and more resources are requested, the blog access speed is getting slower and slower, it is unbearable to look at.
Worry for a long time, has been thinking of ways to optimize, their own information on the Internet, and the blog exchange group of small partners after communication will have a solution, [using CDN acceleration].
However, the problem is that many cloud service providers have to pay for CDN acceleration based on traffic. Although the site visits are not much, but it can white piao is of course the best.
JsDelivr +Github 2, and shoot cloud (need to apply for an account to join and shoot cloud alliance, personal application has not come down). All said that it would be better to shoot cloud acceleration, but their application has not been done, and blog access optimization is imminent, solid first adopted the first solution: jsDelivr+Github solution.
Take jsDelivr+Github as an example to record your optimization process.
1 introduction of CDN
CDN stands for Content Delivery Network.
CDN is a group of WEB servers distributed in many different places, which can provide resources to users more effectively. It will be selected according to the distance. Users can obtain the request data nearby, solve network congestion, improve access speed, solve the problem of slow access speed caused by small network bandwidth, large user visits, and unequal network distribution.
2 Mechanism of CDN Request Distribution
(1) The user provides the browser with the domain name to be accessed;
(2) The browser calls the domain name resolution library to resolve the domain name. Because the CDN adjusts the domain name resolution process, the resolution function library generally gets the CNAME record corresponding to the domain name. In order to obtain the actual IP address, the browser needs to resolve the CNAME domain name again to obtain the actual IP address; During this process, DNS resolution is used for global load balancing. For example, an IP address is resolved based on geographical location information so that users can access the IP address nearby.
(3) The IP address of the CDN cache server is obtained. After obtaining the actual IP address, the browser sends an access request to the cache server.
(4) According to the domain name provided by the browser, the Cache server resolves the actual IP address of the domain name through the dedicated DNS inside the Cache, and then submits the access request to the actual IP address.
(5) After the cache server obtains the content from the actual IP address, on the one hand, it saves the content locally for future use, and on the other hand, it puts the obtained data back to the client to complete the data service process;
(6) The client will display the data returned by the cache server and complete the whole browsing data request process.
3 jsDelivr profile
Is a free, fast and reliable CDN acceleration service that claims it can support 68 billion requests per month. The service is open source on Github, jsDelivr address. Currently, it offers an accelerated service for NPM, Github, and WordPress that can be accelerated with just one line of code. As long as we use third-party static resources in our projects, such as JavaScript scripts, CSS style sheets, pictures, ICONS, Flash and other static resource files should be considered to be connected to THE CDN
4. Simple use of jsDelivr
Take loading jQuery and Bootstrap as an example
/ / the load jQuery v3.2.1
https:/ / cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
/ / load the bootstrap v4.4.1
https:/ / cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js
Copy the codeJsDelivr + Github is a free and easy to use CDN, perfect for blogging sites
5 jsDelivr + Github implementation
5.1 Creating a Github Repository
5.2 Run the git clone command to clone the repository to the local PC
Right-click Git Bash Here in the local directory where you want to put your repository and type the following command
git clone https://github.com/xiezhr/mycdn.git
Copy the code$ git clone https://github.com/xiezhr/mycdn.git
Cloning into 'mycdn'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
Copy the code5.3 Upload resources requiring CDN acceleration to github repository
The following commands are used
Git add. // Add all files to the staging area git status // check the status git commit -m 'first commit' // commit to the repositoryCopy the codePersonally, I use the Hexo blog framework, whose static resources (CSS, JS, images, etc.) are placed under the Source directory. Therefore, I upload the source directory in its original form, which has the advantage of keeping the path the same as the original and making it easier to call later.
After the above command is entered in git window, all files are uploaded to Github repository
5.4 Click Release to release the release version
5.5 Referencing Resources through jsDelivr
Apply the resource to the following address
https://cdn.jsdelivr.net/gh/ your user name/your warehouse name @ released version number/file pathCopy the codeFor example, get the back-rain-.png file in the source/bgimg path
https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/bgimg/back-rain.png # # for the latest resources https://cdn.jsdelivr.net/gh/xiezhr/[email protected]/source/bgimg/back-rain.png # # for 1.0 version of the resourceCopy the codeNote: The version number is not required to distinguish between old and new resources. If the version number is not used, the latest resources will be directly referenced. In addition, you can also use a version within a range to view all resources.
/ / load any lot release, commit or branch HTTP: / / https://cdn.jsdelivr.net/gh/user/repo@version/file / / loading jQuery v3.2.1 HTTP: / / https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js / / use version range rather than a specific version https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js HTTP: / / https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js / / completely omit this version in order to get the latest version HTTP: / / https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js / / add. "min" to any of the JS/CSS file for a smaller version, if not, Will be automatically generated HTTP: / / https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js / / in the end of the add/directory listing for resources https://cdn.jsdelivr.net/gh/jquery/jquery/Copy the code6 replace static resources in Hexo with CDN acceleration
The front-end library used can be replaced with the corresponding CDN address as required. If the specific version number is not specified below, the latest version can be used.
# Note: Jsdelivr automatically generates.min versions of js and CSS for you, so you can write.min.xxx directly in the Settings of js and CSS paths
libs:
css:
matery: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/matery.css
mycss: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/my.css
fontAwesome: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/awesome/css/all.css # V5.11.1
materialize: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/materialize/materialize.min.css # 1.0.0
aos: https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/aos/aos.css
Copy the codeAfter everything is changed, execute the following command
hexo cl & hexo g & hexo s
Copy the codeEnter http://localhost:4000 in the browser address bar to visit your blog, and you will post it much faster. That’s it!!