Free CSS and JavaScript File Hosting using GitHub

Posted by Admin on Saturday, 27 February 2016


Google officially announced that the Google code project hosting service will be closed on January 15 2016. This announcement was posted through their blog post entitled Bidding farewell to Google Code. Google says in their blog post that most of the developer’s projects where move to another project hosting services like GitHub and Bitbucket bloom that’s why they decided to close the Google Code project hosting service. They also decided to move most of their open source projects to GitHub in order for developers can use them easily.

What exactly GitHub is, and why Google trusted this site to host their open source projects? To understand what GitHub is, we must understand first what Git is.
Git is simply a version of control System, while GitHub is a web-based Git repository hosting service, which offers all of the distributed revision control and source code management (SCM) functionality of Git as well as adding its own features.
One of our favorite features on GitHub is the Forking a repo. This feature allows you create a new project based on the existing project of another user. There are many projects on GitHub, if you like to contribute to a specific project where you interested in, you can fork the repo and make any changes you would like then release it as a new repo.This is one of the amazing features of GitHub, but today our focus is to learn how we can host Javascript, CSS and HTML on GitHub.

Creating Account in GitHub

  1. Simply sign up at Github.com
  2. Choose which type of Plan you want (Free Plan is recommended for this tutorial) and Click Finish sign up button below the page.

    GitHub Free Plan
  3. Click New repository button on the right side part of the page.

    GitHub New repository
  4. Fill the required text fields. Refer to the screenshot below.

    Fill new repository
  5. We need to create the file README.md, so just click the README. See the image below.

    GitHub readme.md
  6. You will be directed to another page, allowing you to type something, just ignore it, go to the bottom of the page and click Commit new file button.

    GitHub commit new file

Creating GitHub Project Page to start hosting JavaScript

This is the main goal of this post. Inorder for us to host our JavaScript, CSS and HTML file we need first to create our GitHub project Page. You may also use this page to describe what your project all about.

  1. Go to Settings. You can see it on the left sidepart of the page.
  2. Scroll down and select Automatic page generator.
  3. Just create content of your page and publish it.
  4. You can now create a Javascript, CSS or HTML file, just click the + button. Make sure you select the gh-pages branch. See the image below.

    GitHub plus button
  5. Every time you click the + button, GitHub will give you a file editor on your browser. Don’t forget to add an extension of your file name with .css, .js or .html every time you will save it. Refer to the screenshot below.

    GitHub file name extension
  6. At the bottom of the page, just click the Commit new file button to host your file now.
  7. You’ve been successfully hosted your file, so now right click your recently uploaded file and select Copy Link Address.

    copy link address
The URL will look something like this:
https://github.com/Username/Repository-name/blob/master/my-javascript-file.js
Just change it to:
http://Username.github.io/Repository-name/my-javascript-file.js

You may now use your external script to your website using the URL that we’ve modified.

Reminder: Make sure you will verify your email address used in making your GitHub account.