What is CDN?

CDN (Content Delivery Network) is a content delivery network that helps speed up website loading by storing static files such as images, CSS, JavaScript, fonts, videos... on servers. near the user's location.

By using a CDN, you can minimize user wait times, reduce load on the origin server, save bandwidth, and improve user experience.

However, not everyone has the ability to use professional CDN services, especially those who are just starting out or on a tight budget.

So is there a way to use a free and simple CDN for your website? The answer is "yes", that is to use GitHub as the CDN for the website.

GitHub is a popular Git source code hosting service that allows you to create and manage public or private repositories for software projects. You can use GitHub to host your website's static files and use other free CDN services to deliver content from GitHub to your website.

In this article, I will introduce you to 2 free CDN services from GitHub that you can use for your website, namely jsDelivr and raw.githack.

jsDelivr

jsDelivr is a free, fast and stable open source CDN service that supports CDN for open source software on npm and GitHub.

jsDelivr is backed by the big 4 CDNs: Cloudflare, Fastly, Bunny and Quantil, has more than 750 global access points, supports automatic load balancing, is faster than most other CDNs and works flawlessly. even in China.

To use jsDelivr, you need to copy the link of the file on GitHub which looks like this:

https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.min.css

Then you go to jsDelivr homepage → "Tools" tool above header → choose convert from "GitHub" or from whatever source you have.

Paste the file url from GitHub that you obtained above in the input box and it will convert to the jsDelivr url.

https://cdn.jsdelivr.net/gh/twbs/bootstrap@v4-dev/dist/css/bootstrap.min.css

You can use this CDN link in the tag <link> or <script> on the website to load content from jsDelivr. You can use other features of jsDelivr like minification, concatenation, version aliasing, SRI hashing... to optimize the content.

See more documentation of jsDelivr here: jsdelivr-features.

raw.githack

raw.githack is also a free CDN service that allows you to distribute files directly from public repositories on GitHub and GitLab. raw.githack uses the Cloudflare network to ensure high performance and reliability of your content.

To use raw.githack you need a link of the GitHub file for example:

https://github.com/jquery/jquery/blob/main/src/core.js

You just need to visit the website of raw.githack and paste the GitHub link in the input box to get the CDN link from raw.githack.

We will get 2 results.

1. Use for main website.

There is no traffic limit. Files are served via CloudFlare's CDN.
Files can be compressed automatically to .min files if you add ?min=1 at the end of the query parameter.

https://rawcdn.githack.com/jquery/jquery/4a13266efd262a92f05d86b71d715885de103e6d/src/core.js

2. Use in development environment

https://raw.githack.com/jquery/jquery/main/src/core.js

New changes you push will be reflected within minutes.

Conclude

By using these services, you can simply and effectively leverage GitHub as a CDN for your website.

However, you should also note that these free CDN services do not guarantee the stability and safety of your content, so you should think carefully before using them for important or commercial websites. .

If you have any questions about how to use GitHub as a CDN for your website, please leave a comment below. Good luck! 😊