How to create an online resume powered by Jekyll and GitHub Pages
In the past week, I have been researching a few interesting topics relating static websites hosted by simple options. Throughout this journey for more knowledge, I uncovered Jekyll, a static site generator that works smoothly with the GitHub Pages feature offered by the huge repository service.
While I didn’t have a concrete plan for these two things, I started browsing GitHub for Jekyll themes, in order to see what others have come up with and get a feel for the amount of customization offered by Jekyll.
I quickly found a simple resume template for Jekyll built by Joel Glovier. Immediately, a light-bulb turned on in my mind, as I recently started updating and refining my resume. Instead of juggling with .docx and .pdf files in emails, Google Docs, or Dropbox, I could easily host an online version on my GitHub profile, improving accessibility for both me and recruiters, while also highlighting my experience with the repo service.
The process wasn’t exactly the smoothest, so I decided to chronicle my journey so that others can have an easier time. As such, let’s dig in.
Setting up Jekyll and its prerequisites
First up, you need to install Jekyll and its various prerequisites, chief among which being Ruby. The documentation section of the official website is pretty well written but, seeing as how I am running Windows, I needed some specific help. Those running Windows 10 with the Creators or Anniversary updates can use the new Bash shell. Those with older versions can check out this guide.
After you set up everything, it’s time to fork and clone the resume-template repo from Joel Glovier onto your local machine. To do so, I recommend installing GitHub Desktop, which also includes the Git shell.
Customizing the template
Once you have the repository on your machine, it’s time to start customizing the most important files, starting with the _config.yml file. This includes the configuration details for any Jekyll site. In this template’s case, you can use it to show or hide various section, as well as change metadata like the title of your site.
After achieving this, you can jump into the _data folder to actually fill in the sections with your own information. The files have self-explanatory names and are in .yml format. You can edit them using Notepad/Notepad++ or other editors (I use Atom).
For extra customization, you can go into _layouts and edit resume.html to change the order of the sections, for example.
One important modification that I struggled with was replacing the limited set of icons that appear opposite your job title. Joel added just a few icons that, while good enough, weren’t relevant for me. I spent some time trying to add a new .svg icon for Medium, since I want to advertise my work here. In the end, things didn’t pan out, so I opted to just add the pretty handy font-awesome library.
As such, I went to _includes and appended in head.html the script link for font-awesome. Afterwards, in the same folder, I edited icon-links.html to specify, instead of the svg icons, the ones built into font-awesome.
To achieve the color change on mouse hover and eliminate the default link color for the icons, I also took a trip to the _sass folder to edit _resume.css. Here, I commented out .icon-link and inside .icon-link-item I added:
Last but not least, it seems that there is a small issue relating to the Education section of the template. As I specified in an issue sent to Joel, a paragraph tag lacks a necessary style specification, causing the summary to get appended to the degree name.
Putting everything up on GitHub and hosting on Pages
Once you have customized everything, it’s time to hoist it up on GitHub and let the Pages feature automatically host it for the world to see.
As instructed on the official website you must create a new repository titled <username>.github.io. In my case, this is andreidbr.github.io. Clone this repo locally. This is where my current lack of experience showed, as I just copied over the files and folders from the resume-template local folder. Note that you must not copy over the .git folder or the CNAME file. Commit the new files and your new website will be available at the address in the repo name. In my case, the resume is live at https://andreidbr.github.io/.
If you want to use a custom name for an external address, create a file called CNAME and write in the address where you want the site to appear.
Takeaways
After this experience, I can say that Jekyll is a pretty nifty static site generator that can be as complex or as simple as you want. By starting off with the template, I managed to learn some very useful things and obtain an online resume in the process. I also came to grips with GitHub and its Pages feature, so I hope this article helps others who want to do the same.
