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!!
And here's the repo:
ChaelCodes
/
chaelcodes.github.io
Portfolio site for ChaelCodes. Blogs, podcasts, and talks hosted here!
chaelcodes.github.io
This is a Portfolio site for ChaelCodes! You can see it at chael.codes.
Running the site Locally
Run bundle exec jekyll serve --livereload
Run bundle exec jekyll serve --livereload --port 5000 if you need to free up port 4000.
Tools used
Theme is type-on-strap
Top comments (2)
Jekyll is so cool for building static web pages. I used for my personal website and twice for some companies. Great choice!
Thanks! I really like how easy it is, and how you can scale from pure html to templated content.