Hi! I just created my github.io page and I want to explain, step by step, how I set this thing up. Notice that I will not post screenshots, but will try to be as clear as possible. I might skip a few basic stuff you can find on Jekyll or github’s pages.

First things first, I needed to create a repository called marcosalles.github.io. I went ahead and, already planning to use Jekyll, selected the .gitignore file for Jekyll from the dropdown menu. I then cloned the project on my computer and entered its home directory.

hub clone marcosalles/marcosalles.github.io
cd marcosalles.github.io

The next step was to install Jekyll and setup a new project on my repository folder. Bear in mind you need to have ruby and rubygems already installed on your machine.

gem install jekyll
jekyll new --force .

I needed to use --force because my repository already had the README.md and .gitignore files created by github, and Jekyll only allows you to create a new project on an empty directory.

At this point I had everything I needed to deploy, but I wanted to change the website’s title and tweak the links a little bit, so I opened a file called _config.yml and changed everything I wanted. I also added a facebook_username property. By default, Jekyll links to your github and twitter pages, and I wanted to add a facebook link.

I then ran the command jekyll s -w, which launches a server at localhost:4000 with a watch flag for the source files, so I didn’t have to restart the server at every page modification. I wanted to remove the blog posts from the homepage, so I opened the file index.html and moved the content about the posts to another file (blog.html), taking care to set the permalink property as /blog/. I then noticed the new page blog had already showed up on the links list on the top-right corner, and clicking it took me to the mock blog page. Awesome!

The next step was to remove the about page and turn it into my homepage, which was rather easy. I basically renamed the about.md file to index.md, changed the layout property to default and the permalink to /, then removed the index.html file. Wrote whatever text I wanted, title and done!

At that point I was satisfied enough and pushed the updated content. Whenever you push to github, your personal page is updated immediately, so be smart not to push something broken.

git commit -a -m "some commit message here"
git push

That’s about it! Another few things I did here:

  • create a svg file with a gray Facebook logo much like the default github and twitter ones, and add a footer linking to my page
  • use the same icons to create sharing links for each post’s page
  • update the rss feed file to correctly feed the blog posts

If you have any questions, feel free to ping me!