Why Use Jekyll and How to Set It Up

What is Jekyll?

 

I’ve recently been busy with Jekyll. These days, I use Jekyll to create web pages. I won’t deny there’s a bit of a learning curve to it initially, but when you start to familiarise yourself with it, it’s really quite a joy to use. I decided to write this post mainly to provide my insights into what Jekyll is, and how it should not be viewed as a one-size-fits-all approach for everyone.

 

Before I get into the details, allow me to summarise what Jekyll is.

 

Jekyll is a static site generator that is “blog-aware” (i.e. it functions perfectly as a blogging platform, like WordPress, Tumblr, or even Medium, and it’s also written in Markdown that is then converted into a bunch of HTML pages).

 

Why use Jekyll

 

What is it best used for?

 

Some examples include blogs, portfolios, and single-page websites. My company, Talenox, decided to use it as a country-targeted website (e.g. talenox.com.sg and talenox.com.hk) to showcase our payroll and leave management software. We decided to do this based on the separation of concerns ideology.

 

Jekyll is often viewed as an alternative to popular blogging platform, WordPress.

 

jekyll versus wordpress blogging

 

How does Jekyll create my website?

 

Imagine templates. Now, combine what you have in mind for your website in terms of content (images, text, and video) and merge them together.

 

Jekyll will “read” these and convert them into individual static HTML pages. After these pages are generated, Jekyll “feeds” them to your web server and generates what you see on your screen.

 

create websites with jekyll

 

Advantages of using Jekyll

 

  1. Faster page speed – there is no database, it is all pre-rendered HTML pages that are loaded, so no requests going back and forth.
  2. More secure – since there is no database to hack into anyway.
  3. Less maintenance – fewer parts since there is no database, and no need for other server-side languages.
  4. Lower cost – fewer parts and there is also free hosting on Github.
  5. Easy to implement Javascript – Jekyll’s flexibility makes it easy to implement JS, HTML, and CSS easily.
  6. No more 500 internal server error messages – since there is no database.

 

Disadvantages of using Jekyll

 

I’d like to clarify that I’m not pro-Jekyll. I simply started using it because some members in my team are advocates of it and suggested that we try Jekyll for our new domains. Hence, this section is to point out certain disadvantages of using Jekyll.

 

  1. Not suitable for non-developers – everything is written using the Command Line and a text editor. If you’re not familiar with those, using Jekyll may be daunting.
  2. You’ll need to know how gems work – enuff’ said.
  3. You’ll need to be familiar with version control – enuff’ said.
  4. Not great for dynamic pages – if you want authentication, search functions, and forms on your site, that’s going to be challenging.

 

With all the pros and cons listed, this is where you need to rely on your own judgment on how best to build your website.

 

It’s important to understand what is required of your project and what website builder would best suit your requirements, rather than the other way round.

 

project website requirements

 

Setting up Jekyll

 

Jekyll is a Ruby gem, so Ruby is required.

 

    1. Install Ruby and the Ruby Development Kit
    2. Install the Jekyll gem
      ~ $ gem install jekyll
    3. Generate a new Jekyll site
      ~ $ cd ~/Sites/
      ~ $ jekyll new my-new-jekyll-site
      ~ $ cd my-new-jekyll-site
    4. Preview the site on your local host
      ~ $ jekyll serve 
      # => In your browser, type http://localhost:4000

 

And… you’re done. You should see a bare-bones site right now. Play around with the file structure using your chosen text editor (especially the _layouts/: and _includes/: files).

 

I’ll be writing about some tips and tricks in using Jekyll in my next post.

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *