Skip to main content

Completely Free Static Website Hosting - Using Github pages

Static Web Page

A static web page can be your portfolio, resume, or small biography, a business advertisement etc..
Static web pages consist of series of HTML, CSS, Javascript and Image files. This can be used to deliver a content to the end user as it is.
Even if its static content we need a some common space to store and access store and deliver this content, and that is called hosting a web page.
Source: Wikipedia - Static web page

When it comes to hosting we should consider following points

Availability

No one wants to let their users see a 404 page when they hit their bisuness URL in the browser. We can not give 100% uptime but atleast we should try to give 99.99% uptime.

Bandwidth

I dont think so anybody creates a web page that can be seen only by certain number of people at a time. Whoever hits the link they should be landed in the page.

Cost

I dont want to spend $$$/month for hosting a static web page of some KB's or MB's in size.

Easy to change

Lets say If we have to change the address displayed in the webpage, It should not be a very big process. Just an Edit and save isn't it?

Hosting a Static web page for Free

As I said we need a common storage to store and serve our static files. There are lot of storage services available where you can store and serve the files to the public using a publick sharable URL. But I personally prefer Github Pages for static web page hosting. Github pages is free for public repositories. Anyways we are going to serve static html files which anybody can see by a right click itself So I am fine with free repository. If you prefer private then go for it, its actually costlier if you consider some other paid hosting services. Bitbucket is another service like github where they provide all we have in github with free private repositories. But as I said I personally prefere github.
Read more about Github Pages here

Creating a static page using Github Pages


  • First of all You need an active account at github, Sign Up or Sign In to your account.
  • Create a repository with name in the following format

                <github_username>.github.io
                 Note: Replace <github_username> with your actual github username


  • Add a readme file to initialize empty repository.







  • Create a new index.html file with some html content/ Or if you have html files ready, simply click on Upload files near Create button and upload all your files. Make sure a file with index.html is mandatory. 







Wow! Your free static web page is ready

Planning to buy something on amazon.in? use this link to get Best deals on Electronics - Using this link will not cost you any extra money but supports blog posts like this. Thanks.

Testing

Now hit the URL <username>.github.io and you can see your html page output there.

Custom Domain

You can also have a custom domain for your github pages its super duper easy and cheap based on the domain you choose.

You can see the full guide to use custom domain from godaddy with guthub pages in this post.

Setup your home PC/Server with a low cost mini PC's starting from just 8,000 Rs Only/- - Checkout link here


In simple:

* Purchase a domain from godaddy
* Update custom domain in your project by click on settings button
* Update CNAME record in your Godaddy domain management screen

Let me know in the comment section if you guys want a detailed instruction on how to setup custom domain for github pages.

Comments

Post a Comment

Popular posts from this blog

TataSky Refresh after Recharge - Activate after Recharge

If you are using TataSky and doing recharge occasionally and that too after disconnection, this post will be very helpful for you. Most of the time you will not get the channels listed as soon as you make the payment. It will display message to Subscribe for that channel. You can easily get channels back by simply giving a missed a call from your registered mobile number. Note: Make sure your TV and SetupBox is on and showing the error message Give missed call to  +91 80892 80892 (Soft Refresh)   wait for 1 minute and If still not active then try giving missed call to  +91 90405 90405 (Heavy Refresh). Ad: Planning to buy a Best low budget Smart TV? Consider  Acer 109 cm (43 inches) I Series 4K Ultra HD Android Smart LED TV AR43AR2851UDFL (Black)  - You can get this TV as low as for 20,000 Rs - which has Bluetooth, WiFi, Android and good customer ratings (4.4/5). Note: Price based on offers, click on the link to see current price on th...
20 comments
Read more

Smart Bulb Control using Python Script

Smart Bulb Control using Python Script Hello again, In this article, we will see how to control the smart bulb on the local network unsing a python script and will guide you through the process of setting up and using this script to seamlessly manage your smart lights. Whether you want to turn your lights on or off, adjust brightness levels, or even change color settings, this script provides a convenient way to interact with your smart bulbs right from your Python environment. Example lits pytest The light color will turn green if all tests pass or red if test fails. And while starting the bulb glows with a warm white (yellow) color Currently the script is tested on Wipro Smart bulb s and Amazon Basics smart bulbs   The source code of the script is available on  github  Please do check the repo and feel free to clone the repo. Let's get started by setting up the environment: Clone or download the repository to your local machine. Navigate ...
Post a Comment
Read more

Make use of JavaScript console methods

When I say JavaScript console methods, the one and only thing that hit most of our mind is console.log() and we use it a lot and only that some might be familiar with error() and debug(). Did you ever think of checking if there are any other methods available in console other than log? Most of us don't do that, but knowing those methods might have saved lot of our development time. In this post I will show you some of the console methods which will be very useful in our day to day coding. Log based on condition console.assert(assertion, log_message); To print something on the console only if the assertion failed - assertion can be any expression which returns a boolean. Note: In chrome this log will print as an error with message saying "Assertion failed:" with the log_message passed. In FireFox its a normal log message. Log number of occurrence  console.count([label]); If we want to count something, it may be a click, may be a callback, or event triggers. We do...
2 comments
Read more