Jekyll vs. GatsbyJS: Which Static Site Builder Builds the Best Website?
Static site builders are tools designed to make building a website easier by setting up a lot of the code you would normally have to write from scratch. Whether you need a website for a business or starting a blog, choosing a static website is typically a great choice.
Jekyll and GatsbyJS are two builders that have become particularly popular thanks to their ease of use. Which builder is best? Let’s break these two options down.
Jekyll vs. GatsbyJS: Under the Hood
It’s important to know what code is used to create each of these builders. If you already have a background in a certain programming language you may find one these builders a little easier to use.
Jekyll is built with the Ruby programming language. Ruby is an all-purpose language that is reliable for many different applications. Jekyll is a Ruby Gem, a package of code built inside of Ruby that makes installation simpler at the terminal.
Jekyll vs. GatsbyJS: Installation
Installation of both static website builders is pretty simple using the command line.
To get started with Jekyll, once you have Ruby installed, you only need to run a few instructions at the command line. Jekyll’s Quickstart Guide is a great resource.
- Install Ruby
- Install Jekyll and Bundler Gems
- Create your website
- View in your browser on http://localhost:4000
It’s a pretty simple process once you get the hang of Ruby.
GatsbyJS will require a few things to be installed to make launching a website simple. The three things you will need are:
- Gatsby Command Line Interface (CLI)
Node.js is essential to run Gatsby.js, so you will need to make sure this is installed first. You can download Node.js for Windows. If you’re on macOS, GatsbyJS recommends using Homebrew to install Node.js through the terminal.
Git is required for GatsbyJS on all systems, but chances are you’re using this already if you’re working with code.
The Gatsby CLI is a tool built by GatsbyJS that lets you develop websites easier. It is a package in the Node Package Manager (NPM) for Node.js.
To install the Gatsby CLI all you have to do is run an NPM command at the terminal.
npm install -g gatsby-cli
Note for Windows users: GatsbyJS leans a little towards macOS in its installation. For Windows installation, GatsbyJS recommends using Windows Subsystem for Linux if you’re using Windows 10.
GatsbyJS provide a Quickstart Guide as well. The Gatsby CLI runs commands at the terminal using the
gatsby command. Here is an example using a Gatsby starter, which is just a code template provided by GatsbyJS:
Once you run this sequence you can open http://localhost:8000 to view your website.
Jekyll vs. GatsbyJS: Ecosystem and Features
When choosing a site builder you should look at not only the builder but all other tools and support it can use.
Jekyll uses a combination of Liquid, Markdown, HTML, and CSS to process websites. Liquid does a great job performing logic inside of HTML. Markdown is a neat little tool to speed up coding by letting you write plain text words; Markdown will convert your text to clean HTML. Markdown has a long list of features that make your development easier .
Jekyll does have a plugin system that can create some additional functionality, using Ruby Gems. There is a host of plugins built into Ruby for Jekyll, and you can create your own.
Jekyll also features a pretty unique feature that can import code from existing websites, and convert them to Jekyll. The idea is to take an older, maybe more cluttered, website and improve performance with Jekyll. You can import code from WordPress, Tumblr, Drupal and more.
GatsbyJS has a selection of starters and themes, which are just templates you can start a website with. They’re nice to have, but not something that really will make or break choosing GatsbyJS. The real advantage is going to be the use of Node.js
Jekyll vs. GatsbyJS: Final Impressions
We like Jekyll for its stability, it has great support from GitHub. The use of Liquid and Markdown are nice to have, and the feature to import old code is pretty useful.
The starter library for both builders is nice, but if you’re building a serious website you won’t have much of a use for them at all.