Home Website

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.

Use GitHub for Hosting JavaScript and CSS files through Rawgit

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-

  1. Sign up With GitHub
  2. Creating a Repository on GitHub
  3. Creating a GitHub Project to host JS and CSS files
  4. 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.js
So 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.js
Now 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.

How to Create an RSS Feed

     
If you want to increase the readership on your website, or you want to make it big with a podcast, you need an RSS feed. The RSS feed keeps your users up to date on all of your latest articles or episodes and can result in a massive increase in traffic.

How to Create an RSS Feed

Creating an RSS feed is quick and easy, whether you're using an RSS creation program or writing one yourself. Follow this guide to find out how.

Using RSS Creation Software


1. Find an RSS creation program. There are a couple options when it comes to RSS services. You can use a web service to automatically create and update your RSS feed for a monthly fee, or you can download an RSS feed program and update your feed manually. Popular programs include:
  • RSS Builder :- A free, open-source RSS creation program that allows you to create RSS files that you upload to your website. It can also automatically manage the RSS feed on your website without having to upload the file each time
  • Feedity and rapidfeeds :- These are web services that allows you to manage multiple feeds with automatic updates. You will not need to manually update your feed when you update your website's content. Feedity will generate an RSS file without having to input each item.
  • FeedForAll :- A paid program that will allow you to create RSS feeds to upload to your website. It also has specialized tools for creating podcast feeds for iTunes.

2. Create a new feed. Once you have chosen your service, create your first feed. The process will differ from program to program, but the general idea is the same for almost all of them. All feeds will need to have some basic metadata:
  • Create a title for the feed. This should be the same as your website or podcast.
  • Enter in the URL for your website. This will help viewers link back to your homepage.
  • Enter a description of the feed. This should be no more than a sentence or two describing the general content on the feed.

3. Add an image for your feed. You can add an image that represents your feed. The image file will need to be uploaded to your website in order for it to load. Adding an image is optional, but highly recommended for podcasts.

4. Add content to your feed. Once you've entered your podcast's information, it's time to start populating it with content. Enter in the title of the article, blog post, podcast episode, etc. Enter in the URL that links directly to that content, as well as the publishing date. For Feedity, enter in your website URL and your content will be automatically populated.
  • Each entry should have a short but sweet description. This is what your readers will see before they choose to click your entry in their RSS readers.
  • The GUID is a unique identifier for your content. Most of the time, you can place the URL in this field as well. If both pieces of content are located at the same URL, they will need unique identifiers.
  • You can add Author information and comments.
  • Add a new entry for each piece of content that you want to broadcast.

5. Create the XML file. Once you're done entering in all of your content into your feed, you need to export it to an XML file. This XML file will allow visitors to subscribe to your RSS feed

6. Publish the feed. Upload the XML file you've created to your website and place it on your homepage. Some sites will create a URL to your feed that you can place on your website instead.
  • For RSS Builder, you can enter in your website's FTP information to have your feed automatically updated whenever you edit it. To do this, click the FTP button in the top toolbar, click the New Site button, and enter in your FTP information. When you're ready to update the XML file on the website, click the Publish Feed button.

7. Submit your RSS feed. There are a variety of aggregate sites that you can submit your RSS feed to. These sites collect articles from similar interests, and can significantly increase your viewership. Search for RSS Feed Directories that match the interests that your feed addresses and submit the URL to your feed's XML file.
  • If your feed is a podcast, you can submit it to iTunes so that iTunes users can search for it and subscribe through the program. Your podcast will need to be approved in order for it to show up in searches