Jekyll is a a static site generator which is available since 2009 and is build based on top of Ruby. Jekyll is also the engine behind GitHub Pages. GitHub Pages are public web pages for users, organizations, and repositories, that are freely hosted on GitHub’s
Jekyll’s website can be found at https://jekyllrb.com/:
github.io
domain or on a custom domain name of your choice. The fact that Jekyll is powering GitHub Pages is also the reason why Jekyll is the most popular static site generator right now.Jekyll’s website can be found at https://jekyllrb.com/:
PROs
- Jekyll works very well with GitHub Pages which makes it extremly easy to get your Jekyll site hosted.
- Jekyll is easy to learn and in general comes with a great simplicity in it’s core concepts.
- Jekyll has a huge community, so it’s easy to find help to any topic related to Jekyll.
- If you want to extend the standard functionality of Jekyll you can make use of a long list of available plugins.
CONs
- Jekyll is based on Ruby. That means that you have to set up your Ruby development environment to make use of Jekyll first.
- As Ruby is not included in the top trending programming languages for web development in 2019 you might find Jekyll a little bit outdated.
GATSBY
Gatsby is based and React and GraphQL, so if you’re already have some basic understanding of those technologies Gatsby might be the right choice for you. Maybe you’d ask: Why needs a static site generator GraphQL? The answer here is easy: Gatsby uses GraphQL internally to make data available which is pulled from different sources into your project. E.g. you can use sources like your file system, WordPress, or Contentful. All of the data which is made available from those sources can then be accessed by using GraphQL which makes the way you’re accessing data easy and consistent.
Gatsby is optimised for speed. Gatsby tries to build the fatest possible website, it delivers code and data splitting out-of-the-box. Therewith Gatsby loads only the parts of your website which are needed right now. In addition, Gatsby prefetches resources for other pages. Because of that navigating between pages of your website feels incredibly fast.
Gatsby comes also with a plugin system which makes it easy to extend the static site generator which additional functionality. E.g. if you want to pull data from another source you simply need to find the right plugin, install and configure this plugin and the desired data becomes accessible by using GraphQL in your pages.
The project’s website can be found at https://www.gatsbyjs.org/:
PROs
- Based on React
- Data is pulled into Gatsby by using GraphQL
- Very comprehensive plugin system available
- Produces very fast static HTML pages with prefetching capabilities included
- PWA-ready by default
CONs
- You will need to have a solid grasp of JS, React, and GraphQL in order to get going with Gatsby.
NEXT.JS
Next.js is a very popular static site generator based on React and JavaScript and provided by ZEIT, a company which is focusing on making cloud computing as easy as possible.
Next.js is a very modern platform and providers features like:
- Server-rendered by default
- Automatic code splitting for faster page loads
- Simple client-side routing (page based)
- Webpack-based dev environment which supports Hot Module Replacement (HMR)
- Able to implement with Express or any other Node.js HTTP server
- Customizable with your own Babel and Webpack configurations
Take a look at https://nextjs.org/ to find out more:
PROs
- Based on React and JavaScript
- Easy to get started with, high learning curve (and even higher if you have already a basic understanding of React)
- Seamlessly integrates with ZEIT now hosting service
- Next.js is backed by an organisation and also has a strong support in the open-source world
- Start with zero configuration
- Code splitting out of the box
CONs
- Requires some basic understanding of React
- No integrated plugin system available
Hexo
Hexo is powered by Node.js and aimed at blogging. While the JavaScript implementation shouldn’t in theory make too much difference to how you work with it, since you’ll be using with markup and templating languages, it can make installation and configuration more familiar for JavaScript developers. If you’re already using npm and git then it’s extremely simple to get up and running.
Like many other general purpose generators, you’ll probably want to write your content in Markdown. The default templating engine is Swig, which is once again well suited for JavaScript developers. However, Hexo is extensible to allow other templating engines to be used if you want.
The Hexo website includes a range of pre-built themes for you to try out, and one especially popular feature of the tool is its support for single-command deployment.
Resources
Comments
Post a Comment