DEV Community

Oyetoke Toby
Oyetoke Toby

Posted on • Edited on

Which is the Best Static Site Generator and Why?

It's 2019 and we have tons of static site generator all over the internet built with various languages.

I am trying to curate a list of the best and also the best one to use for my new open source project.

Below is a list of popular static site generator (the ones I know):

  • Jekyll
  • Hugo
  • Gatsby
  • Gridsome
  • Octopress
  • Vuepress
  • Hexo
  • Harp
  • Pelican
  • Cactus
  • Roots
  • Hyde
  • Middleman

Pick one and explain why it is better. If the one you chose is not listed above, just say it and explain why you are choosing it over others.

Tweet and share this discussion to reach more people

PS: I will be taking notes from your comments and use it to write a comprehensive list of best static site generator, why and why not to use it.

Top comments (116)

Collapse
 
flrnd profile image
Florian Rand • Edited

Better is very broad. Better in what? Better documentation? Better in build speed?

I can't say which one is better. I've tried Jekyll, Hugo, Hexo and Gatsby and I finally opted with gatsby because is very easy to start with, has a very good documentation, lot of plugins and what not. But the other three where perfectly fine options. Do you like ruby? Jekyll. Do you preffer golang? Hugo. Do you like react? Gatsby...

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

Is there one for Python 😅😅 ?
I am currently using jekyll-now but do not know ruby 😅😅

Collapse
 
landreville profile image
Landreville • Edited

There's Nikola which isn't very well known, but I've found it easy to theme and customize heavily.

And Lektor which seems promising and allows defining custom models for posts (to have different metadata, templates, etc depending on the type of post).

Collapse
 
flrnd profile image
Florian Rand

This is the only one I know github.com/getpelican/pelican but I'm sure if you search in google static site generator python there must be a few.

Thread Thread
 
bhupesh profile image
Bhupesh Varshney 👾

Yeah i have done that
Doesn't seem soo good
😭

Collapse
 
prahladyeri profile image
Prahlad Yeri • Edited

I was in the same boat, switched to Pelican recently and never been happier! Its the python equivalent of ruby's jekyll.

Thread Thread
 
buzzedison profile image
Edison Ade

What makes it standout? checked out the website and can't find anything interesting

Thread Thread
 
miron profile image
Miron

If you want interesting, don't look for a static site generator :)

Collapse
 
johnbokma profile image
John Bokma

I have written one in Python: github.com/john-bokma/tumblelog

You can see the site I generate with it at plurrrr.com/

Collapse
 
omidmamadi profile image
Omid

hey, Pelican is Python base :)

Collapse
 
oyetoket profile image
Oyetoke Toby

There's Cactus

Collapse
 
epsi profile image
E.R. Nurwijayadi

Does anynone know how to setup pelican for use with bitbucket.io ?

Collapse
 
pianomanfrazier profile image
Ryan Frazier • Edited

Not exactly python, but 11ty uses nunjucks, a port of jinja2 to javascript, so should feel very familiar. I have been able to do some cool things with it.

Collapse
 
oyetoket profile image
Oyetoke Toby

I prefer Gatsby(React), Hugo(Go), Cactus(Python/Django). My basic language is Python, Javascript, Go

Collapse
 
oyetoket profile image
Oyetoke Toby

Which do you prefer and best for your needs and the reasons

Collapse
 
flrnd profile image
Florian Rand • Edited

I like Gatsby and Hugo. I Ditched Hugo because I disliked its templating syntax, but that is a silly reason, just didn't like it.

{{ $title := .Site.Title }}
<ul>
{{ range .Params.tags }}
    <li>
        <a href="/tags/{{ . | urlize }}">{{ . }}</a>
        - {{ $title }}
    </li>
{{ end }}
</ul>

I tried Gatsby and felt in love with it. Things like styled components and another few from the react ecosystem make Gatsby very attractive and fun to use. Another plus is that I can use my react experiments in my personal site and vice versa.

Thread Thread
 
svitekpavel profile image
Pavel Svitek

+1. It reminds me of PHP -> too many special characters for no good reason.

Thread Thread
 
bayuangora profile image
Bayu Angora

Why you complicate your code with that code?

{{ $title := .Site.Title }}
<ul>
{{ range .Params.tags }}
    <li>
        <a href="/tags/{{ . | urlize }}">{{ . }}</a>
        - {{ $title }}
    </li>
{{ end }}
</ul>

What if make your code simpler like this?

<ul>
{{ range .Params.tags }}
    <li>
        <a href="/tags/{{ . | urlize }}">{{ . }}</a>
        - {{ .Site.Title }}
    </li>
{{ end }}
</ul>
Thread Thread
 
flrnd profile image
Florian Rand • Edited

