How To Host a Free Personal Website using Github

GitHub, the online git repository hosting service, has a feature called GitHub Pages that lets you host free static websites. Along with GitHub Pages, they have the GitHub Education Pack which has lots of goddies, such as a free web domain complete with an SSL Cetrificate from NameCheap. Once we put these things together, we can get a free website with a personalized domain.

To get your site up and running, you need to do the following,

1. Get a GitHub account

All you need to do is go onto the GitHub’s main website github.com, enter a username, email and password. Once you’ve verified your GitHub account, go to settings Settings and on the Email tab, add a .edu email address.

2. Create an empty repository called <username>.github.io

Switch <username> with your username. Also, make sure that the repository is public or it won’t work.

3. Make your website

Be creative with HTML, CSS, JavaScript and other fancy frameworks you see fit or take this wackos template or any other template and change things. This most important thing you must have however is

  • A resume
  • Links to online profiles/portfolios like Dribble, Intructables, Twitter, GitHub, LinkedIn etc.
  • A list of projects or a place to find them
  • A short description and
  • Contact information. How is <bigbilliondollarunicorncompany> suppossed to let you know that they want you as an intern if you don’t give them an email?

My first website was really plain, but it did it’s job.

4. Create a local git repository

Get Git on your machine from here and configure it by following these instructions. Once you’ve set that up, open up git in the folder where you created the website. In the git bash shell type the following commands

git init
git commit -m -a “”

git init initializes a git repository. git commit -m -a "" creates a checkpoint with all files using the ‘-a’ flag. the ‘-m’ flag lets us create a commit message () quickly. If you left out the ‘-m’ flag, you’ll get an editor (vi) where you will type your message.

With that done, type in these commands

git remote add origin https://github.com/<username>/<username>.github.io.git
git push -u origin master

git remote add origin https://github.com/<username>/<username&gt;.github.io.git adds a remote repository called origin at the location https://github.com/<username>/<username>.github.io.git. git push remote origin places your code files onto the online git repository.

Once you’ve typed all of that, choose a web browser and type <username>.github.io and voila! Your personal website is now live.

5. Unlock your GitHub Education Pack and get that free domain

Go to the GitHub Education pack website, login and find the to the NameCheap link. Once there, login and get your .me domain. Add a file called CNAME on the online GitHub repository and follow these instructions.

Within a few hours, you will be able to go to your personal website using the free domain you got from NameCheap.

If you need to make changes to your website, use the command git pull so that you can merge the changes into the local repository, commit and push. For a slightly better tutorial, follow these instructions.


Wow, January is nearly over and I have made 5 blog posts this month. To be honest, my articles suck have a lot of room for improvement. Next week, I’ll reflect on my blog and my learning progress. I’ll also come up with ways in which I can improve my blog posts and learning process in the months to follow.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s