Host Blogger CSS, JavaScript and HTML Files on GitHub Pages

Recently, I shifted all and every CSS and JavaScript code snippet including other HTML files to be hosted for free on GitHub Pages. This service is known to provide people with unlimited bandwidth and storage space, without paying for anything.

Your files are being hosted on a cloud technology known as the Git Repository, which is such a great solution to synchronize your files between multiple devices and work spaces allowing version control capability as well and many other features.

An Awesome Touch to Blogger

After I migrated to GitHub pages as the main host for my scripts, the source code between <head> and </head> tags of this blog has been presented to end users like this:

<head>

<!-- [ JavaScript ] -->
<link href='http://repository.ismoothblog.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css' rel='stylesheet'/>
<script src='http://repository.ismoothblog.com/ajax/libs/highlight.js/9.8.0/highlight.min.js'></script>
<script src='http://repository.ismoothblog.com/js/thumbnail-resize.js' type='text/javascript'></script>
<script src='http://repository.ismoothblog.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://repository.ismoothblog.com/js/sticky-widget.js'></script>
<script src='http://repository.ismoothblog.com/js/misc.js'></script>

<!-- [ CSS ] -->
<link href='http://repository.ismoothblog.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://repository.ismoothblog.com/css/global.css' rel='stylesheet'/>
<link href='http://repository.ismoothblog.com/css/index.css' rel='stylesheet'/>
<link href='http://repository.ismoothblog.com/css/blog.css' rel='stylesheet'/>
<link href='http://repository.ismoothblog.com/css/static.css' rel='stylesheet'/>
<link href='http://repository.ismoothblog.com/css/error.css' rel='stylesheet'/>

</head>

If that's not enough, as you can see in the code above I highlighted the URL links just in case, so yes you can use the sub-domain of your own top-level custom domain for the repository that will be hosting your blog files, it reflects a feeling of professionalism and that's awesome!

Otherwise, if you don't have a custom domain they will just give a cool and short free domain, for example if I hadn't happen to have my own the custom domain in my case, I would've just used the following domain name: ismoothblog.github.io instead, which is already reserved and available for me to use at anytime.

Get Started with GitHub Pages

First of all, of course you will have to register an account on GitHub to get things started, then follow the steps:

Step 1 (Create a new git repository)

Once you are done, login into your account then create a new repository:

Then make sure to name the repository after the domain that you wish to acquire, remember it has to be YOU.github.io if you are going for the free solution, even if you have a custom domain you should still reserve a free domain, you can change it later to whatever you want.

Well, you must select the Public repository option as Private repositories are reserved for premium users, it's no big deal. Make sure to initialize the repository with a README file to avoid further complications.

We are done! Now just upload your files and links should be alive for you to use on your Blogger blog.

Step 2 (Upload your files)

The git control process for Windows users is explained here on GitHub by using their application, if you are a Linux user follow these instructions, also don't forget to read the mini-guide for GitHub Pages service presented on the official site.

Blogger Custom Sub-Domain for GitHub Pages Hosting

If you want the files being served on the same domain of your Blogger blog, you have to create a CNAME Record by logging into your Admin Console through your DNS domain provider website, here's what I did, add a record with the following enteries:

Host Name: repository
Address: ismoothblog.github.io
Record Type: CNAME

Make sure to change repository to your desired sub-domain of your own top-level custom domain and ismoothblog.github.io to your corresponding GitHub default domain in your case.

Last but not least, create a file named exactly as CNAME inside your main git repository index, then input inside that file your custom sub-domain, like this in my case:

repository.ismoothblog.com

That's all, your new sub-domain should be alive in around 30 minutes according to my experience depending on your domain provider Time to Live (TTL) value configured on their DNS servers.

By the way, I've been building and designing a Jekyll Blog which can be used in corporation with GitHub Pages service to host your own personal blog or website, I will be writing about my progress soon so stay tuned!

Feel free to drop a comment in the section below, do not hesitate to share your thoughts, so what do you think about this service and my implementation on this Blogger blog?

iSmooth Blog