I copy pasted it from hugo itself, ask the developer :).

Besides, that variable that you removed it's probably used in more parts of the code I copy-pasted.

Collapse
 
brob profile image
Bryan Robinson

I don't know about "Better," but the one I'm enjoying most right now is Eleventy (11ty).

I like it because it's fast, is similar to others I've used in the past and it's based in JS. When I started using it, it was because it was "Jekyll-like" but built with JS, so no need to install ruby or manage ruby.

I like how simple and flexible it is. It's super easy to use a lot of different templating engines and it doesn't take over a project as hard as some of the others.

I really like the idea of "JavaScript Data Files" that it has. You can have JSON data files like in Jekyll or you can have a JS file that exports a module that collects and formats data on build. Super handy.

I wrote a LITTLE about it here: bryanlrobinson.com/blog/2019/04/02...

Collapse
 
pianomanfrazier profile image
Ryan Frazier

I second 11ty. The templating is super flexible. You can do some cool things with it. I wrote about it at LilyPond in markdown.

Here is the demo.

Collapse
 
oyetoket profile image
Oyetoke Toby

Cool

Collapse
 
bayuangora profile image
Bayu Angora

What's about 11ty building speed benchmark compared to Hugo?

Collapse
 
epsi profile image
E.R. Nurwijayadi

How do I read data from YAML files in 11ty ?

Collapse
 
ben profile image
Ben Halpern

I am very impressed with Gatsby, but I think some of these solidly address different concerns. I wouldn’t want to go with Gatsby on a site that doesn’t need React—which is a lot of types of sites.

Collapse
 
zeke profile image
Zeke Hernandez

I have sites in Hugo, Jekyll, and Gatsby.
Hugo appears the fastest build, but the templating is goofy to me, but that's a personal thing.
Jekyll has been around the longest I think and has a large ecosystem around it.
Gatsby benefits from the React ecosystem, which is a huge plus for me. And it seems to be growing fast.

My mental framework is if it's a site on the simpler side, I would go with Hugo, otherwise Gatsby, but that's just me.

Collapse
 
adrinux profile image
Adrian Simmons

I wonder how much people's dislike of Hugo's templating is down to not having learnt Golang. It's essentially standard library gotemplate with some extras.

So there's a question - just out of interest - have you learnt golang at all?

Collapse
 
flrnd profile image
Florian Rand

Same thoughts here with hugo's templating. I think a lot of people feel the same way.

Collapse
 
oyetoket profile image
Oyetoke Toby

Same thought

Collapse
 
vuild profile image
Vuild

Not to be contentious but what is a "static site" vs a cms?

Collapse
 
pianomanfrazier profile image
Ryan Frazier

The difference is do you want to compile your site upfront front flat files (ie markdown, templates,...) or hold you data in a database like wordpress?

