Fast (and Free) CDN using GitHub and JsDelivr

 


CDN stands for Content Delivery Network for websites. In an easy manner, CDN is a place from where your website files (css, js, images) are loaded, as a result the load on your hosting server decreases and the CDN services are spread around the whole world to serve the files faster. Also your website may have image files which you also can upload to the CDN and serve to your website directly. Your website hosting will only have the HTML files or any dynamic contents. In that case your website speed will noticeably increase. So, now let's learn how can we make our own CDN completely free of cost. 

STEP 1: Sign In to GitHub: 

    GitHub is an open source platform for developers for storing, managing, sharing and updating their codes or programs. So, you have to sign in to GitHub. If you don't have an account in Github, make sure to create one Follow Here.

STEP 2: Create a New Repository :

    Now, log in to your Git dashboard and create a new repository under your account. a repository is folder in which you will upload files. Here, if don't have to worry enough about the readme file. Make sure that your this repository is PUBLIC (not Private). 

STEP3: Upload Files:

    Now, upload your files(which you want to serve through CDN) in that repository you just created. You may upload HTML, CSS, JAVASCRIPT, IMAGES, VIDEOS etc. in your repository. 

STEP 4: FINAL STEP : ACCESS THE CDN THROUGH JSDELIVR:

HERE, in this point, let me assume that your github username is "username123" and the repository where you just uploaded the files is "repo123". And let's say your repository contains these files

1)) style.css

2)) script.js

3)) background.jpg

So, the CDN link for your any file will be:  

 https://cdn.jsdelivr.net/gh/{{the username}}/{{repository name}}/{{any subfolder if exists containing files}}/{{name of the file}}


In, this case, as we took example the CDN link of the style.css will be:   https://cdn.jsdelivr.net/gh/username123/repo123/style.css


samely, for the image file:  https://cdn.jsdelivr.net/gh/username123/repo123/background.jpg


And that's all those are your free CDN  links. Now you can use those link s to load contents in your website. Example: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/username123/repo123/style.css" />

Thank you . Hope you understood everything. If you have any doubt, opinion, concept or feeling make sure to share in the comment section. Also, you can share my post link to others in any social media. Also, if you have read the post and learned something new drop a comment mentioning your Country. That will really be nice for me to post future contents. Ok Have a nice day. BYE....... 


Imon Raj

Software, Web & Android Developer

My Skills:

Comments

Popular posts from this blog

Which one is better ? GeeksForGeeks or Leetcode ? How many questions to solve ?

Random jokes generator using API (Free)