loading...
IntegridSolutions

Best Static Site Generator to use in 2020

nirazanbasnet profile image Nirazan Basnet Updated on ・4 min read

Serverless Services for developers to use in 2020 (5 Part Series)

1) Best Static Site Generator to use in 2020 2) Best Headless CMS for 2020 3) Best Form Services to use in 2020 4) Best Cloud Functions services to use in 2020 5) Best Hosting Services for 2020

Static site generator is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data (such as Markdown files) and templates. The resulting build is transferred to your live server.

Elevently

  • Elevently

    Elevently is a simpler static site generator in node.js.

    Visit site here

Gatsby

  • Gatsby
    Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.

    Visit site here

Gridsome

  • Gridsome
    Gridsome is a Vue.js-powered modern site generator that makes it easy and fun for developers to create beautiful JAMstack websites & PWAs that is fast by default.

    Visit site here

Harp

  • Harp
    The static web server with built-in preprocessing. Harp serves Jade, Markdown, EJS, CoffeeScript, Sass, LESS and Stylus as HTML, CSS & JavaScript—no configuration necessary.

    Visit site here

Hexo

  • Hexo
    Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.

    Visit site here

Hugo

  • Hugo
    Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

    Visit site here

Jekyll

  • Jekyll
    Transform your plain text into static websites and blogs.

    Visit site here

Jigsaw

  • Jigsaw
    Jigsaw is a PHP static site generator using Laravel's Blade templating engine, Markdown for content-driven pages, and Laravel Mix allowing you to compile your CSS and JavaScript assets the same way you're used to in Laravel.

    Visit site here

Metalsmith

  • Metalsmith
    An extremely simple, pluggable static site generator in Node.js.

    Visit site here

Middleman

  • Middleman
    Middleman is a static site generator in Ruby using all the shortcuts and tools in modern web development.

    Visit site here

NextJs

  • Nextjs
    With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.

    Visit site here

Nift

  • Nift
    Nift is possibly the world's fastest website generator, developed from the ground up in C++.

    Visit site here

Nuxt

  • Nuxt
    Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable.

    Visit site here

React Static

  • React Static
    React-Static is a fast, lightweight, and powerful progressive static site generator based on React and its ecosystem. It resembles the simplicity and developer experience you're used to in tools like Create React App and has been carefully designed for performance, flexibility, and user/developer experience.

    Visit site here

Sapper

  • Sapper
    Sapper is an application framework powered by Svelte — build bigger apps with a smaller footprint

    Visit site here

VuePress

  • VuePress
    VuePress is composed of two parts: a minimalistic static site generator with a Vue-powered theming system, and a default theme optimized for writing technical documentation.

    Visit site here

Stackbit

  • Stackbit
    Stackbit isn't a static site generator in itself, but rather a really clever and useful service for spinning up a new site using your choice of static site generator, theme, CMS, and git service. Just minutes to spin up a new JAMstack site.

    Visit site here

Resources

Serverless CSS Tricks

I am just trying to put the collection of awesome services that will be very helpful for creating an application in a quick time.

Which is your favourite Static Site Generator? -- Mine is HUGO and NextJs.

If you have found this blog very helpful then if I had missed any important generator then please feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Serverless Services for developers to use in 2020 (5 Part Series)

1) Best Static Site Generator to use in 2020 2) Best Headless CMS for 2020 3) Best Form Services to use in 2020 4) Best Cloud Functions services to use in 2020 5) Best Hosting Services for 2020

Posted on by:

nirazanbasnet profile

Nirazan Basnet

@nirazanbasnet

Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet

IntegridSolutions

We love what we do and we love helping others succeed at what they love to do. We focus on Web Design - Development, Marketing & Branding.

Discussion

markdown guide
 

I think that Gatsby is turning out to be the "de facto standard", it's so well conceived and executed, with a huge ecosystem, I feel it makes the rest obsolete.

 

I think if you try something out like 11ty you'll see the difference in build times and the filesize of your final build. There are pros and cons to each.

 

Gatsby docs talk a lot about their output (pages) being super fast and including all kinds of tricks to squeeze the last drop of performance out of their static pages. I can't judge the technical merits of it but it's clear they've put a lot of effort into that. Hugo (being written in Go) is probably fastest with page generation though.

