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

Post a Comment

Popular posts from this blog

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

     Great question! When it comes to practicing Data Structures and Algorithms (DSA), there's a plethora of websites to choose from. In the Indian context, GeeksForGeeks and Leetcode stand out as the most popular choices among undergraduate Computer Science students (and even those from other departments who are quickly catching on) for honing their DSA skills.      Whether you're a first-year student or just diving into coding during college, you've probably encountered the ubiquitous term 'DSA' and its significance in securing jobs within the IT industry. You might have seen numerous YouTube ads promoting live and 'free!!!' webinars, and there's a wealth of learning resources available on YouTube to grasp the fundamentals of DSA. However, while learning DSA is crucial, the real game-changer is practicing questions to cultivate that 'legend-level' confidence needed to tackle any given problem.      Now, here's where the confusion sets in. Y...
Read Post

Random Gradient Generator With CSS and Javascript

Image
      Let's see how to generate random gradient background using JavaScript. This is very simple. We will use Math.random() of JavaScript to generate any random value we want to generate. We will have some functions in JavaScript :  1) randomElement() : To generate a random value between 0 to f or the hexadecimal digits. 2) randomColor() : To generate a random Hex color. 3) randomAngle() : To generate a random angle between 0 to 360. 4) applyBg() : To apply the background gradient to a particular element. Now , Let's see the live preview of our project. Change Background Let's understand in short how is it generating random gradient everytime. We have an inbuilt function in JavaScript called Math.rand() which generates random fraction value between 0 to 1. So if I multiply that with any number N and floor or round off the value, it will output any random value between 0 to N in integer format. This concept we have used here.  To g...
Read Post