This has a lot of benefits like

  • better security (no backend or database to be hacked)
  • simple deployment (git push to publish with netlify)
  • cheaper to host (don't need php and/or some caching service)
Collapse
 
vuild profile image
Vuild

Thanks Ryan,

Not to argue (from ignorance), but these seem like pretty low value reasons:

  • Sec is not a CMS thing (I get the db, but that's not really a big concern).
  • Deployment is a dev, not consumer thing. I deploy nonstop.
  • Hosting is cheap.

These are all dev benefits, which I don't really care about in the sense that: Do they improve traffic/UI/SEO/performance etc.

I choose based on the consumer experience/value with less regard for what the devs want (think of it like race cars vs regular).

Trying to figure out if it is better or just another tech trend that is no real improvement. Not really into small, trafficless sites. Seems a lot like the old days (static HTML file can stay for 20 yrs, that part is nice).

Thread Thread
 
pianomanfrazier profile image
Ryan Frazier

No that's fine. No offense taken. Your points are valid.

For me, it really depends on the use case. For my own blog, being able to write markdown and deploy the flat files is a consumer thing when I write my own blog.

I like to program my blog as I blog and this way has given me a lot of flexibility.

If I want to move to a different blog platform I don't have to export from a database.

As far as small tragficcless sites, smashing magazine produces their whole site this way. smashingmagazine.com/2017/03/a-lit...

If I were setting up a blog for a customer, wordpress is still a good choice. For business websites wordpress seems overkill to me, so I use an ssg.

I just listed some of the reasons I have switched. Again for security, I got tired of staying on top of updating and securing my wordpress site. If I didn't touch my WP blog for several months it would get hacked.

I hope this gives you some more context on my comment.

Thread Thread
 
vuild profile image
Vuild • Edited

Ryan,

This answers all my questions as well as possible tbh.

Dev heavy markup, injection, intrusion are good reasons (I was wondering if it was worth losing the breadth of options). I'll try a couple.

Appreciate the explanation, thanks.

Thread Thread
 
ryanhaber profile image
Ryan Haber

From a user/viewer perspective, CMSs are often a lot slower than static. In fact, it's hard for me to see how they wouldn't be. My main concern is my user/viewer/reader, so unless we need functionality only possible in a CMS, I go with a static. FWIW, since you can do a lot of simple JS in a static web page, it's super easy to add Disqus, etc., for commenting and some other basic functionality.

Thread Thread
 
vuild profile image
Vuild

Thanks Ryan, I like the sound of it in a number of scenarios. Pretty agnostic on this stuff overall.

In general a cms is spitting out a static cached page mostly so they can be fast but most devs throw some Gfont embed, ga, a few plugins, db bloat & suddenly the site is garbage.

My site is not fully optimized, but is usually <1s. WP (& php) has a bunch of advanced stuff that i'd have to code already. There are many annoying {solvable} CMS related issues.

I am not using very many 3rd party services anymore unless requested as there is no need for a handful of players to have control of everything. My users are being respected (mostly) & I am enjoying working on my stuff under those circumstances (this is not that relevant to the sitegen but it's where growth is).

What static gen do you use? (I will make some things to see how it suits my needs).

Thread Thread
 
ryanhaber profile image
Ryan Haber

Yeah, absolutely.

Also, I've seen CMSs and I've seen CMSs. They're not all the same.

For static gen, I've only used Jekyll, actually. It's a bit of a new world to me.

For CMSs, my favorites are Joomla!, Drupal, Ghost (oooooh, love it), and a little known one called BrightSpot. There are some lightweight ones that are also pretty good, if simpler.

Thread Thread
 
johnhorner profile image
John Horner

Sec is not a CMS thing (I get the db, but that's not really a big concern).

I don't know what this means, but I recently had to fix up a Wordpress blog which had been hacked because of an insecure plugin. There were ads inserted as posts, and links hijacked to go to really bad sites. The administrator didn't notice for quite a while because the malware was smart enough not to appear if you were logged in as a user.

It's hard to imagine that happening to a static site. With a static site there are just files on a server. What is there to hack? Only the SSH connection to the server itself.

Thread Thread
 
vuild profile image
Vuild

Yeah, my first one was an injected encrypted footer links with useragent & tore down a set of top ranking sites (long time ago). I didn't mean to dismiss CMS sec, it's a pain.

"Sec is not a CMS thing" just meant: Lots of the serious stuff (beyond annoying defacing) is social engineering & lower down the stack. The CMS or db is one part of many.

Collapse
 
johncip profile image
jmc • Edited

CMSs (e.g Joomla, Drupal, Wordpress) typically load the content from some kind of data store, inject it into a template, and serve the dynamically-generated page. You need the web server to do this work -- in other words, it's serving the output of an application rather than static files.

If you do the fetching/injecting on the page itself, in JS, you can have the server just send static files. (But they'll rely on an HTTP API to provide content, so there's technically still a back-end.) See:

It's also possible to have a fully static site that is generated ahead of time from a CMS-like architecture: en.wikipedia.org/wiki/Movable_Type

Such sites are blazing fast and truly need no back end. But they require the developer to generate and deploy a new set of files every time any of the content changes.

Collapse
 
vuild profile image
Vuild

Understood, good explanation thanks.

I mostly run smaller WP on sites from 0-30K uniques a day ish. <1s load on unprimed cache. 50K+ pages no prob. It would be to replace that.

My site is currently well below 1s with the counter removed (with cache on, partial optimization, WIP).

If I make a 50K page static site with constantly updating content (I like every page to change content to some degree as often as possible) & 50+ new pages (posts) a day will there be any issues with constant redeployment (I am assuming that is all handled)?

I don't care much about dev difficulties, mostly about scale/speed of actual publishing as that is 90% of energy (web performance is ok).

Thread Thread
 
oyetoket profile image
Oyetoke Toby

Cool

Thread Thread
 
johncip profile image
jmc

If I make a 50K page static site with constantly updating content (I like every page to change content to some degree as often as possible) & 50+ new pages (posts) a day will there be any issues with constant redeployment (I am assuming that is all handled)?

I'm unfortunately not the right person to answer that well. I did use movable type in the bad old days, but not for anything of the scale you're describing.

But my guess is that static site generation wouldn't be a great fit for this -- not having to rebuild and redeploy frequently is a big advantage of CMSs. And using a page cache will give you most of the benefits of serving static pages.

This article, if you haven't seen it, looks pretty comprehensive: wpcurve.com/wordpress-speed/

...but if you're below 1s then I'd guess you're aware of what they bring up.

And in general, I'd definitely recommend profiling, to whatever extent is possible. I know there are plugins for profiling WP page rendering performance. If you can do something on the db side as well, that'd probably cover everything except the speed of the host itself.

scale/speed of actual publishing

If by that you mean the publishing workflow makes you jump through hoops, maybe it's worth looking into adding something like wordpress.org/plugins/json-api/ and writing a tool that lets you publish from the command line.

Thread Thread
 
vuild profile image
Vuild

For someone who claims to not know much, this is interesting reading & ideas (not just for me). Appreciate it. 👍

I have fast host/front end & the db stuff I can deal with. API UI is interesting.

Workflow goal is to make WP publish more like twitter but higher quality xdevice.

Thread Thread
 
mrrcollins profile image
Ryan Collins

Do you have a website to share with a <1s page load? And any pointers for Wordpress? My sites only get in the 80s with Google's Page Insights tool and I'm also looking for ways to speed it up. :-)

Collapse
 
fahadysf profile image
Fahad Yousuf

This question and the answers to it are extremely useful. Thanks for this brilliant discussion.

Collapse
 
gypsydave5 profile image
David Wickes

I'd suggest... not using one:

to;dr you can get a lot of what you need using simple tools like pandoc

Collapse
 
tiefenb profile image
Markus Tiefenbacher

For a small very static multilang onepager website I'll checked Hexo, Gatsby and Hugo. I choose Hugo for it because of its good documentation and multilang support. Gatsby looked also very interesting but was kind of overkill for this small page.

Collapse
 
oyetoket profile image
Oyetoke Toby

Yeah it is

Collapse
 
yucer profile image
yucer

Supposedly Jekyll has the advantage that is supported by GitHub Pages.

It means you only need to modify the content and make git push. :-)

And the disadvantage is that is not made in Python. ;-)

Collapse
 
itsasine profile image
ItsASine (Kayla)

Supposedly Jekyll has the advantage that is supported by GitHub Pages.

This actually bit me moving to Netlify the other day. All my builds would fail because I didn't require the github-pages gem. I didn't think I needed it since I wasn't using Github Pages anymore, but apparently, that gem includes jekyll and the fluff needed for github pages, so Netlify's documentation says to require it so they can use it to build.

Collapse
 
commonsenseused profile image
Joey R.

The Python-Based version of Jekyll is Hyde. github.com/hyde/hyde

Collapse
 
yucer profile image
yucer

I guess the templates are 100% compatible, right ?

I wasn't aware. Thank you.

Then I would use Hyde to process the content locally and publish the templates in github pages.

Collapse
 
oyetoket profile image
Oyetoke Toby

Why is that a disadvantage?

Collapse
 
yucer profile image
yucer • Edited

It was a joke. Because I like Python more than Ruby.

Just a matter of taste.

I have never made a real comparison before, feature by feature.

I did just use Pelican and it was very nice. If you need extensions then it is better to choose one from the programming language that you use.

Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

I don't know about best but my favourite is Middleman.

I enjoy use Haml, Sass 1.0 and Coffecript as I find it super productive and it's why I use Middleman.

Collapse
 
joshrburks profile image
Josh Burks

I've not done a ton of static sites, but so far I'm liking Middleman. It seems like a "Jekyll Lite" to me. The documentation is pretty good as well.

Collapse
 
oyetoket profile image
Oyetoke Toby

Middleman, been hearing that guy. How's the experience

Thread Thread
 
joshrburks profile image
Josh Burks

I have a ruby and Rails background, so it felt pretty natural to me. It uses a similar pipeline for assets, which is becoming outdated, but it still works and it's dead simple.

I like that the static site movement has forced me to think more "simple" about things. Having a plethora of XaaS providers to lean on (headless CMS, JS based shopping carts, etc) for common things has helped as well.

Thread Thread
 
andrewbrown profile image
Andrew Brown 🇨🇦 • Edited

I used <iddleman, and then I jumped on the bandwagon and built my own pipeline with Webpack. A year or so after that I went back to Middleman and its as you say.

Sprockets may be considered outdated, but it does everything I need and its dead simple to get working.

So I ask myself this, Would you rather write Markdown or Haml?

Collapse
 
lauragift21 profile image
Gift Egwuenu

Based on my own thoughts I don't think it's a good thing to say one is better than another. I have worked with Gatsby, Hugo and Gridsome and they all have great things to offer.

To me it depends on the language you're comfortable with if it's React then fine go with Gatsby, if it's Vue then you can go with Nuxt or Gridsome that's how I will compare my interests.

Collapse
 
oyetoket profile image
Oyetoke Toby

Yeah, you hit the right button. It's all depends on the language you are comfortable with, but not only that. You also wanna make sure it meets your demand. I actually forgot to put Gridsome.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.