How to create and host personal websites on GitHub — Complete with Google S.E.O
PART 1 — INTRODUCTION
Ever seen a some random developers or software engineer’s personal website with a link like “https://devname.github.io” and wondered how they got that domain or managed to create a personal website off GitHub? If so, then this post is for you. I’ll take you through the whole process of coming up with such a website from scratch.
Now, this post assumes you have some basic understanding of web development principles, concepts and fundamentals like HTML5, CSS3 and JavaScript if you’re to effectively create a super awesome page.An added advantage would probably be to have familiarity of GitHub web interface.If you’re reading this, I’m guessing you’re not really a GitHub power user, so I’ll make this tutorial as simple as possible for the newbies! :)
At the end of this tutorial series, you’ll have a firm grasp on how to create a personal website with a github.io domain, the .io domain is largely used for open source websites kind of like .edu is used for education related websites.The github part is for branding since GitHub will be hosting your website for free and bills have to be paid. A good thing to note is that GitHub Pages only supports static content.What I mean by this is, you can’t go hosting dynamic content like a live social media platform with a tonne of users. Sorry, no can’t do.But, what you can do is create and upload static content like single pages for your projects and repositories on GitHub pages.
So basically what you’ll need is:
- GitHub desktop application to push and pull changes you make to your site’s files online.Download it here.You can just use raw git commands instead of GitHub desktop if you’re familiar with how they work.This tutorial is meant for absolute beginners.
- A simple text editor, In my case I’ll be using Sublime Text which is really cool but there’s lots of other options to choose from like Atom, VS Code and Notepad++.
- I’ll be using Windows 10 operating system for this tutorial, so if you’re on Mac or any other Linux distro, I’m guessing you can find your way around.
Now let’s get this show on the road.
PART 2 — CREATING A GITHUB ACCOUNT
For you to create and host a personal website on GitHub, you first need to create an account on GitHub.Hey, I don’t make the rules.Here’s the signup link.It’s good to note that GitHub allows you to create a personal website with your specified username, all other sites like let’s say for your individual projects or repositories(basically directories) that you host from then on are going to have links that are slightly different from the simple “devname.github.io”.But we’ll get to that later on.
After creating an account, on the top right part of the web interface for GitHub, you should see a + sign just right next to your profile picture.Click on it.In the drop down menu that pops up, select the “New repository” option.You’ll be directed to a new GitHub webpage to provide a name for your repository.A repository is basically a directory, a fancy name for folders.In the new page provide a name for your repository in the format “yourexactusername.github.io” which will go into your website’s link.Anything other than your exact GitHub username is going to give undesired results for you but will still work.The link to your site might end up being too long, and nobody digs that.
In my case, there already exists a repository with my username, that is “antonymuga.github.io” so I can’t create another repository with the same name.But in your case, instead of the warning showing up, a green tick should show up after you finish typing your repository name like pictured below.You can leave out the description field empty for now.It will come in handy when you want to easily access the link to your website later on.
Now we have our webpage repository up.If you’re using a fresh GitHub account, the number of repositories on your profile if you click on your profile picture should now have a count of 1.
PART 3 — CONFIGURING YOUR SITE REPOSITORY
If you now go to your profile, that is if you’re using a fresh GitHub account, and click on the repositories tab, a list of all your repositories should show.In your case, only one repository called “yourusername.github.io” that you created from the steps outlined above.Since I already have a repository under my username on GitHub, I’ve created a dummy repository called “yourusername.github.io” just to show you how everything should now look like.Click on the repository and a page that looks like the one below should appear.
From here, you can see insights to your repository, pull requests, and projects. Our concern is the settings tab, just right under the unwatch button in the image. Click on that settings tab and you’ll be taken to another GitHub page with all the configuration and settings options for your new repository.
Scroll down the above settings page until you get to the GitHub pages options, pictured below.
Now, we are just getting to the fun part.Your website is just about to start taking shape.On the GitHub pages options, click on “Choose a theme” which is basically selecting a template for your website, later on we’ll upload our own individual website files and discard the ones from the template, so don’t worry about that.Once you click on the choose a theme button, you should have the GitHub page below.
Select any random theme because, quite honestly, it really doesn’t matter.Then click on the green “Select theme” button on the right side of the screen. I’ve chosen the “hacker” theme which is the 8th option on the list.Your page should now look like the one below after selecting a theme.
If you’re here, that means you followed all the steps correctly.Hi five your imaginary friends you nerd! :)
PART 4 — UPLOADING YOUR WEBSITE
Coming soon, still in drafts!
