Member-only story
An Introduction to Using Jekyll With Bootstrap 4
Learn the framework and deploy your site in minutes
Building a Static Site Can Be Deceptively Difficult
In theory, it’s just putting HTML, CSS, and JavaScript on a page. In practice, however, it quickly starts becoming complicated — there’s needless copying of code from the head across every page, manually compiling SCSS into CSS, sorting through thousands of lines of repeating code.
And then, if you or the client ends up needing a blog, you throw up your hands and just build a clunky WordPress site.
Jekyll is a static site framework that simplifies all of these steps and allows a developer to focus on the most important part of development — writing meaningful code.
Besides, it’s 2020, and if your New Year’s resolution was to stop using WordPress, it’s not too late to make it happen now.
Why Use Jekyll
Jekyll websites are, as the official documentation puts it :
“Simple, static, and blog-aware.”
You can build the basic structure of a site in under an hour and have the site deployed by the afternoon.
Jekyll sites are incredibly fast — at the end of the build process, the framework outputs a folder with a static site that can be added to any hosting provider, via shell access, FTP, or cPanel.
Most of all, Jekyll websites are simple to update and maintain. The framework is built to separate the design and data (like a modern JavaScript framework, but simpler). Therefore, changing a menu, updating a list, or adding a new post is effortless.
Getting Started
The first and only step before working with Jekyll is to download Ruby. You don’t need to learn or really know the language itself, but the framework is built using the Ruby language and Jekyll itself is a Ruby gem.
While every Mac already comes with Ruby installed, I recommend getting the latest stable version via rbenv. Once set up, simply install the Jekyll and Bundler gems and you are ready to build your first site:
