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.
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.
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.