DEV Community

Cover image for Research for a Jekyll Profile on GitHub pages
Rachael Wright-Munn for New Relic

Posted on • Updated on • Originally published at

Research for a Jekyll Profile on GitHub pages

I have too many links and social pages. I can't even keep track of them all. What if I could store them all in one place, for free, and build the site using my favorite language? Let's build the technical plan!

Initial Requirements

I need to share my Twitter, GitHub, Twitch, TheRelicans, and Dev.To. (And BitBurner.) I also want to throw random webpages and utilities on it without thinking about hosting providers or tech stack. Then my blogs need a canonical source. I plan to cross-post to Dev.To and, so a blog format that can easily transfer is important. We can lorem ipsum some space with a bio too! I bought a domain, so let's show everything there instead of ❀️


First, I checked out the Jekyll tutorial to get an idea of how to build a site, and make sure it'll meet the requirements.

Posts are markdown files stored in a _posts directory. This feels very straight-forward, and my blog posts will all be tracked via git.

Liquids are tags used to safely embed external content in posts and pages. I've used them before with Forem (aka Dev.To). These will help with embedding Twitch and talk slides. The markdown format and Liquids mean it's easy to convert posts from Jekyll blog to Relican blog. I'll only need formatting changes for the slides and Twitch liquids.

Jekyll Plugins

  • Rubocop-Jekyll will check our styles. I also want to try out Github Actions for the automatic linter since I'm building everything in GitHub.

  • Jekyll SEO Tag - You know how Google and Twitter have descriptions when you link to them? Those come from metadata tags, and this plugin will help us set them up.

  • Type-On-Strap I'd like a theme that's got top-level nav, because I don't have many pages to navigate between. This one is well-maintained, has over 450 stars on GitHub, and the image have a parallax effect, which I really like.


GitHub's documentation has an entire section dedicated to documenting GH Pages and Jekyll. The short version is that you make a gh-pages branch, name the repo, and replace the jekyll gem with the github-pages gem. Then you configure GH pages in GitHub.

Custom Domain

Once I've got the site up, it's time to think about the domain. I picked up on Namecheap, which is a fabulous domain, and right now, it's a blank page, but we can fix that! First, we'll have to configure a CNAME on GitHub, then we'll add that new CName record to NameCheap.

Information Architecture

Plugins, tools, and deploys are all great, but they're nothing without the content! I want to keep things as simple as possible, so we're starting with only 2 pages.

  • Index page contains social links and bio.
  • Blog page lists all blog posts.
    • I have some old blogs, but I'm not migrating them. They can gather dust in the internet archive, k'thanks.

I can foresee a future where I gather Twitch + Youtube + Blog content around games I'm playing, but that's the future! Not for today! (I think a Games directory with a post page for each would be cool though...)

We built this on Twitch!!

And here's the repo:

GitHub logo ChaelCodes /

Portfolio site for ChaelCodes. Blogs, podcasts, and talks hosted here!

Top comments (2)

cescquintero profile image
Francisco Quintero πŸ‡¨πŸ‡΄

Jekyll is so cool for building static web pages. I used for my personal website and twice for some companies. Great choice!

chaelcodes profile image
Rachael Wright-Munn

Thanks! I really like how easy it is, and how you can scale from pure html to templated content.