Static Site Generator Guide for Beginners ④

9. Jekyll

Last updated: November 1, 2020

Reviewed by:

 

Jekyll is a static site generator written in Ruby. It allows you to quickly create fast websites using basic features (HTML, Markdowns, Liquid templating). While it may be somewhat disadvantaged in today's JavaScript-driven web world, it remains one of the most popular and well-known SSGs. Its popularity is attributed not only to its speed and simplicity but also to its integration with GitHub Pages.

 

The first version of Jekyll was released on December 19, 2008. For many, it marks the beginning of the shift to static web. The Jekyll community has rapidly grown, and there are now about 1,000 contributors. In 2017, Jekyll was recognized for its popularity, speed, and excellent support, ranking first in Netlify's top ten SSGs.

 

9-1 Main Feature

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

 

9-2 File Structure

├── _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, and based on information from _data and templates from _includes and _layouts, Jekyll generates static files 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 vast as other SSGs, it is at a level that can be used without issues for most use cases.

 

9-4 Introduction

If you have never used Ruby before, some setup is required. It also varies depending on your OS. Fortunately, there is a step-by-step guide to perform all the necessary configurations. https://jekyllrb.com/docs/.

 

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

 

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

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

3. Run gem install jekyll bundler in the 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 at 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 ideal SSG if you are not an experienced programmer or do not want to deal with high-level concepts. The large Jekyll community provides many resources, making it easy to implement a variety of 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 dedicated itself to creating something suitable for the new approach of Jamstack.

 

Bridgetown removes all deprecated Jekyll configurations. Additionally, Webpack is configured 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 procurement has become very straightforward in terms of local files. By default, it corresponds to posts within the _posts folder. You can create a website compatible with a blog very quickly.

 

To retrieve data from external sources, it is necessary to know the basics of Ruby. This is because you need to write functions (actually plugins) that are 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 Structure

├── 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 its ability to be extended with custom plugins. From retrieving data from external APIs, adding support for new markup and template languages, to complete control over the build process, a variety of things are possible.

 

 

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

 

10-4 Introduction

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

 

Next, we will install Bridgetown.

 

gem install bridgetown -N

 

To create a new Bridgetown website, follow these steps.

 

bridgetown new mysite

 

The build process is very simple, and by executing just one command, a production-ready bundle is created in the "output" folder, which can later be pushed to static file hosting providers like Netlify or Vercel.

 

10-5 Conclusion

Bridgetown is still lagging behind compared to others, but it is worth keeping an eye on. It is especially recommended for those who like Ruby. Although it is still in its early stages, it is expected to bring fresh fruits in the future.

 

11. In a nutshell

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

 

Based on our experience, if you are looking for simplicity and a short learning curve, we recommend Eleventy. If you are building a large site and want to be able to modify and add many new articles, please choose Hugo. Otherwise, if you are into Gatsby, Next.js, or Vue, we recommend Gridsome or Nuxt.