Chaitanya’s personal website | Courtesy Github Pages.

How to build your portfolio quick & free? 💻

Published in

Technology with Chai ☕️

5 min readDec 2, 2022

🎒 Github Pages, Jekyll, Ruby, Gems, Liquid

This 5-technology solution is all you need to get started with a basic portfolio [personal website] that you can parade around the world 🌏

Backstory ⏮

As a mentor at ADPList, I’m often asked about resume & how to build one’s resume. This becomes a daunting task for early-career professionals or university graduates, especially those who don’t have big-name brands on their resume.

Brands™️ like top-notch educational institutions [IITs/IIMs in 🇮🇳 , MIT/Harvard/Georgia Tech in 🇺🇸 , Oxford/Cambridge in 🇬🇧 , NIT Singapore 🇸🇬 , TU Delft in Dutch 🇳🇱 , list goes on] or world-famous multi-national conglomerates [🍎 FAANG/FAMGA à la Big Tech, MBB à la Big Three etc].

While name-dropping definitely helps you edge past your competition during the initial round [resume-screen], not having a big brand on your resume doesn’t spell doom and gloom either. There are countless examples of employees in big companies breaking the metaphorical “glass ceiling” through demonstrating consistent talent and expertise in the field of technology.

One such way of displaying your technical skills is by building a personal website. It is a double whammy — because through building your own website you can show the world 🌍 how great you’re at web development apart from collecting all your achievements together in one place.

A devil’s advocate 😈 would contest this later point by saying that LinkedIn does a great job of housing all the professional achievements together in one place “already”. However, I’ve two easy punches 🥊 to counter that argument.

I can’t stand out from the crowd with my LinkedIn profile as it’ll have similar appearance, look and feel 🤓
What happens when the world moves on from LinkedIn to the next big thing? 🤷🏽

Also, just personally, I feel in control when I know there’s some place on internet, I can call my own. It’s like owning the plot of land in Decentraland. But instead of “virtual world”, in the digital world and without having to pay whooping $900,000 🤑. One which is already adopted by billions of people 😏 [looking at you metaverse 👀 ]

All things said and done, I was convinced, since 2016, that there’s a value add in having a personal website. It took me a year to finally muster enough courage and collect enough motivation to go ahead and build it. Trust me, it’s less than 2–3 days of job to get a bare-bones website up and running. Of course, you’d have to spend a lot longer to add bells and whistles 🔔 viz. Google analytic integration, Dynamic content, Blogpost publishing integration, etc. But we can leave that for another day 😅. Without further ado, let’s dive into the stack.

Github Pages

Github Pages is a free, quick and easy way to realize your personal website dreams. I learnt about it from one of my peers back in 2017. I adopted Github Pages + Jekyll + Liquid and I’ve stuck with it ever since.

Ruby

Ruby is a dynamic open-source language. Ruby is the foundation [level 0] on top of which Jekyll and Bundler sit.
Github: https://github.com/ruby/ruby
Website: www.ruby-lang.org/

Jekyll

Jekyll is a blog-aware static site generator in Ruby.
Github: https://github.com/jekyll/jekyll
Website: https://jekyllrb.com/

Bundler

Bundler provides a consistent environment for Ruby projects by tracking and installing the exact gems and versions that are needed.
Github: https://github.com/rubygems/bundler [read-only since Nov 9, 2022]
Website: https://bundler.io/

$ gem update --system
RubyGems 3.3.26

$ bundle exec jekyll --version
jekyll 3.9.2

Liquid

Liquid is template / markup language. It’s also at times referred as a template engine. While the language [I prefer that] supports logic, operators and loops, the basic constructs for building anything meaningful, I believe it is a very constrained purpose-specific language. There’s only certain things you can do with Liquid. But it serves the purpose it was created for, to a great extent. It’s created by Spotify and head over to their blog to learn more.

Github: https://github.com/Shopify/liquid
Website: https://shopify.github.io/liquid/

5-min Setup

It’s a fairly quick, easy and painless process to hit the ground running. As a bonus, there are tonnes of articles/blogs by the official sources [Gihub, Ruby and Liquid] to unblock you in case of issues.

Local Development

Environment
Since this website is based on Jekyll, you’d need Ruby, Bundler & Jekyll installed on your machine

brew upgrade
brew install rbenv ruby-build
gem update --system
gem install jekyll bundler

Create, Build & Serve
First time you’d have to create a jekyll project

jekyll new my-awesome-site
cd my-awesome-site

Or you could just lift an existing jekyll folder on Github with Gemfile and build off of that. For e.g.

bundle exec <command> executes the command in the context of the current bundle. In other words, it ensures that the gem versions mentioned in the Gemfile are respected. For more, read bundler.io man page

bundle exec jekyll b
bundle exec jekyll s

On your Mac 💻, this is all you’d have to do to take your first step towards your personal website.

Parting tip
💡 If you want to add a new ruby gem, just do bundle add <gem>. E.g.

bundle add webrick

Next 📣

Go to https://pages.github.com/ & start with your Github repository.

Fin

Best part of doing all this is — its FREE!

It costs you “Zilch”. Zero.

Thanks GitHub for truly democratizing software development and programming.