Free CDN: jsDelivr+Github Usage
CDN, short for Content Delivery Network, is a network that distributes content. CDN is built on top of the internet and relies on edge servers deployed in various locations. It uses modules such as load balancing, content distribution, and scheduling on a central platform to allow users to access content nearby, reduce network congestion, and improve user response speed and hit rate. The key technologies of CDN mainly include content storage and distribution.
Using jsDelivr to Host Static Resources for Free CDN
There are many free CDNs in China, but they require filing.
There are also many free CDNs overseas, 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]
- 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 # View 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, etc. The specific usage is 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 version range instead of 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 slash at the end to get the resource directory list
https://cdn.jsdelivr.net/gh/jquery/jquery/
// Refresh CDN resources by changing "cdn" to "purge" in the domain name
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