The Relicans

Cover image for Research for a Jekyll Profile on GitHub pages
ChaelCodes
ChaelCodes

Posted on • Updated on

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 therelicans.com, 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 chaelcodes.github.io. ❤️

Research

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.

Hosting

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 username.github.io, 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 chael.codes 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!!

GitHub logo ChaelCodes / chaelcodes.github.io

Portfolio site for ChaelCodes.

chaelcodes.github.io

This is a Portfolio site for ChaelCodes! You can see it at chael.codes.




Discussion (3)

Collapse
wyhaines profile image
Kirk Haines

This is awesome. I love Jekyll.

A couple of handy plugins that may have flown under your research radar are jekyll-sitemap and jekyll-feed. They produce a sitemap.xml and an atom syndication feed of your blog posts, respectively.

Collapse
juliancheal profile image
Julian Cheal

Great job, and looks great.

You may also be interested in bridgetownrb.com/ if you've not seen that before. I don't think it can be hosted on Github pages unfortunately bridgetownrb.com/docs/deployment

I think it's a fork of Jekyll, it's pretty nice, I've been using it and Tailwind to build a site. Although I've not yet finished it, so kudos to you for finishing yours all while on stream!

Collapse
eduardoklosowski profile image
Eduardo Klosowski

I do the same, make a blog on GitHub Pages for canonical source of my posts in dev.to and the relicans, but using zola written in rust.