A CDN, or Content Delivery Network, is a distributed network of servers located around the world that helps deliver website content, such as images, videos, scripts, and stylesheets, to users more efficiently. It improves website performance by reducing latency, optimizing file delivery, and increasing availability. CDNs store cached copies of files closer to users, resulting in faster loading times, reduced server load, and improved overall user experience.
jsDelivr is a popular free CDN for open-source files that helps developers improve the performance and reliability of their websites or web applications. It allows you to easily load and deliver various files, such as JavaScript libraries, CSS stylesheets, and images, to your users from a distributed network of servers. jsDelivr also offers features like automatic compression, file optimization, and caching, further enhancing the distribution performance. This includes minification of JavaScript and CSS files, as well as image compression. jsDelivr provides HTTPS support by default, ensuring that files served through the CDN are delivered securely.
One of the notable features of jsDelivr is its ability to serve files directly from GitHub repositories. This means that you can use a GitHub repository as a CDN, making it easy to host and distribute your project files. It allows you to specify file versions using GitHub release tags or commit hashes. This enables you to control which version of a file is served, providing better control over your project dependencies. By leveraging jsDelivr, you can easily eliminate the need for setting up and managing a separate CDN infrastructure, making it a convenient solution for developers. It’s a cost-effective approach. GitHub provides free hosting for open-source repositories, allowing you to serve your files without incurring any additional costs for hosting and distribution using jsDelivr CDN.
How to use a GitHub repository as a CDN with jsDelivr
Let’s say you have the following GitHub URL:
https://github.com/<username>/<repository>/blob/<branch>/<some_sub_folder>/<file>.js
To distribute that file through the jsDelivr CDN you have to convert the URL to:
https://cdn.jsdelivr.net/gh/<username>/<repo>@<branch>/<some_sub_folder>/<file>.js
The above URL is not recommended for production environments because the code from that branch may change, especially if it is the main branch. Rather than <branch>
it’s encouraged to use <version>
thus:
https://github.com/<username>/<repository>/blob/<version>/<some_sub_folder>/<file>.js
The CDN version will be:
https://cdn.jsdelivr.net/gh/<username>/<repo>@<version>/<some_sub_folder>/<file>.js
Eventually you can use also @latest
in the CDN URL. This option is not recommended for production environments since the fallback will be the default branch if there are not tagged releases which makes unpredictable.
https://cdn.jsdelivr.net/gh/<username>/<repo>@latest/<some_sub_folder>/<file>.js
It’s important to note that jsDelivr is primarily designed for serving smaller files, such as JavaScript libraries, CSS stylesheets. At the moment of writing this posts, the maximum size allowed is 20MB
Optionally, you may generate the URLs from this tool provided by jsDelivr itself: https://www.jsdelivr.com/github

How to purge a file from jsDelivr CDN
Static Versions and commit hashes are cached forever. Versions (including last
) are cached during 7 days and branches 12 hours.
jsDelivr provides an easy way to purge a file from its CDN. Just go to https://www.jsdelivr.com/tools/purge and paste the URL you want. It will be generated again once the URL is requested.

The purge process might take a few moments to complete, depending on the number of files you have requested to be cleared from the cache. Once the purge is complete, the cache for the specified files will be cleared, and subsequent requests for those files will retrieve the latest version from your GitHub repository.
Minification support in jsDelivr
Minification is the process of reducing the size of files, such as JavaScript, CSS, or SVG, by removing unnecessary characters, spaces, line breaks, and comments. This optimization technique helps to improve the performance of websites and web applications by reducing the file size and thereby enabling faster downloads and improved loading times. Minification does not change the functionality of the code but increases its efficiency, making it easier and faster for browsers to interpret and execute.
jsDelivr provides a easy-to-use way to generate the min
version. Just add .min
to any JS/CSS/SVG file to get a minified version. From the URL we used before, this is how it looks like with minification.
https://cdn.jsdelivr.net/gh/<username>/<repo>@<branch>/<some_sub_folder>/<file>.min.js
Documentation
jsDelivr provides comprehensive documentation to help developers effectively utilize its features and functionalities. It includes examples, explanations of common scenarios to assist developers in using jsDelivr effectively. Access to the jsDelivr documentation at https://www.jsdelivr.com/documentation. It is a valuable resource for understanding the capabilities of jsDelivr and how to integrate it into your projects successfully.