When they speak to "speed" in their pages, they are talking about the SPA-like nature of the outputted site that Gatsby builds. However, in order to do so, build times are quite long because Gatsby has to hydrate all pages and copy them. The outputted site bundle is also much larger than a SSG that is simply building HTML.

Wait a moment, I guess that you know more about Gatsby than I do, but isn't it so that, as a SSG, Gatsby normally outputs static HTML pages?

So that's not your conventional SPA - it's more like an old fashioned static HTML site. What do you mean then by the bundle size being "larger than an SSG"? Even though you program your Gatsby site with React, the output normally isn't a React app.

(hydration, as I understood it, can then optionally overlay a React app on top of it, if you need 'dynamic' behavior, but this is optional - but I might be misunderstanding what hydration means, I'd need to read up on it)

The "speed tricks" (techniques) that they're referring to are things which improve your site's metrics in Lighthouse etcetera - optimizing images, the way CSS and other resources are bundled and loaded, and so on.

Nope! Gatsby is still outputting a SPA when you build.

However, it is "pre-rendering" static versions of each page so that crawlers can index them. BUT, when an actual user first visits your site, they are given a static page that is then rehydrated. From that point onward, they are using a SPA, they just don't realize it.

So, gatsby is still shipping ALL of react to the browser, as well as a giant manifest file of all the possible pages and content you used within it.

Does that make sense? I am more than happy to jump into a chatroom or talk it through with you!

Yes now I see your explanation I think it does make sense, thanks!

That's an eye opener. What's funny is that most blog articles and even the Gatsby docs themselves suggest (or even state) that Gatsby actually generates a static site and not an SPA.

I think that's not intentionally misleading or wholly inaccurate, it's just a technically simplified description. The way you explain it is the "accurate" version :-)

I now understand why you said that the bundle size is bigger (and why that's true).

So when you think about what Gatsby is doing it's pretty nifty, giving you the "illusion" of a static site (and actually all of its advantages, in terms of speed and SEO) but at the same time allowing SPA like capabilities. It's like "having your cake and eating it too" :-)

Glad I could help explain!

Yes, SPAs and "static sites" are not mutually exclusive. You can be both, and that's what Gatsby, Nuxt, Gridsome, and most of these SSGs are.

Generators like 11ty/Hugo/Hexo are truly static, SPA-less sites.

I think an important note between them is that while SPAs feel faster once they've hydrated, it takes a lot more JS to get to that point, and you trade a lot in terms of initial pageload for it.

I love talking about this stuff!

Right, but Gatsby (as you said) also "pre-generates" static pages (which are then subsequently hydrated to give full SPA capabilities), so the "time to initial page view" would also be quick with Gatsby - right? Javascript then needs to be loaded to make the page interactive but the content would already be there.

The way I see it (correct me if I'm wrong) is that Gatsby is more like a hybrid, it's SSG + SPA, while Hugo etcetera are pure SSG / static (you could then still include Javascript in those pages but it's not part of the "framework").

But if you develop a Gatsby page (or site) which doesn't need any interactivity then it would also not need "hydration" or would it? You then essentially have the "Hugo" model.

You also mention Nuxt.js, but I thought that was based on SSR (server side rendering), same like Next.js, although I heard that Nuxt and/or Next also have an "SSG mode" (so they can do "server side rendering" but 'in advance' instead of 'just in time'). But in principle SSR frameworks like Nuxt and Next need a server to run your "app".

Do you want to hop in a discord server or a phone call and talk it through? I'm happy to do it.

Love your enthusiasm, thanks buddy ... dev.to has a chat function built in doesn't it? yes it does, I should be able to hit you up on "dev.to chat" ... I followed you, if you follow me back then I'll be able to message you ... I'm off to bed soon however, let's do that tomorrow :-)

 

Hi Matt. I'm trying to build just simple portfolio websites for my friends. I specialize in Javascript and I'm comfortable with CSS too. I don't usually build websites since it's not what I do at work. I'm not yet sure what SSG to use. Would you recommend 11ty over HUGO?

I would highly recommend 11ty over Hugo! ESPECIALLY if you're more comfortable with Node. It makes working with data and templating SO simple. Take a look at the docs site or my github to see some starter templates!

Great! Thank so much will definitely check out your templates. :D

 

But I thought HUGO and Gatsby are the great combinations to learn, anyway thanks for sharing :)

 

