DEV Community

Glenn Tippett
Glenn Tippett

Posted on

How do you build your static site?

Hey all,

I am curious to hear how other people build their static sites.

What I mean is, say you need to build a basic landing page - with maybe only 3 pages max.
The site has the usual markup, styling maybe some JS for effects.

Are you always reaching for a framework or library such as React or Angular?
Or are you just creating some .html, .css and .js files and deploying that folder to a host?

Curious to hear how others approach this.

Discussion (31)

Collapse
darkain profile image
Vincent Milum Jr

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.

Collapse
glenntippett profile image
Glenn Tippett Author

Reminds me of motherf***ingwebsite.com/
Just good ol' pure HTML

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

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.

Collapse
leewynne profile image
Lee

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)

Collapse
dirkolbrich profile image
Dirk Olbrich

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.

Collapse
rramirez1414 profile image
Ramon Ramirez

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.

Collapse
niorad profile image
Antonio Radovcic

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.
Collapse
mjgs profile image
Mark Smith

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.

Collapse
billraymond profile image
Bill Raymond

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.

Collapse
barelyhuman profile image
Reaper

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

Collapse
cdthomp1 profile image
Cameron Thompson

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.

Collapse
elyngved profile image
Erik Lyngved • Edited on

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.

Collapse
bezpowell profile image
BezPowell

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.

Collapse
txai profile image
Txai

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

Collapse
khalyomede profile image
Khalyomede • Edited on

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.

Collapse
desirelabs profile image
Franck LEBAS

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.

Collapse
tetri profile image
Tetri Mesquita

Jekyll on GitHub Pages

Collapse
brewinstallbuzzwords profile image
Adam Davis

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

Collapse
vikirobles profile image
Vicky V • Edited on

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.

Collapse
christopher2k profile image
Christopher N. KATOYI

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

Collapse
disgustingdev profile image
disgusting-dev • Edited on

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

Collapse
grocker42 profile image
Grocker • Edited on

When tailwind css is a option primo.af

Collapse
glenntippett profile image
Glenn Tippett Author

Nice one, I'll have to check this out

Collapse
lemoolu profile image
xizhi

Maybe i will use Next, or No frameworks

Collapse
pulkitsingh profile image
Pulkit Singh

Gatsby, or Nuxt/Gridsome

Collapse
inigochoa profile image
Iñigo Ochoa

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

Collapse
domhnallohanlon profile image
Domhnall O Hanlon

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.

Collapse
yasingencnet profile image
Yasin Genç

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

Collapse
dirtyf profile image
Frank Taillandier

With a static site generator :)

Collapse
danielhansson profile image
Daniel Hansson

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?