- GitHub, because I cannot live without versioning anymore, plus I am testing GitHub Pages for hosting
- NodeJS, because my build pipeline runs on it, plus I usually script some additional optimizations myself as need arises
- Pug (former "Jade"), because I really like it for templating static HTML
- SCSS, because imports, mixins, variables, scopes, etc.
- TypeScript, because I love types and a stable basis to build my application on
- Parcel, because it's a zero-config bundler
- ESLint, because I like my code base to be checked style-wise, too
- Zeit, because it is ideal for CD/CI imho (better than GitHub Pages at least). Plus I can put an API and jobs there.
I am still not 100% sure which hoster I want to use in the end, because Pages has slightly better performance than Zeit and Microsoft is a bigger company. I might end up with a mix of both, depending on what kind of stuff I want to present on the site.
As a side-note, I usually use JS only for animations or background-loading content for a smoother UX on static sites. I sometimes add a webapp as admin-section, which I do not count to the regular static site, though, because it's a part visitors normally don't see or use. The admin section usually generates static files on save, which is rather green and leads to great performance - plus zero security bugs in a dynamic generator or framework.
Unbezahlte Werbung durch Nennung und Verlinkung von Personen, Organisationen oder Unternehmen.
Personally, it depends on the scope of the project. If the site is intended to be purely informational or containing blog-like content I'd go with Gatsby every time.
The ability to produce highly scalable, component-driven front-end architectures with the load speed of a static site is amazing.
That depends on the requirements, that being said I'll typically go for:
- (A) Gridsome + SCSS / CSS3
- (B) Pug + SCSS / CSS3 + ES8
- (C) HTML5 + SCSS / CSS3 + ES8 / TS
- (D) (Not used yet but a future option) Gatsby + SCSS / CSS3
- Content: a headless CMS or just using the repo + a code editor + git
- Hosting: Netlify / GitHub Pages
- Tools: ESLint (JS/TS linting) + Prettier (formatting) + NPM (scripts) + Snyk (vulnerability check) + Remark CLI (Markdown linting)
- Back-End (optional): NodeJS
Because Gridsome is awesome and uses VueJS which is great to get stuff done and it has data sources and plugins for several CMSs. It also uses NodeJS.
Because the HTML code will have repeated sections (so not DRY) which Pug handles pretty well. And it also allows me to use pass data from NodeJS to the views without hassle.
Because sometimes, the vanilla framework-less approach is sufficient.
Because, I may need or want to use a React UI in which case, Gatsby (which I don't know yet) would be the framework I'll use.
Why Netlify/GitHub Pages for hosting?
Because they are easy to use and suitable for static websites including SPAs/MPAs.
Why did I choose the tools mentioned above?
Because that's what I use for most of my NodeJS projects as it ensures a consistent code style with as few vulnerabilities and bugs as possible.
Of course, there are a plethora of options like Zeit/Now.sh/Surge.sh/AWS/Firebase/Azure for hosting and VuePress/Nuxt (Generate) for the UI. All of which are suitable for static websites (although some are preferable if you go serverless) and there are obviously other options that aren't suitable for static websites but there's that.
Since I don’t see it mentioned yet, I feel obliged to mention Hugo We use it for half our API docs (the other half is 100% dynamically generated from the OpenAPI specs, which are automatically generated from the code), and it’s a pleasure to work with.
I haven’t used thousands of static site generators, only Jekyll and Hugo in the last years (and I forgot the older one I used 7 or 8 years ago...), but I’m super happy with it, it is super fast, as a huge community ... worth having a look at it ;-)