Which technology/framework would you use to create a static website?

Which and why?

Comments (25)

Marco Alka's photo

Since I am in the process of re-building my website - and making it a static website plus (cron-automated) generator for content, here is what I use:

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

For my customers, I usually also create custom static websites and use the above tools, too. Depending on the requirements, I sometimes have to use Babel, core-js or specific polyfills as well.

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.

Rafael Morais's photo

Such a really complete answer, thanks for the time you spend writing it. Looks like really promising stack you have there.

Bala Hantsi's photo

I really like jekyll because its easy to install and use. Plus cool themes to costumize

Rafael Morais's photo

I think I will give a try. Thanks for the tip :)

Matthew Fung's photo

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.

Ultimately it depends on your knowledge/ability to React, and JavaScript as a whole; as it's wholly dependent on React.

Rafael Morais's photo

Thanks for the reply. I considered Gatsby but it seemed like overkill :/

Maximilian Berkmann's photo

That depends on the requirements, that being said I'll typically go for:

  • UI:
    • (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

Why (A)?

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.

Why (B)?

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.

Why (C)?

Because sometimes, the vanilla framework-less approach is sufficient.

Why (D)?

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.

Show all replies
Maximilian Berkmann's photo

Web and programming

It is, I was amazed when I was looking for Gatsby alternatives made for VueJS devs and stumbled upon Nuxt, VuePress and Gridsome.

Sébastien Portebois's photo

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 ;-)

Rafael Morais's photo

I'm also a fan of Hugo! :)

Jos Fabre's photo

html :grin:

Senthil Kumar's photo

Adobe Dreamweaver - You can Develop and see the output instantly

Marco Alka's photo

Software Engineer & Mentor

you can do that with any other tool, framework and library plus any regular browser, though.

Plus DW is expensive and easily leads you astray with its WYSIWYG editor... Well, personally I don't really like DW, because it lacks the ability to use many modern standard techniques in WebDev (support for certain frameworks, usage of packaging/optimization tool-chains, etc.). From my experience, most people recommend ditching DW, and that's also my opinion.

Senthil Kumar's photo

There is no much Technology and Framework required for a static website Hosting ( Windows / Linux ) will work fine. Basic Web publishing already enabled in both Web servers.

Alwin Doss's photo

I would use Hugo and host it on GitHub pages or on AWS S3 bucket. You get full control over your content and hosting.

Mikhail Maksaimer's photo

If you need static site to introduce your product or other things you can use landing builders, for example, tilda.cc, wix.com and ect

Usually building iu by html/css/js spend a lot of time, but you can do it very quickly in UI with landing builders

Francisco Quintero's photo

I've used twice Jekyll. It's simple and powerful at the same time and if you combined with GitHub pages it's even better.

Diego Bernal's photo

Here is a list of popular static site generators. If interested, here is a list of headless cms if you need content management.

I personally got with NextJS and host on Netlify. Jekyll and Netlify work well too

Newton Munene's photo

I've been loving stenciljs . It's fairly easy to use. Sort of combines the best of react+angular. But I mainly love it because I can build a whole site using web components only

Show all replies
Marco Alka's photo

Software Engineer & Mentor

I mean the definition by MDN, however I like to focus on disabled people and bots, since these usually are the critical groups we tend to forget and the former are the legally important ones.

As for accessibility features, if you want to write Angular code but have to keep in mind tools which cannot use JS (or only to a very limited degree), then you will have to ditch all the major features of the framework, which makes me wonder if Angular was a fitting framework for the project in the first place. It's important to use the right tools for the right job! Don't put a screw into the wall with a hammer, just because you like your hammer.

As a side note: Personally, I don't like SSR, because it wastes many CPU cycles and someone has to pay for that on top (it's a static site, why not finalize it at build-time? Why do you need dynamic generation of static content?). Also SSR introduces a new attack vector - it's software which can fail.