Start a personal dev blog on your domain for free with Hashnode and grow your readership.
Get Started

I created a Jekyll Theme in 375 Minutes ๐Ÿ”ฅ

Last week I set up a Jekyll site with Github Pages (And wrote a tutorial too). Today, I thought it would be awesome to create a Jekyll theme.

It only took 375 minutes (About 6 hours) to learn from zero to create a minimal Jekyll theme.

It's now live! ๐Ÿ”ฅ It's free! ๐Ÿ†“ I named it Leaf ๐Ÿƒ

๐Ÿ‘‰ Github Repo ๐Ÿ‘‰ Live Preview

Screenshot

Time Management

To create this, I used tomatoes - the POMORODO technique.

1 TOMATO = 25 Minutes

It took 15 tomatoes for me to complete the task. Here's what I did in each tomato.

Tomato NumberWhat I did
1Learned how to create Jekyll Theme (Tutorial 1)
2Continued learning. There were many concepts to understand than I expected. (I'm new to Jekyll) - And, here's the 2nd Tutorial I referred. Those two articles showed how to get started.
3Still Learning and trying to get started with building the theme
4Officially started creating the theme ;) and finished basic markup (page, posts)
5Started Styling and finished 25%
6Set up Github Repo (jekyll-theme-leaf)
7Got stuck! Finding how to run Jekyll theme on Github Pages when it resides in a repository. Finally, found it. Styling... Adding Hyvor Talk.
8Going very nicely... Added comments with a customized color palette. Finished 50% styling.
9Styling header
10Still header (I got some distractions. Yeah, youtube)
11Styling Pages
12Styling Posts
13Designing Home
14Footer
15Checked responsiveness and finished!

After that, I worked without POMODORO for these steps.

  • Pushing to Github Repo
  • Setting up Github Pages for the repo.
  • Publishing the theme to rubygems.org.

Tools I Used.

  1. Code Editor - My default code editor is VSCode. However, I started this project in Sublime Text for one reason: I just needed to try sublime text. However, after a few minutes I switched back to VSCode mainly because it's what I'm used to. (And, it has an inline command line which I love)

  2. Timer - A timer is needed when you are working with a POMODORO schedule. I used my phone to do that. Another option is tomato-timer.com.

  3. SVG Background Background This beautiful SVG is taken from svgbackgrounds.com. Such a nice website! There are many other options too.

  4. Icon Leaf Icon The leaf icon is taken from flaticon.com.

  5. Screenshots and Editing - onpaste.com

  6. Comments I used Hyvor Talk for the comments for the Jekyll theme (I'm totally biased in this decision because I'm the creator of Hyvor Talk). However, I chose it because I can customize the colors of the plugin as I needed with a color palette. And, it's free up to 40k page views per month.

    // in _includes/hyvor-talk-comments.html
    var HYVOR_TALK_CONFIG = {
     url: '{{ page.url | absolute_url }}',
     id: '{{page.id}}',
     palette: { // <-- setting palette
         accent: "#86bb48", 
         accentText: "#080808",
         footerHeader: "#171616",
         footerHeaderText: "#656363",
         box: "#3A3A38",
         boxText: "#E0E0E0",
         boxLightText: "#AAAAAA",
         backgroundText: "#E0E0E0"
     }
    };
    
  7. Analytics - Google Analytics because why not?

Final Thoughts

So, this theme is very minimal but powerful and beautiful. The technical things are inspired by the minima theme, and I created the design (No, design tool used. Just writing HTML + CSS and testing ๐Ÿ˜Š).

If you like to use this theme, head over to the Github Repo. All the installation instructions are there.

I'd like to know your thoughts on this simple project.

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown ยท Publish articles on custom domain ยท Gain readership on day zero ยท Automatic GitHub backup and more

No Comments Yet