A work colleague of mine is into Hugo and I believe it's cool as well. Programmed in Go and extremely fast.

 

we use Hugo, it's fast and you can embed it easily in a CI/CD chain with your source code to auto-generate updates

 

Full disclosure, creator/developer of Nift here.. You can reasonably easily embed Nift in a CI/CD chain similarly and it's even faster. It can be over 4 times faster at full builds and can be over 20 times faster during development from having incremental builds.

I've recently released some huge new versions with an in built template language n++ and in built scripting language f++, both of which use basically the same code so are very similar and have user-defined functions, full type systems with user-defined types with templates types (eg. templates in c++) etc.. Both in built languages have CLI interpreters and shell extensions, the f++ shell extension is getting really good! It also now has Lua(JIT) embedded in it so you have a full programming language that's often in top 20 programming language lists at your disposal, including all the packages you can install through LuaRocks that can be useful for web development, see here for example. It also has ExprTk embedded in it which is probably the fastest and best mathematical expression parsing library available.

You can inject the output of running scripts/programs/system calls at any point when building webpages which allows you to integrate with basically anything you want. I am just working on adding in pagination at the moment. If it all sounds interesting to you, wait a few days until v2.3 is out (watch out for pagination docs on the website) and give it a try! Am happy to schedule time to help people start getting their hands dirty with Nift too if anyone is interested, email me (contact@n-ham.com).

 

at the moment the sites that use Hugo cant just easily be transformed into using another platform. There has to be a serious reason for me to consider putting in days or maybe weeks of effort to redo all of it. So far Hugo works for what we need it do.

 
 

Our favorite is Gatsbyjs - you get a chance to work with Reactjs and all those modern tools out there.

Hugo is another one that is simple and blazingly fast

 

GatsbyJs is awesome too :)

 

Thank your for this post Nirazan.

I also recommend everyone to use this site, maintained by Netlify

staticgen.com/

 

Thank you for sharing this site. :)

 
 

I cannot recommend trying 11ty enough. It is a fantastic SSG for those who want to stay in FED languages like JS and Node and get build times comparable to Hexo.

 

Thanks, for this list. I just tried the Gatsby and Next.js. Maybe I will find my favorite :)

 

Talk me about your Next.js experience, please :)

 

This is my two production ready projects done with it:
GintautasRapalis.com
Gerlangas.lt. These projects are done with highly customized Next.js (App, and Document), because of routing transitions, data bindings and preloaders.
And I have some project in progress :)

 
 

I use Jekyll for my blog ! Even I built a theme out of it for Developers who want to create a blog using it - Checkout here - devlopr-jekyll 😃

 

I'm not that expert web developer and I'm actually using Jekyll for my personal blog. I find it very easy - also for customising CSS. I also tried GatsbyJS and it's incredibly fast! But ReactJS must be well known.

 

Keep exploring and thanks for your thoughts :)

 

Nice 😄, After 5 months , Is Hugo is still best , Among all ?

 
 

Pelican is a Python standard. I don't see it in here ^^_

 

Ey Nirazan! Nice help is yours. Can you write next some little tutos of usage about the ones you think that they are in fact useful? Thank you!

 

I am thinking about writing HUGO tutorials :)

 

Thank you for post.
My favorite for now is Hugo :)

 
 

You can add Scully, an Angular static generator github.com/scullyio/scully

 

Didn't know about that thanks for sharing :)

 

There is also Zola which is written in Rust and is supposed to be really fast. I haven't used it yet, but I'm planning to use it for my next website.

 

+1 for Zola. Switched to it from Hugo, after Hugo stopped organizing my site correctly. Zola is super fast to compile and dead easy to use.

 

Is this a biased list against Angular?

 

Adventurous developers might want to try Publish by John Sundell — it’s a static site generator written in Swift