Top 23 JavaScript Static Site Generator Projects
-
Project mention: How to build a user-customizable design system with CSS modules | dev.to | 2022-01-25
We’re using React, Nextjs, and CSS Modules. React is a frontend framework great for building dynamic and stateful UI. Nextjs enables server-side rendering out of the box, which leads to faster and more performant web pages. CSS modules allow styles to be scoped to the component they apply to. This is important as a codebase scales and class name collisions are more likely. You can read more about the challenges of CSS at scale here.
-
Project mention: Over 90 WordPress themes, plugins backdoored in supply chain attack | news.ycombinator.com | 2022-01-22
The CMS space is incredibly crowded. The vast majority of WordPress websites would be cheaper, faster, and more secure if they were just moved to SquareSpace, which has the WordPress features that 99% of sites would need.
For more custom projects, I prefer the headless variety[1] because it makes sense to separate the data and presentation layers. That means you have the full ecosystem and flexibility of HTML/CSS/JS.
Ghost[2] was the first serious competitor I saw years ago. Gatsby is among the most popular these days[3].
But honestly, information sites should just use SquareSpace or something like it. There's no reason to maintain static site infrastructure at this point.
-
SonarQube
Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
-
Project mention: A personal blog with articles&videos, which tech stack do you recommend? | news.ycombinator.com | 2022-01-26
I have personally used hexo[1] successuccessfully in th epast and would recommend it. Though any ssg, likd zola[2], should be enough.
If youyou're comfortcomfortable writing html directly it will also suffice. Make a list of what you need (posts, kmages, videos , comments) and compare SSGs[3].
[1]: https://hexo.io/
-
The first thing we need to do is create a new VuePress project. It's really easy with the latest version of npm or yarn. From the VuePress docs
-
Netlify CMS + Flatbread work great together with SvelteKit. I use that combo for most of my freelance work for small businesses.
-
eleventy 🕚⚡️
A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.
We have been using Yarn 2 for quite some time, having originally switched to it for its native workspace support which is great for monorepos as we happen to have one. Because we use a lot of different dev tools (in no particular order - Vite, Vitepress, Astro, esbuild, Webpack, Eleventy, Firebase tools, Tailwind...) and many more actual dependencies. It's easy to understand how many dependencies we're bound to have when you see all the frameworks we support, whether on WebComponents.dev or on Backlight.
-
Project mention: [React] Busco una persona de frontend para que me ayude con un proyecto personal | reddit.com/r/CharruaDevs | 2021-12-14
-
OPS
OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
-
This site is built with help of excellent static site generator Gridsome, Buefy and Bulma CSS and JSON file as a data source.
-
A static site generator I've been enjoying lately (and using for my blog) is Metalsmith: https://metalsmith.io/
It feel like it's the best of both worlds, because it's simple to learn and customize, but there are plugins for the things you don't want to spend time writing yourself.
For example, I'm using plugins to: check for broken links, generate an RSS feed, and run a test server with automatic reloading.
But then I was able to easily add in my own code to handle relative links, generate Graphviz diagrams, and format dates.
One other recommendation: I hated almost every template language I ran across (Hugo's, Liquid, Nunjucks, EJS), but I'm thrilled with the simplicity of Handlebars (https://handlebarsjs.com/), although it is a bit limiting and the "block helper with parameters" syntax is strange (perhaps an indicator that I'm trying to do too much in the templating language!).
-
With Vue3, its possible to pre-render each page with `https://github.com/chrisvfritz/prerender-spa-plugin` However, I would like to render each page to an actual html file, so that `vue-router` will not be used, but instead the server will take care of serving each page. Is that possible?
-
react-snap - Zero-configuration framework-agnostic static prerendering for SPAs
-
-
Project mention: Do you know a good website builder like wordpress but in javascript or typescript ? | reddit.com/r/selfhosted | 2022-01-13
https://nextra.vercel.app/ maybe?
-
Project mention: If Doge hits $1 I may finally be able to fund my game! | reddit.com/r/dogecoin | 2021-04-19
https://github.com/saberland/saber (a static website generator) I'm currently rewriting this one.
-
Project mention: Add A Comment System To A Jekyll Blog Using Staticman - 1 / 2 | dev.to | 2021-10-14
Another possible solution to add dynamic content to a GitHub website is to use staticman. On the opposite of the previous solutions using external databases, staticman creates files in your repository, updating your website statically. It is free and open-source but not as straightforward to implement as disqus. The nice thing is that it will store all your comments in your git repository, so there is no risk of losing them.
-
I used https://github.com/TryGhost/gatsby-starter-ghost, which isn't quite a theme, but comes with a decent amount of complexity, and some bugs.
-
Project mention: How to set up environment to work in a package? | reddit.com/r/learnpython | 2021-09-10
The tool is Sigal, posted on https://github.com/saimn/sigal. I've forked it already, and cloned it down to my own machine, and have the repo open in VSCode.
-
-
Project mention: How to create / store "complicated blog post" without plain HTML? | reddit.com/r/webdev | 2021-09-23
Absolutely. I'm limited to nanogen ( https://github.com/doug2k1/nanogen ) as far as ejs, but maybe it does what you are looking for. It doesn't support markdown and ejs as a single file afaik,... Could be wrong. I just render my markdown with a markdown js library client side with data pulled from an API. Idk, lots of options I suppose. But anything's possible.
-
-
api2html
A CLI tool to transform Swagger/OpenAPI/AsyncAPI docs to beautiful HTML pages via Shins/Widdershins.
-
Project mention: TIL: The way Netlify detects which framework your code uses is open source | reddit.com/r/programming | 2021-07-01
-
Another kind of problem we ran into is some dependencies having undeclared dependencies. When using yarn it was not a problem because those undeclared dependencies are sometimes very used. For example, after the migration we realized mdjs-core had not declared its dependency on slash.
JavaScript Static Site Generator related posts
- A story of how we migrated to pnpm
- CMS for HTML CSS blog site
- Is Next a good choice to rebuild my portfolio site with or would this be considered overkill?
- Eleventy v1.0.0: First
- Recomendations to build a learning platform for a small company?
- What's the feeling about using modals for content in 2022?
- Creating Cool Content – It’s the Jam(stack) with James Q. Quick
Index
What are some of the best open-source Static Site Generator projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Next.js | 80,306 |
| 2 | Gatsby | 52,188 |
| 3 | Hexo | 34,083 |
| 4 | VuePress | 19,863 |
| 5 | netlify-cms | 14,879 |
| 6 | eleventy 🕚⚡️ | 11,243 |
| 7 | react-static | 10,003 |
| 8 | Gridsome | 8,060 |
| 9 | Metalsmith | 7,709 |
| 10 | prerender-spa-plugin | 7,064 |
| 11 | react-snap | 4,599 |
| 12 | cms.js | 3,023 |
| 13 | nextra | 2,782 |
| 14 | saber | 2,140 |
| 15 | staticman | 2,113 |
| 16 | gatsby-starter-ghost | 875 |
| 17 | sigal | 736 |
| 18 | Charge | 388 |
| 19 | nanogen | 183 |
| 20 | tinyjam | 123 |
| 21 | api2html | 107 |
| 22 | framework-info | 104 |
| 23 | rocket | 94 |
Are you hiring? Post a new remote job listing for free.
