How to Use GitHub for Hosting JavaScript and CSS files through Rawgit
Are you Facing problem in hosting JavaScript or CSS for your blogger website? Today in this article we are going to explain How to Host Free JavaScript and CSS For blogger on Github.
This is a great challenge to find a suitable free CDN (Content Delivery Network) with unlimited bandwidth. As a web developer and Blogger we often host JavaScript and CSS file on hosting service provider site. But you won’t do it freely with unlimited bandwidth. Formerly we has hosted our JavaScript files on Google Code but unfortunately Google stopped their service and they were open a new door for us that is called Google Drive.But similarly Goggle also discontinued serving content via Google Drive host.So we should find another way to host our JavaScript and CSS file in another server.
I have found a better alternative which is called Github. But you can host only JS and CSS file on Github but can’t load it on your Website. And for loading JS and CSS files you have to load through RawGit. RawGit serves raw files directly from GitHub with proper Content-Type headers.
However our main objective is to host JavaScript and CSS files on GitHub and load it on our Blog. But for this you can to go through 4 steps-
So the total process looking little lengthy but don’t worry this is very easy. I will discuss it below step by step.
Step 1. First visit the Github
Step 2. Now Click On Sign Up Button.
Step 3. Now Create Your Username , Add email Address and password for creating account on Github.
Step 4. You will head to “Step 2” for choosing your Plan and from there select “Unlimited public repositories for free.” from the list. After that, click “Continue” button.
Step 5. Now Go to your email and activate the Github Account.
Step 1. Go to your “GitHub Dashboard” and click “Create new… “, “+” icon from top right corner to select “New repository”.
Step 2. You will head to “Create a new repository” page and write a name under “Repository name” field. Write your repository description under “Description” field but this is optional.
Step 3. Select radio button where written “Public”, thus anyone can see your repository.
Step 4. Put tick on “Initialize this repository with a README” option. As well as add Git ignore and License on your repository by using “Add .gitignore” & “Add a license” dropdown option.
Step 5. Finally click “Create repository” to go next level.
Step 1. Click “Create new file” from the top.
Step 2. Now you will see the Code Editor under “Code” tab. First write your file name with appropriate extension like myfile.js or myfile.css and below “<>Edit new file” add your JavaScript or CSS code.
Step 3. After that scroll down and locate “Commit new file”, simply click on it.
Step 4. You see in example that myfile.js file has created click on the myfile.js file and copy the URL address from your browser address bar. It will look like below.
Step 1. First of all, navigate to Rawgit official website.
Step 2. Then, paste the default GitHub Link (which you copied on browser address bar [Part 3 & Step 4]) on the first input field.
Step 3. RawGit will provide you two different links first one for limited traffic and the second one for unlimited traffic or Production. Then just copy or use the 2nd link which is for Production.
Now your JavaScript file is ready to use on your blogger blog or website.
After hosting file on GitHub and getting RawGit URL from your JavaScript or CSS file the URL would be like below-
I hope now it is clear to you that how we can host any file on GutHub and make it work on our blog or website.
This is a great challenge to find a suitable free CDN (Content Delivery Network) with unlimited bandwidth. As a web developer and Blogger we often host JavaScript and CSS file on hosting service provider site. But you won’t do it freely with unlimited bandwidth. Formerly we has hosted our JavaScript files on Google Code but unfortunately Google stopped their service and they were open a new door for us that is called Google Drive.But similarly Goggle also discontinued serving content via Google Drive host.So we should find another way to host our JavaScript and CSS file in another server.
I have found a better alternative which is called Github. But you can host only JS and CSS file on Github but can’t load it on your Website. And for loading JS and CSS files you have to load through RawGit. RawGit serves raw files directly from GitHub with proper Content-Type headers.
However our main objective is to host JavaScript and CSS files on GitHub and load it on our Blog. But for this you can to go through 4 steps-
- Sign up With GitHub
- Creating a Repository on GitHub
- Creating a GitHub Project to host JS and CSS files
- Adding GitHub file or gist URL on RawGit for serving file on our Website.
So the total process looking little lengthy but don’t worry this is very easy. I will discuss it below step by step.
How to create an account on GitHub?
Step 1. First visit the Github
Step 2. Now Click On Sign Up Button.
Step 3. Now Create Your Username , Add email Address and password for creating account on Github.
Step 4. You will head to “Step 2” for choosing your Plan and from there select “Unlimited public repositories for free.” from the list. After that, click “Continue” button.
Step 5. Now Go to your email and activate the Github Account.
How to Creating a Repository on GitHub?
Step 1. Go to your “GitHub Dashboard” and click “Create new… “, “+” icon from top right corner to select “New repository”.
Step 2. You will head to “Create a new repository” page and write a name under “Repository name” field. Write your repository description under “Description” field but this is optional.
Step 3. Select radio button where written “Public”, thus anyone can see your repository.
Step 4. Put tick on “Initialize this repository with a README” option. As well as add Git ignore and License on your repository by using “Add .gitignore” & “Add a license” dropdown option.
Step 5. Finally click “Create repository” to go next level.
How to create a GitHub Project to host JavaScript or CSS files?
Step 1. Click “Create new file” from the top.
Step 2. Now you will see the Code Editor under “Code” tab. First write your file name with appropriate extension like myfile.js or myfile.css and below “<>Edit new file” add your JavaScript or CSS code.
Step 3. After that scroll down and locate “Commit new file”, simply click on it.
Step 4. You see in example that myfile.js file has created click on the myfile.js file and copy the URL address from your browser address bar. It will look like below.
https://github.com/USERNAME/RepositoryName/blob/master/myfile.jsSo we have successfully host and published our JavaScript or CSS file in GitHub.
How to link the GitHub default URL with RawGit CDN for serving file on our Website
Step 1. First of all, navigate to Rawgit official website.
Step 2. Then, paste the default GitHub Link (which you copied on browser address bar [Part 3 & Step 4]) on the first input field.
Step 3. RawGit will provide you two different links first one for limited traffic and the second one for unlimited traffic or Production. Then just copy or use the 2nd link which is for Production.
Now your JavaScript file is ready to use on your blogger blog or website.
How to use hosted file from RawGit to blog or website?
After hosting file on GitHub and getting RawGit URL from your JavaScript or CSS file the URL would be like below-
https://cdn.rawgit.com/USERNAME/RepositoryName/master/myfile.jsNow you would like to use this JavaScript file on your blog or website. This is really easy to add GitHub hosted file on blog or website to make it work. But for hosting JavaScript file on blog or website the above JS file URL should write like below.
<script src="https://cdn.rawgit.com/USERNAME/RepositoryName/master/myfile.js" type="text/javascript"></script>
I hope now it is clear to you that how we can host any file on GutHub and make it work on our blog or website.
