Eleventy (Static Site Generator)

For anyone interested in static site generators or “Jamstack”, Eleventy is another great one:

It’s easier to learn how to use than generators that require React or Vue. It doesn’t send a frontend JavaScript framework to the client unless you add one, so performance is good.

The docs are here:

1 Like

QQ:
google says:
" automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time."

Best case scenario this would work on: landing page?
Or
is this something I could use - let’s say

  1. create a POSTMAN script and then in order to beautify it I can use it to create a HTML page with the test results.

If there is only one page on a site, then a plain HTML file would probably be enough. I usually bundle single page sites with Parcel. If you have Parcel installed, you can write HTML like this, where it directly imports SCSS and TypeScript files that wouldn’t normally run in a browser. Parcel will automatically handle everything.

<!DOCTYPE html>
<html>
    <head>
        <title>Landing Page</title>

        <!-- Parcel makes this possible. -->
        <link rel="stylesheet" href="./styles.scss" />
    </head>
    <body>
        <h1>Landing Page</h1>

        <!-- Parcel makes this possible. -->
        <script src="./scripts.ts"></script>
    </body>
</html>

For sites with multiple pages (business sites, blogs, etc.), Eleventy is be good. You can create an HTML template(s) and then have Eleventy build multiple pages from some data. It outputs the finished site in a directory named _site and then you can upload the files there to a service like Netlify (free hosting for small, static sites).

There’s a list of similar tools on the Jamstack site. A difference between Eleventy and Gatsby/Next/Nuxt is that there is more control with Eleventy. The other three give you a full SPA on top of the HTML.

This video talks about some of the differences:

2 Likes

Thanks for the explanation and video. Very helpful. :slight_smile:

1 Like

I just updated my old Parcel.js demo from v1 to v2. I usually build single landing pages something like this:

  • Code – instructions for running it are in the README.md file. It’s modern ES6 and SCSS instead of CSS. It also loads a small React app that turns the lightbulb on and off. (Parcel can also automatically transpile Vue, Elm, and other languages.)
  • Demo – view the page source to see how it bundled the code.

Parcel makes it easy to write modern frontend code without spending a lot of time on configuration.

I’m using Parcel with Eleventy too, but Eleventy handles the generation of many pages instead of just one.

Frameworks in the Gatsby/Next/Nuxt category include their own asset build processes, so they don’t need something like Parcel.

Edit: here’s a simpler version.