A simple tutorial to set up an about.me site on github

I used to be a big fan of about.me: they enabled me to create a personal home page far better than what I could do. Unfortunately they stripped out some of the things that made the page look great, and when they did that, I decided to make my own about.me page, using free hosting on Github.

First off, here is what my page looks like: http://blm849.github.io

Here’s the steps I took to make it.

Before you start, here’s what you will need if you want to follow my steps. You’ll need:

• a text editor. Notepad or Textpad or vi will all work fine.
• some knowledge of HTML. Not too much. If you just follow the steps below, you should be fine. If you want some quick knowledge of HTML, see this: HTML Tutorial
• some knowledge of  git and github.com. Again, not too much. If you follow the steps below, you should not need any. If you want some quick knowledge of git and github, see this: How to learn github fairly easily | Smart People I Know
• Some words describing yourself that you want to have on the site.
• An image file of yourself that you would want to serve as the background of the site. The one I had was a simple photograph I took with my smartphone.
• A working file directory on your computer to hold your files.

Here are the steps:

1. Set up your site on Github. To do this, follow the steps, here: GitHub Pages – Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live. Check it out. Use your working file directory to store the files. Once you complete the steps, and pointing your browser at http://username.github.io works, you are going to want to personalize the site. (Note: username = the name of your userid. e.g. my userid on github is blm849)
2. Use a repository from someone else to make the job simpler. To create my site, http://blm849.github.io, I used a repository from here: https://github.com/weightshift/The-Personal-Page. It’s great. I simply downloaded the ZIP file, unzipped the files, and copied and replaced the files in the working file directory. In your case, I would recommend you take my repository and my files and modify them. I’ll explain in a bit. My repository and my files are here: https://github.com/blm849/blm849.github.io. Click on the “Clone or Download” button and then click “Download ZIP” to do this. Like I said, download the zip file, unzip the files, put them in your working file directory.
3. Also, copy your background image (e.g. background.jpg) into the working file directory.
4. Now edit the index.html file in the working file directory. Make the following changes and then file index.html:
   1. On line 5, change the text between <title> and </title>. This text will appear on the browser tab when someone opens your site.
   2. For lines 41-51, replace the lines I have in here with the words describing yourself. The only HTML I used here is:
      • the <br> tag to add some blank lines before the line “My name is….”. I found it looked better when I did this.
      • the <p></p> tag to format the words into paragraphs. Again, it makes it more presentable.
      • the <b></b> tag to make my name bold. I wanted it to stand out. If you don’t, remove those tags.
      • the <a></a>tag to have links to other web pages about me. If you don’t have links elsewhere, you can remove those.
   3. On line 58, replace “blm.jpg” with “background.jpg” (assuming that the file name of your background image is called background.jpg. If it is called something else, use that file name instead.)
5. Once you have made the changes and saved index.html,  open it with your favourite browser. (To do this, right click on the file and select “open with…” and pick your browser.) Check to see if the words are correct and the background image is correct and the formatting is correct. If not, you will have to go back and edit the file and fix your errors.
6. Once you are happy with it, do the following:
   1. Delete any background image files in the working file directory that are not yours (blm.jpg and nh_bg.jpg)
   2. Enter: git add –all
   3. Enter: git commit -m “secondary commit with my own information”
   4. Enter: git push -u origin master
   5. Point your browser at http://username.github.io and make sure it works.

That’s it!

One final note: I recommended using my repository and not the original one I worked on. I did that because I had some problems with displaying my page on my iPhone 6s plus. I added some files and tweaked the index.html file to get it to work. By using my package and my index.html file, there are less changes for you to make, I believe. That said, I am grateful for the code from the original repository and I am making sure I credit the owner of that repository (as should you).