Github pages is another great feature from github.com which provides geeks to host their content on github for free and fast. It is also an ideal platform for new bloggers who are planning to write blogs for personal blogging.

What is Github

Github is a code hosting platform for collaboration and version control using git which is quite similar to SVN and Mercurial.

Github platform allows us to work with other developers together on the common development projects.

In addition, Github does have its own pandora box of tools, for instance, Github Pages allows GitHub users to quickly set up blogs for personal blogging or just make a quick intro website of their software.

Though we are going to talk more about Github pages all in this blog, Therefore It would be much easier for you to sign up for Github at https://github.com and work on it as we go through this post.

Github_account

Some of the essential components of Github are:

  1. Repositories for your code.
  2. Branches for various features you want to work on.
  3. Commits to maintaining and managing the changes to your code.
  4. Pull Request for collaboration among developers.
  5. Git (A version control software which Github uses.)
  6. Integration with CI/CD using making third-party tools.
  7. If you want to capture some notes, simple head to gist.github.com.
  8. You can create your own software WIKI with github.com
  9. Github Issues helps you create issues and help with Bug Tracking.
  10. Github Pages for Personal Blogging and Showcasing portfolio or just and information site.

git-scm is a great guide to learn more about git, make sure to download your copy.

Now, what is Github pages?

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

Github.com

In other words, with Github pages, we can host a static HTML site, like a portfolio, a personal blogging site or just an information site and which does not require a lot of content-changes very regularly.

Pelican and Jekyll are a very good example of a static site generator using python and ruby, there are a number of static site generator available in the market and you can pick and choose one from your liking.

GitHub Pages doesn’t support server-side code executions such as PHP, Ruby, or Python.

To avoid anyone using GitHub Pages for commercial purpose as free hosting service they have provided specific usage guidelines for this and are subject to the following limits, but for new users, it is ideal for personal blogging or a building a small portfolio site:

  • GitHub Page’s source repositories have a recommended limit of 1GB.
  • Published GitHub Pages sites may be no larger than 1 GB.
  • GitHub Pages sites have a soft bandwidth limit of 100GB per month.

Limitations

GH Pages sites are subject to the following usage limits:

  • The source repositories hosting your blog have a recommended limit of 1GB and anything above this will not be published.
  • Published sites cannot be larger than 1 GB.
  • Your hosted sites bandwith is also limited to 100GB.
  • And your site will only be built 10 times in an hour if you are using Jekyll or pelican as a static site generator.

While you have chosen to host your content on the GitHub pages. Please make sure to follow these guidelines and must refrain from:

  • Content or activity that is illegal or otherwise prohibited by our Terms of Service or Community Guidelines
  • Violent or threatening content or activity
  • Excessive automated bulk activity (for example, spamming)
  • Activity that compromises GitHub users or GitHub services
  • Get-rich-quick schemes
  • Sexually obscene content
  • Content that misrepresents your identity or site purpose

Why Github Pages

GitHub pages use static sites technically, a static website is only HTML and CSS and doesn’t involve scripting. To change the content which appears source code needs to be edited directly.

In simple words, the content of the website will remain the same for every visit like for personal blogs where we jot down our thoughts and it remains constant. whereas for dynamic sites the content keeps on changing. For e.g. the news feed of facebook is a dynamic site, but the book review site can be a static site since the content remains constant for some time. There are many reasons which make a static site desirable than a dynamic site as follows:

1. Security

Static websites are comparatively safe than dynamic sites in terms of security as they don’t rely on any CMS plugins and they are mainly HTML/CSS based. We can use API calls and write Javascript functions to handle dynamic content when using Static Sites. On the other hand, dynamic sites such as drupal and WordPress and other CMSes are prone to malicious attacks due to multiple content sources and many plugins, and most of the time improper maintenance and upgrades.

WP WhiteSecurity report states that around 70% WordPress site risks of getting attacked and hacked mainly because of lack of proper maintenance and infrequent upgrades. Sounds scary.

2. Reliability

“The connection could not be established.” Does this Sounds Familiar!! This occurs primarily because of database errors. Serving just basic HTML files makes it easier to host them anywhere with ease like on a CDN. Hence, whenever there’d be an attack on the server, the static website is just redirected to other closest nodes, unlike its dynamic alternative where the website might go down for a few hours.

3. Speed

The absence of the middleman/database makes the static site much more speedy and easy to load. A static site is ten times faster than a dynamic site that is built with a CMS. Another reason for a static website to run faster is that it can be served from the node closest to the browser.

Page Load Time

According to research by Kissmetrics, about 47% of people expect the website to load within 2 seconds, and a whopping 40% of people will not wait for the website to load for longer than 3 seconds. Hence, getting a static website also helps in getting more traffic by reducing the abandonment rate caused due to slow loading. 

kissmetrics.com

Hosting and Price

Static websites have basic HTML files that require less space making the hosting of these websites cheaper to that of dynamic websites. Organizations with static websites save up on the costs and channel those resources to integrate Git or automated builds to incorporate the latest changes in the system. Also, if you are new to personal blogging, this is an ideal place to start because of its almost nil pricing. Though you still have to register your domain in case you want to use your own custom domain and SSL.

Scalability

What to do when your website is finally up and running? Handling massive traffic on a dynamic website might be a cumbersome process as it requires complex code playing on the server. Basic static websites with HTML files can be easily scaled up by just increasing the bandwidth.

Technological advancements.

There was a time when online store websites would have to rely on dynamic websites for their organization and integrate those complex coding and deal with tedious scripting.

With tools like Magento, it is possible to have a static website for shop-centric businesses. A Java-script based shopping cart, called Snipcart, integrates e-commerce site’s functionalities to a static website, eliminating the need for dynamic websites. Snipcart dashboard can manage sales and product inventories, and its API can be integrated with shipping service providers and inventory management software systems as well.

With some static generators and static website hosting platforms that allow Github integration, global CDN, SSL certificates along with free custom domains. Hosting providers such as Netlify, go up the notch and even deal with redirects such as 404 errors, proxies, and even password protection.

Therefore, it is safe to say that static websites have made a terrific comeback and they are here to stay with more advantages than drawbacks. As a website is a digital face of the business, organizations must take into consideration all the factors and necessities of their business website and must assess all the new tools and platforms before making a website.

Requirements for hosting on GitHub Pages

  • Register for a GitHub account at https://github.com
  • Create your personal blog repository and enable gh-pages for the repository.
  • you can access the repository as <reponame>.github.io

How to Do GitHub hosting.

Create a repository

Create repository

Head over to GitHub and create a new repository named username.github.io, where username is the username (or organization name) on GitHub.  If the first part of the repository doesn’t exactly match your username, your site won’t work, so make sure you do it right.

Clone the repository

Go to the folder where you want to store your project, and clone the new repository:

~ $ git clone https://github.com/username/username.github.io    

Hello World

Enter the project folder and add an index.html file:

~ $ cd username.github.io
~ $ echo "Hello World" > index.html

Push your changes to github

Add, commit, and push your changes:

~ $ git add --all
~ $ git commit -m "Initial commit"
~ $ git push -u origin master

…voilla you’re done!

Fire up a browser and go to https://username.github.io.

Once this is done learn to set your custom domain and enable SSL on it.

Published by Om Prakash Singh

DevOps Engineer experienced in Architecting, Automating and Optimizing large infrastructure, Proficient in configuration management tools, and in developing CI/CD pipelines.