Hosting Your Scripts from GitHub to jsDelivr: A Step-by-Step Guide
Last Updated : 01 Aug, 2024
Optimizing the performance and reliability of your applications is very important. One effective way to achieve this is by using a Content Delivery Network (CDN) to host and serve your scripts. jsDelivr, a free and powerful CDN, offers a seamless way to host your scripts directly from your GitHub repository.
In this article, we will guide you through the process of using jsDelivr to host your scripts, ensuring faster load times and greater global availability. Let's get started.
What is jsDelivr?
jsDelivr is a free, open-source CDN that allows you to host and serve your scripts directly from repositories on GitHub, npm, and the theme and plugin directories for WordPress. It ensures fast load time by serving your files from a global network of servers, providing high availability and performance.
Steps To Host Scripts To jsDelivr
Step 1: Creating a Repository on GitHub and Adding a JavaScript File
- Create a GitHub Repository:
- Login to your GitHub account and create a repo as usual (preferred to keep the repo public) .
- You can check a step by step guide here.
- Add a JavaScript Script:
- Create a .js file and upload it to the repo.
- For now we will create a simple js file that will print "Hello World" on the console.
- We are creating a function and writing all the code inside it to avoid ant conflicts with global variables. Also we are immediately calling it as well.
JavaScript (function() { function printHelloWorld() { console.log("Hello world from script hosted on github repo and deliverd through jsDelivr"); } })(); 
Hosted script from github.Step 2: Creating a CDN Link for the Script
- Go to jsDelivr and create the user defined format to create the CDN link to your js flie.
- For example, if your username is 'username', the repository name is 'my-repo' and the script is in the root directory, the URl will be: https://cdn.jsdelivr.net/gh/username/my-repo@main/script.js
- Replace username and my-repo with your actual GitHub username and repository name.
Step 3: Importing the js file inside HTML file
- Open your HTML file.
- Add the following script tag in the <head> or <body> section:
<script src="https://cdn.jsdelivr.net/gh/username/my-repo@main/script.js" async='true' crossorigin='anonymous'></script>
- Here we are using crossorigin='anonymous' to ensure that the script is fetched without credentials (such as cookies, client-side SSL certificates, or HTTP authentication). For more details refer to this article.
- Also we used asyns='true' to make it load parallel with other resources (like CSS and images).
Importing the script using script tag under head sectionVersion Control Best Practices
The jsDelivr used to cache the files on their server. So, in case you update your files, it might take up to 7 days to reflect on your HTML page. For checking the changes immediately onto your website, you can use versioning in your file. Tag each update with a different version in your github. And then you can call different versions of your files just by modifying the CDN link a little bit.
- Include Version Numbers: Add version number to your filenames or commit messages (e.g. 'script-v1.0.0.js').
- Update the CDN link: Modify the jsDelivr link to reference the new version. For example, change from' https://cdn.jsdelivr.net/gh/username/repo/script.js' to 'https://cdn.jsdelivr.net/gh/username/repo/[email protected]'.
- Maintain Backward Compatibility: Ensure that older version remain accessible if needed, but update link to your projects to use the latest version.
Similar Reads
First Open Source Contribution to GitHub - A Step By Step Guide Contributing to open-source projects on GitHub is a rewarding experience that allows you to collaborate with developers worldwide, improve your skills, and make a positive impact on the tech community. This step-by-step guide will walk you through the process of making your first open source contrib
4 min read
MERN Stack Project Deployment - A Step-by-Step Guide Deploying a MERN Project is an important step in making your app accessible to all. This process involves moving your application from a development environment to a production server where it can handle real traffic. Proper deployment ensures that your website runs smoothly, securely, and efficient
3 min read
How to Deploy Your React Websites on GitHub? Building a web application is always exciting for developers, especially when you step into the programming world for the first time. You build the front end of your application after a lot of struggle, and you want to showcase your skill, your creativity, and of course, your hard work to the world.
6 min read
How to use npm Scripts as a Build Tool ? In the world of JavaScript development, npm (Node Package Manager) isn't just for installing packages. It also allows you to define and run scripts to automate various tasks within your project. One can make use of npm packages within your scripts to extend functionality. For instance, you can emplo
3 min read
Making your first Open Source Pull Request | Github Open Source softwares are softwares for which the original source code is made freely available and may be redistributed and modified. As a Programmer, we are more interested in how to contribute to their codebase. A lot of newcomers find Open Source to be dreadful and daunting. But worry not, every
3 min read