Blog it easy with Jekyll

We are a small team, so we are always trying to improve how we spend our time on every task and blogging is not an exception. Previously we had our blog site in a well known CMS platform provided by our hosting provider, worked well for a while, but sometimes it was just painful to manage (specially by those updates that sometimes broke some functionality) and sometimes was even funny receive messages from our customers that our site has viagra ads among others (no kidding).

Then we met Jekyll and we simply love it for these reasons:

Easy to manage. Once you have everything set up maintaining your site is quick and easy. Additionally you could have version control using your favorite SCM and get your team involved easily.
Fast. I know this depends on much the content you have, but the same content in any CMS compared with the static pages generated by Jekyll won’t have comparison.
Secure. Since there is no database involved with Jekyll to handle your site, there is not risk to be hacked at that level.

For those interested in give it a try, these is a summary about the minimal steps required to get your blog up and running with Jekyll.

Installation

The following steps are based on the following environment over macOS Sierra:

Step 1: Install Jekyll

$ gem install jekyll

If everything went well, now you are able to see the version installed running the command jekyll -v

Step 2: Create your site

$ jekyll new yourAwesomeSiteName

This will create a folder with the basic folder structure and files to allow you to run the site immediately without any change required. If you want to run your site use: jekyll serve by default will be listening into port 4000, so you can access it through the local address localhost:4000

Step 3: Define the layout and style

I think this is the most consuming time part, but once you got everything done about it you barely will need think about it again.

The following are the main tasks that you will need to complete here, but this definitely will vary based on your needs:

Global site settings and configuration. There is a file intended for this purpose: _config.yml where you can place custom variables that are going to be available to use in your pages, since Jekyll use Liquid templating to convert your content into HTML.
Define your main layout. Jekyll allows you to define a default layout which could be the base of your entire site. You just need to create a html file where you’ll load your assets and scripts files and put the placeholder content to tell Jekyll where to render the pages content that are using this layout. Layout files must be placed in folder _layouts and you can have as much layouts as you may need. This is an example of a very basic layout:

<!DOCTYPE html>
<html>
<head>
	<title>{{page.title}}</title>
	<!-- Load your CSS and fonts here -->
</head>
<body>
	{{ content }}
	<!-- Don't forget to load your script files as well -->
</body>
</html>

Stylesheets and assets. You can take advantage of the CSS preprocessor of your preference or you can handle your CSS files directly. Also you can start adding your images, scripts and fonts files here.

Step 4: Create your content

As you may have seen already Jekyll provides you some examples in the folder _posts, but you can start creating your own and I would recommend the use of folder _drafts for that purpose, once it’s finished you will have to move it to the _posts folder.

By default you can start writing posts using Markdown syntax. It’s supported by most of the well known editors and there are a lot of plugins and tools to help you to master it, so go ahead and give it a look.

Step 5: Publish

Every time you run the site Jekyll generates all the site’s content into the folder _site (you can change the build destination in _config.yml file) or you can explicitly generate the content running the command jekyll build. This is the final content that you need to publish in your site hosting.

Conclusion

Jekyll is pretty straightforward and like many other platforms or tools there are a learning curve to cover, but you will have a lot of information available online to help you on that purpose. I know most CMSs offers you a lot of functionality out-of-the-box but sometimes you don’t even use the half of it and then become an overkill. So if you’re looking for getting away from dynamic pages, Jekyll is your friend.

Happy blogging!