How do you build your static site?

I did something like this, but not even a collection of files. Just ONE file, that's it. 90% HTML. 5% CSS. 5% JS. No frameworks. No libraries. Nothing. Just clean, elegant, simple code. More often than not all of those other utilities are just way overkill and hurt end user experiences, even if just for a few end users.

Pug + SCSS + ES6 → HTML + CSS + JavaScript. Compile with this following the directory structure for simple static site.

Use a framework such as Vue and React if instant page effect is mandatory.

No framework for simple SPA’s just plain HTML, CSS & a sprinkle of JS. There are lots of free templates to just from also that are very well written these days. Then upload to Netlify, use their contact form function and it’s winner winner chicken dinner (or quorn)

At the beginning just a single html file with with a linked styles.css, just to have something up.
When it starts getting more complex I use Gohugo with a TailwindCSS setup, but try to avoid JS as much as possible.
Heck, I even did some Wordpress way back in time.

I built mine using pure html and css. As I learned new languages and frameworks, my go to for getting my hands dirty in that new language/framework was to rebuild my website from scratch. I have portfolios in html/css, bootstrap, and react so far.

I'd do one index.html and put the CSS into the

. Similar with JS. If there is more than 1 page, I'd put the CSS and JS into their own files. If I need multiple languages and/or have a non-tech client who wants to edit the content themselves, I'd go with a simple file-based CMS like Kirby-CMS.

I was using some static site generators for my linkblog, but decided to create my own specialised static generator.

It’s reasonably simple. Reads a bunch of json files then generates html files using templates. Also generates RSS feeds. Automation builds and deploys on push to the repo main branch.

What started as a play space turned into my production website. I use GitHub Pages, which supports Jekyll. Using Jekyll, I created the framework for my site (header, footer, head html tags, etc). Next, I added my posts (mostly podcast posts, but also blog posts) using forestry.io as my markdown editor. GitHub automatically updates my static site and hosts it on my domain for free. Every change starts a build.

I do have a GitHub action I’m going to start using that builds my site nightly for some technical reasons I will get into only if you are interested.

Normally if it’s a really simple use case where I can handle most work with well structured vanilla js, i go with it.

For the current blog i ended up making a small cli tool

For a quick prototype of something I just pick up nextjs prototype it and then see if there’s things I need to reconsider for the actual version

Depending on what the site is for/what the requirements are. For example, I created my portfolio site initially as just .html, .css, and .js files. Once I found a tech stack to learn, I converted my portfolio site to that stack (MERN). But since I host with Netlify, I don't have a true MERN stack as Netlify hosts static sites so I use their serverless functions to give my site the added functionality.

I used to go for a react + webpack boilerplate on github when making a new project, one with a preconfigured dev server and build commands for each export. Then I'll throw it up on Netlify or something similar. Nowadays my goto is a new Next.js project - works nicely for tiny projects and scales up well when you need to grow it.

Plain HTML and JS (when I actually need it) always. I do generally use SASS, just to let me split my CSS into separate files. The SSG I use, Zola, supports that out of the box with a single executable.

If I want to do some advanced image optimisation I might use node, but generally I try and adhere to KISS as much as possible. Working this way I can quite easily make a site that is fast and accessible, frameworks almost always seem like overkill to me.

For doing my wedding website I followed the excellent approach from motherf****website hahaha. Just the old plain html+css and some JS just for writing some stuff to a database. I mean, not everything needs to be a SPA. SPA exists to solve a specific set of problems, and you don't really need a frameworks if you aren't doing anything that complex

I am currently building a documentation website (19 pages at this moment).

I used a home made building steps:

• Gulp for the task orchestration
• Rollup (with TS) for the JS compilation
• PostCSS (with Tailwind) for the CSS
• Pug for the HTML

When I don't need a static SPA website, this is always my goto tools for the job. Even with less files I would certainly keep this way.

I like the idea of coding with a frameworkless stack as far as it doesn't impact my client's budget. But I don't want to waste time on problems that have already been solved like navigation with history nor configuration. I'm using NextJS because it is minimalistic and expressive.

Jekyll on GitHub Pages

Nuxt seems perfect for a project I've been planning on starting, so thanks for the suggestion!

I build mine in NextJS. Is brilliant for static sites as well or server side rendering, super fast, SEO, and easy deployment to Vercel. I think is always good to try to learn something new and get out of your comfort zone.

I started with my own template HTML CSS ES6 + Gulp, then I switched to Gatsby and now I’m using SvelteKit (ex Sapper)

When do static, I'd think not about 'framework or native technologies' - but about your set of some prepared reusable elements

E.g. Gatsby is real good, especially when you can go to your repo where you store some react elements you developed for different customers through years - thus you can just reuse them again

If you have good html/css snippets to reuse - go with it, and don't forget to save new those for future yourself

When tailwind css is a option primo.af

Maybe i will use Next, or No frameworks

Gatsby, or Nuxt/Gridsome

I built mine using Eleventy. Designed the pages with nunjucks and wrote the content in markdown. Siemple and effective

Some sort of framework like Bootstrap and hosted on GitHub pages?

Have you tried Jekyll? I used it a good bit and found it really easy to get started with their templates.

I prefer 11TY. No extra library, no extra configuration.

With a static site generator :)

I once did a 1-page website for generating some settings to a game using Vue + Vue-material+Vue-select. A bit overkill, but taught me some valuable skills. So Lose-win?