After migrating my website/blog to Jekyll on GitHub pages I was left with this lingering feeling: The theme I was using felt too "stock/off-the-shelf" even after a few color tweaks. I gave customizing the theme a try instead of coding it from scratch and learned a thing or two along the way.
Minima
Minima comes as the default theme for GitHub pages. I like the clean look it has and it works pretty good on different devices, so I kept it despite trying out other popular themes out there.
Adapting the default colors was straightforward using CSS. Other more specific changes I wanted to implement required a little more research though.
Jekyll Basic Components
I learned about some of the building blocks of static sites built with Jekyll (besides the obvious markdown and CSS files)
-
Pages are declared in the root directory and represent a static page in the resulting site. Some examples are
index.md
,about.md
,404.html
, etc. -
Layouts represent the structure of your pages (or posts) and each page (or post) defines the layout to be used in Front Matter. This allows you to have your posts with the same structure by using the
layout: post
, also static pages likeabout.md
and others can use thelayout: page
, etc. - Includes are just like reusable partials. For example a footer that's reused on every page, usually referenced from a layout.
Where's everything? Probably GitHub
In short, if it's not in your project's directory go check the theme and see if it's defined over there. Some examples of this idea in practice:
- Let's say you go inside
about.md
and see it's set to render using thelayout: home
. How do I figure out the variables I have at my disposal?-
Go check the source and you'll see the variables you can customize (add them in
_config.yml
).
-
Go check the source and you'll see the variables you can customize (add them in
- How do I go about changing, for example, the footer of my site?
- Again, check out the code of the original footer on the theme's repo and redefine
_includes/footer.html
with it. You're now free to edit as much or as little as you need.
- Again, check out the code of the original footer on the theme's repo and redefine
The repo's README has a thorough walkthrough on customization.
Conclusions
While working on my site I was constantly browsing through the Minima GitHub repo, you can do the same regardless of your theme of choice.
Talented people worked on themes that are both aesthetically pleasing and functional (responsive). Why not just add a little spice on top of that great foundation instead of half writing something from scratch?
visualcosita.com is the result of my attempt to switch it up a bit. It will forever be a work in progress, but I'll focus more on the content rather than the site itself for a while now. Pura vida!
Top comments (0)