How to Host Javascript and CSS Files on the CDN Server?
Internet Tips
The procedure is that we will upload the CSS (Cascading Style Sheets) and JS (JavaScript) files of all our blog themes to the GitHub account and then transfer them to the fastest CDN server using the raw links of these files.
So if you want to know what a CDN server is and how to transfer your project files from GitHub account storage to cdn.statically.io and cdn.jsdelivr.net CDN servers, follow these steps.
What is a CDN Server?
CDN stands for Content Delivery Network and is a highly distributed server platform that helps reduce the delay in loading web page content by reducing the physical distance between the server and the user. And that's why blog speeds up and files don't take long to load on a user's computer.The contents of the CDN server are primarily rendered from the server near the user's location. Providing a cache server reduces the load on your actual servers and provides faster content to the user, resulting in a better user experience and improved blog speed. And below is an example image of the content delivered by the CDN server.
The content without a CDN server is delivered from the original location. It uses more processing power and bandwidth, takes longer to reach the user, and results in reduced speed of the blog and less user experience. And below is an example image of content delivered without a CDN server.
How to host JS and CSS files on the CDN server?
There are many CDN servers available but I will show you how to host files on the two www.jsdelivr.com and statically.io fast and free CDN servers, which have no bandwidth limit and are also accessible in China.If your blog is on the WordPress platform then the plugin of these CDN servers is available. You can use the plugin of one of these two servers to improve the speed of your blog. And if your blog is on the Blogger Blogspot platform, then you have to do everything manually because Blogger does not have the plugin option.
In order to host our blog files on either of these two servers, we need to create a repository within our GitHub account and upload all of our files that we want to host on a CDN server. So we begin the process of manually transferring our files to the CDN server.
The first step is to go to your GitHub account and click on the plus "+" icon in the top right corner, And then click the New repository option.
After that type the name of the repository as I typed "blogger", and select the Privacy "Public" option, and then click the "Create repository" button.
Click on the "uploading an existing file" link as you can see in the picture below.
Click on the "choose your files" link and select and upload your JS and CSS files and wait until the uploading process is complete. And as soon as the uploading process is complete, click on the "Commit changes" button.
When your files are uploaded to your GitHub repository, your files will look like this and the next step is to click on the file name.
As you click on the file name, your file will open in GitHub, then click on the "Raw" button. Or copy the raw link of the file by right-clicking on the raw button.
When you click the raw button, your file will open in the browser, then right-click on the browser address bar and copy the raw link of the file.
We will transfer our CSS file to the CDN server with the help of this link. And if you want to host JS files or images on a CDN server, you can get raw links by uploading your files in the same way. And then you can transfer your files from GitHub to the CDN server using the following method.
Go to this URL address https://statically.io/convert/ and then paste your raw GitHub file link into it, It's a tool to Convert GitHub links to Statically CDN links. Once you paste the link of your GitHub raw file into this tool, it will automatically create a static CDN link for your file.
Raw link of my GitHub account file.
https://raw.githubusercontent.com/AsifKamboh-COM/blogger/main/cookie.cssStatic CDN server link converted with the statically.io tool.
https://cdn.statically.io/gh/AsifKamboh-COM/blogger/main/cookie.cssIf you want to host your files on the jsdelivr.net CDN server, then you have to replace the raw.githubusercontent.com domain name to the jsdelivr server domain cdn.jsdelivr.net/gh name, and remove the slash / after the repository name and add @ to that location. then your link will become the static link of the jsdelivr.net server. For example my jsdelivr CDN server link.
https://cdn.jsdelivr.net/gh/AsifKamboh-COM/blogger@main/cookie.cssWell the How to host Javascript and CSS files on the CDN server? post is over, I hope you have learned something from this post, and if you have any questions about this post, you can do so in the comments section below.