CDN stands for Content Delivery Network, which is a network for content distribution. CDN is built on top of the internet and relies on edge servers deployed in various locations. It uses functions such as load balancing, content delivery, and scheduling from a central platform to allow users to access content nearby, reduce network congestion, and improve user response time and hit rate. The key technologies of CDN mainly include content storage and distribution.
Hosting Static Resources with jsDelivr Free CDN#
There are many free CDNs in China, but they require filing.
There are also many free CDNs abroad, but they are slow in China.
However, jsDelivr is a special case. Although it is a foreign CDN, it has nodes in China.
jsDelivr official website: https://www.jsdelivr.com
Resources hosted on Github load slowly in China, so CDN acceleration is needed to optimize website loading speed. jsDelivr + Github is a free and easy-to-use CDN, which is very suitable for blog websites.
Usage Steps#
-
Create a Github repository.
-
Clone the Github repository to your local machine.
Execute the following command:
git clone repository_address_to_copy
- Upload resources.
Copy the resources to be uploaded to the local git repository (Note: jsDelivr does not support loading resources larger than 20MB). In the local git repository directory, execute the following command:
git status #Check the status
git add . #Add all files to the staging area
git commit -m 'First commit' #Commit the files to the repository
git push #Push to the remote repository
- Publish the repository.
Click on "release" to publish.
Customize the release version number.
- Reference resources through jsDelivr.
Usage: https://cdn.jsdelivr.net/gh/your_username/your_repository_name@release_version/file_path
For example:
https://cdn.jsdelivr.net/gh/baicaime/meBlog/index.html
https://cdn.jsdelivr.net/gh/baicaime/meBlog/favicon-16x16.png
https://cdn.jsdelivr.net/gh/clin003/cdn/[email protected]/css.css
Note: The version number is not required. It is used to distinguish between new and old resources. If the version number is not used, the latest resource will be directly referenced. In addition, you can also use a range of versions, view all resources, and use specific methods as follows:
// Load any Github release, commit, or branch
https://cdn.jsdelivr.net/gh/user/repo@version/file
// Load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
// Use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
// Completely omit the version to get the latest version
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
// Add ".min" to any JS/CSS file to get the minified version, if it doesn't exist, it will be automatically generated
https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js
// Add a / at the end to get the resource directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/
// Refresh CDN resources by changing "cdn" to "purge" in the domain
https://purge.jsdelivr.net/gh/baicaime/meBlog/index.html
// Use the latest version of resources
https://purge.jsdelivr.net/gh/baicaime/meBlog@latest/index.html