Beginner's Guide to Static Site Generators Part 4

9. Jekyll

Last updated: November 1, 2020

Reviewed by:

 

Jekyll is a static site generator written in Ruby. It uses basic functions (HTML, Markdowns, Liquid templating) to quickly create fast websites. Therefore, in the current JavaScript-dependent web world, it may be at a slight disadvantage, but it is still one of the most popular and well-known SSGs. Its popularity is not only due to its speed and simplicity, but also because it is involved in the functionality of Github Pages.

 

The first version of Jekyll was released on December 19, 2008. For many, it was the day that marked the beginning of the shift towards static websites. The Jekyll community has grown rapidly and now has around 1,000 contributors. In 2017, Jekyll was recognized for its popularity, speed, and excellent support, earning the top spot in Netlify's SSG top ten.

 

9-1 Main Features

Jekyll takes your content (Markdown files) and generates a static website that can be immediately served based on the defined template (HTML including Liquid tags and CSS). Its simplicity makes it perfect for creating blogs and small personal projects.

 

9-2 File Configuration

├── _config.yml ├── _data ├── _drafts ├── _includes ├── _layouts ├── _posts ├── _sass ├── _site └── index.html

 

Most folder names tell the story. In other words, dynamic content is stored in the _posts folder, Jekyll generates static files based on information from _data, templates from _includes and _layouts, and stores them in the _site folder.

 

9-3 Ecosystem

 

There are many useful plugins, themes, and resources created by the Jekyll community. While it may not be as extensive as other SSGs, it has reached a level where it can be used without any issues for most use cases.

 

9-4 Introduction

If you have never used Ruby before, some setup is required. This may also vary depending on your operating system. Fortunately, there is a step-by-step guide available for all necessary configurations. https://jekyllrb.com/docs/.

 

For Windows, even on platforms that are not officially supported, it is very easy.

 

1. Download and install the Ruby+Devkit version from RubyInstaller Downloads.

2. When you run the ridk install command, gems including necessary extensions will be installed.

3. Execute gem install jekyll bundler in a new command prompt.

4. Once all preparations are complete, create a sample project.

 

To create a new project

 

1. Execute jekyll new my_project

2. Enter the newly created directory: cd my_project

3. Run bundle exec jekyll serve to build the website, http://localhost:4000. The default template site will be displayed.

 

9-5 Conclusion

Jekyll is one of the simplest static site generators. It is an excellent alternative to traditional CMS for websites with a lot of static content. It is also the perfect SSG for those who are not experienced programmers or do not want to deal with high-level concepts. The large Jekyll community provides many resources and makes it easy to implement for many use cases.

 

10. Bridgetown

Last updated: October 30, 2020

Reviewed by:

 

Bridgetown was born in March 2020 as a fork of Jekyll. In this project, the web studio focused on creating something suitable for the new approach of Jamstack.

 

Bridgetown removes all deprecated Jekyll configurations. Additionally, Webpack is set up by default to handle the building and exporting of front-end assets such as Javascript, Typescript, CSS/SCSS, and related files (fonts, images, etc.) imported through Webpack.

 

10-1 Data Source

Data acquisition is very easy to understand in terms of local files. By default, it corresponds to posts in the _posts folder. You can create a website that corresponds to a blog very quickly.

 

To retrieve data from an external source, it is necessary to have a basic understanding of Ruby. This is because you will need to write functions (actually plugins) that will be executed during the build process.

 

class LoadPostsFromAPI < SiteBuilder   def build     get "https://domain.com/posts.json" do |data|       data.each do |post|         doc "#{post[:slug]}.md" do           front_matter post           categories post[:taxonomy][:category].map { |category| category[:slug] }           date Bridgetown::Utils.parse_date(post[:date])           content post[:body]         end       end     end   end end

 

10-2 File Configuration

├── frontend │		├── javascript │		└── styles ├── node_modules ├── plugins ├── src │		├── _components │		├── _data │		├── _layouts │		├── _posts │		├── 404.html │		└── index.md ├── bridgetown.config.yml ├── Gemfile ├── Gemfile.lock ├── start.js ├── sync.js ├── yarn.lock ├── webpack.config.js └── package.json

 

10-3 Ecosystem

One of the features of Bridgetown is the ability to extend it with custom plugins. From retrieving data from external APIs, to adding new markup and template language support, to complete control over the build process, there are many possibilities.

 

 

Bridgetown is a very new city, but the Discord community is very active. Anyone is welcome to ask questions or chat.

 

10-4 Introduction

First, you need to install Ruby, but this is a difficult step if you haven't installed it.

 

Next, install Bridgetown.

 

gem install bridgetown -N

 

To create a new Bridgetown website, follow these steps.

 

bridgetown new mysite

 

Building is a very simple process, with just one command, a production bundle will be created in the "output" folder, which can then be pushed to static file hosting providers such as Netlify or Vercel.

 

10-5 Conclusion

Bridgetown is still behind compared to others, but it is worth keeping an eye on. Especially recommended for those who like Ruby. It is still in its early stages, but it will bring fresh fruit in the future.

 

11. In a nutshell

Static site generators combine the benefits of traditional CMS with the simplicity and performance of static HTML. They are highly reliable, scalable, and have the potential to save time and cost, while also being able to handle large amounts of traffic.

 

Based on our experience, we recommend Eleventy for its simplicity and short learning curve. If you are building a large website and want to be able to make changes and additions to many new articles, choose Hugo. Otherwise, if you are already familiar with Gatsby, Next.js, or Vue, we recommend Gridsome or Nuxt.