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

Which and why?

Write your answer…

11 answers

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.

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

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

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

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

Reply to this…

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.

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

Reply to this…

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

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

Reply to this…

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

I'm also a fan of Hugo! :)

Reply to this…

Load more responses