An Exercise in Static Sites

As you know by now, I started my first website recently. And I will take you through the decision-making steps that landed me in the static-site side of the web!

The first thing I did was enroll in web development courses on udemy. And googled ‘how to build a simple blog’ quite a bit :)

A lot of options came up. The chief among them being Wordpress. In fact, it seemed to fit all my needs. So I had decided on it. And I moved on to take up the courses on HTML/CSS/JavaScript & Git/GitHub.

The next thing to look at was: Should it be a static site or a dynamic one? In fact, there is a huge debate on that one. Check this Quora thread, it’s totally meant to confuse you :)

The decision hinges upon what you need a website for?

I needed a blog, updated a few times a week or so, which focused on the content with minimal upkeep. For my needs, a static site was good enough. These two links(1 & 2) pretty much convinced me to go static!!

As I progressed through the courses I realized I needed a place to get my hands dirty and get complete control over the data in my blog, so that I can play with the look as I wished & code it accordingly. That’s when I stumbled upon Jekyll.

To get an idea of how Jekyll sites look, take a look at this post from qrohlf’s site. Doesn’t it blow your mind?! The look is minimalist and yet quite stylish. And the focus is on the content. I love the way content gets highlighted in Jekyll based sites. It’s about simple presentation!

Once I decided to use Jekyll for my static site, I needed resources to quick-start my website development.

Installing Jekyll

The first place I looked at was the official website. This will be your go-to place for any reference. So keep it open whenever you are working on anything Jekyll-related.

Next, I needed to install a few things for Jekyll to work. If you are installing Jekyll on a Linux machine, the above link has all the relevant details.

If like me, you are working on windows, go here for Installation instructions. The first thing to install is Ruby and its DevKit. You can follow the instructions in the above link, they come with complete details and screenshots! If you have reached the end of the Jekyll installation successfully, congrats! You are all set to build your own website :)

Installing Grunt

Grunt, put simply, is for automating stuff.

Stuff that you don’t want to be doing every time you build. It’s a JavaScript Task Runner which requires node.js to run and works really well with Jekyll for automating tasks like image compression, compiling/uglifying the main.js file and so on.

So, first download and install node.js. The npm installer will come bundled with it. You can use this link to install Grunt.js.

Note: Make sure you are able to run commands on these packages. If not, you may need to add the bin/install folders of these packages to the PATH in windows.

Get a Jekyll template

Getting a simple Jekyll template will make it easier for you to understand how Jekyll works and focus on the content of your website faster. I recommend going with a template for the sheer pleasure of everything working out of the box!

There are quite a few places where you can get a Jekyll template. These are my favorite sites:

• Made Mistakes by Michael Rose.
• Jekyll Themes by Matt Harzewski.
• Jekyll Themes is a directory of best-looking themes for Jekyll blogs.
• Free/Premium Themes by Tyler Cubell.

Go with a free simple template that you like. Download the template to your workstation. Unzip it and put it in a folder. Run the build and serve commands on the folder. Once you do, the template will be published to the default url, which is usually localhost:4000.

You just used Jekyll to build a static site!

----------------------------

Thank you for reading!

I would love to hear your thoughts on the same, please leave comments so that we can continue the conversation☺

A version of this article is on my personal blog :) I have just started blogging in my personal time and I do so on my website as well as on Medium. Please do share your feedback!