QuanticDev

QuanticDev's Engineering and Software Development Resources

Home Shop View on GitHub

How to Set up a Free Website with GitHub Pages & How I Created QuanticDev.com

I have recently published quanticdev.com using only GitHub Pages and markdown and decided to create a guide to preserve this knowledge in the form of an article so I can reuse it in my future projects. GitHub Pages is a free and a pretty good hosting service. It is an add-on for regular GitHub repositories, and you can host your website as well as code and other things in one repo, which is pretty good. I must warn that GitHub Pages is intended for techies. If you want something much simpler, go with Google Sites, or Blogger.com, or WordPress. In the first part of this article, I will discuss the strengths and weaknesses of GitHub Pages. In the second part, I will deploy a brand-new website using GitHub Pages and simple markdown. Everything will be done through GitHub’s UI and online code editor. I will also demonstrate a sample React website hosted on GitHub Pages.

Table of contents:

Resources

You can find the video narration of this article on YouTube: https://www.youtube.com/watch?v=jPhmR3TiGq8

Video has additional tips for each principle discussed. If you want to read the comments or leave a comment, do so under the YouTube video. If you want to contribute to the article, make a pull request on GitHub.

Free website hosting:

QuanticDev.com Intro

I host quanticdev.com on GitHub Pages, and here is how it is looking right now on mobile.

quanticdev.com mobile

After I published, I made over a hundred changes to the website and every time it got deployed with no problems. I have the source code of the website along with the articles on a public repository on GitHub.

quanticdev.com github source code

All the articles are written in markdown so people can easily contribute to it. You can even edit the articles directly on GitHub’s UI.

Currently, quanticdev.com has a small number of regular visitors, and it has been working a treat. Recently, one of my articles reached the front page of Hacker News and the traffic to my website exploded.

quanticdev.com google analytics

Even then, I had no hiccups, and GitHub served my website with no problems or slowdowns.

I have also been hosting my personal website, soygul.com on GitHub pages for several years now, and it has also been working perfectly. I have all my posts as simple static HTML pages and had no problems with it up to this point.

Why GitHub Pages

Most tech people already use GitHub in one way or another. Open-source software, hardware schematics, etc., a lot is hosted on GitHub. If you are already using GitHub, you can set up your website without needing to learn any new tools. If you were to use another host, you would have to learn their tools and way of doing things which would introduce complexity to your workflow. Now let us check out the advantages, disadvantages, and alternatives to GitHub Pages.

Advantages

Disadvantages

Alternatives

GitHub Pages Setup & How I Created quanticdev.com

Now that we know what GitHub Pages is and what is it not, let us go ahead and deploy our first site on it from scratch.

GitHub Pages with React

If you want more information on React + GitHub Pages, documentation link is in the description below.

My Recommendations

Try to use plain HTML if possible. Markdown is also a good option, but it also adds complexity as markdown pages will be rendered through Jekyll. React and other statically compliable frameworks will give you the most flexibility, yet they are most maintenance intensive. If you are not a developer, simply use Google Sites, Blogger.com, or WordPress.com.

Conclusion

In conclusion, GitHub Pages is an amazing and free tool for developers and technical people who want to put up static websites with minimal work. If you need anything else, it has good alternatives too. As always, write down your requirements before you begin any new website project and see if your hosting provider satisfies them. If GitHub Pages satisfy your requirements, it is great, and I highly recommend it.