I have started teaching how to make websites for budding web designers. I have posted the playlist here. Take a look. I have started off with topics like ‘hosting websites on Github’ ‘how to use github’ ‘github web hosting’ etc.,

Why teach Github Pages ?

While I was learning Github Pages, I used to go through YouTube videos. But there was not a single guy who teaches it without using Command Line Interface(CLI). When we run a command on CLI, the output may not be the same for everyone. It depends on the previous installations, dependencies, and a correct PATH variable etc. For starters, CLI is a hard nut to crack. So I wanted to make it easier and decided not use CLI in my videos. Everything is done through GUI .

I see a lot of blogs providing useful information on Github pages and Jekyll. But in my blogs, I want to provide step by step instructions for everything without missing a single point. This is what I expect from a blog or a documentation. So that is what I follow.

Reading this in 2024? below content may seem irrelevant. Github has released an update where gh-pages branch is not necessary anymore!

What is Github?

Github is a Version Control System. It keeps your data and tracks all the changes you make to it. If that is not a good explanation then consider this example.

Let’s say there is a box. Initially you keep lego blocks in it. Then after some time you take the help of your friend and make a house out of those blocks and keep it back in the box and after several days you break the house and build a bridge out of it and keep it in the box.

But at this point you realize that the house was nicer than this bridge. Thanks to the box, it remembers the exact way how you built the house. So in no time you can get back to the house model.

Now, the box has several compartments in it. One of those is a live compartment. If you make a Robot out of your legos blocks and keep it inside the live compartment then the Robot gets to life and starts walking.

The box is GitHub, the live compartment is Github Pages and legos is your code. When you put a website code (html, css, js) in Gihub Pages, website gets hosted!

With the new update, GitHub allows us to host any branch as a GitHub page!

Many web developers are not familiar with Github. They struggle to find a reliable hosting service and they may end up paying few bucks which is not necessary when you have Github Pages for the rescue. You can host your website in minutes for free!

Read my tutorial on how to host a website on github. and then sync a complete website using this tutorial.

Making it simpler has helped a lot of people to start off with Github. I’m glad I helped. I got a very positive response for my efforts. A few of the feedbacks are in the screenshot below

Check out the playlist at the bottom to see more comments.

Another thing I found very difficult was choosing the right tools for web development. There are some tools I recommend for new web designers

Brackets - an awesome code editor. (recommended plugin - emmet)

Prose - an awesome online code editor.

Github Desktop - to sync files with your repository.

Chrome Browser - for its ‘inspect’ feature and JavaScript v8 engine.

w3schools - they are the best at teaching how to code.

I hope you are wondering why Sublime text is not included in the list. I used to prefer Sublime text over Brackets! But for my blog posts, I needed a plugin to count the words. It was easy installing it on Brackets. Moreover, Brackets has live preview option! And also, in-line editing makes it better than any other text editor.

Github Pages is comparably faster than conventional web hosting services for static websites. But, Github cannot execute files in the server. So php files will not run in Github. But you are good to use HTML, CSS and JS.

Jekyll static site generator is another boon to web designers to host their blogs or single page websites. I have created many blogs using Jekyll. Actually, this blog is completely generated using Jekyll! It is very stable. Uptime of the websites depends on Github Servers. As an established company, Github is always up. I have not faced any major issues so far. I think years ago, one time, my blogs were down for a few seconds.

Finally, what I suggest for new developers is to get familiar with Github and contribute to the community. Only after making hundreds of mistakes, one can learn to code better. Make mistakes, correct it and learn while doing so.

Thank me later