I'm actually so chuffed. By combining modern, quick-to-develop tools Svelte, Tailwind and Pullnote I managed to build a fully functioning website (and we're talking registering the domain, choosing an AI logo, building and deploying via Vercel) in under an hour!
The step-by-step guide to build one yourself is here with the full code available on github.
What the tech-stack?!
Here's why I picked this stack of components. tl;dr - these are the simplest, fastest, most enjoyable web components available to devs in 2024.
Svelte
Svelte is a front-end dev game changer IMO. For speed of development AND speed of execution it is currently unbeatable.
- Svelte takes the things to like about React, Angular and Vue (namely, responsive app-like user experience and nicely organised component based code for the dev)
- It then takes away the stuff that sucks (it uses actual HTML rather than pseudo HTML like JSX, does away with esoteric naming conventions, eschews pointlessly convoluted cruft to make stuff reactive, and has no need for horrible third-party stores just to make basic data available across the system)
- Server-side rendering (like Next.js) for decent URL titles, preloading and actual SEO comes out-of-the-box with SvelteKit
- Svelte is compiled rather than interpreted meaning is it the fastest web framework by quite some degree
Tailwind
CSS is awful. Designed and built upon over the years since the early web, the decisions made over that time have left us with an unweildy, verbose mess. Unless you are a fulltime CSS dev, this leads to untold levels of frustration getting things to JUST ALIGN and ACT SENSIBLY. Don't deny it - you've been there. Many times. It sucks. I can't see how you can argue with that.
Enter Tailwind. Yes, yes you have to learn new classnames for everything you thought you sort of knew, but there aren't many of them so you are constrained into sensible defaults - and those defaults work together. Throw a few classes together and you've got a multi-column format that works. Make it responsive? No more 300 lines of media queries, maybe 5 characters adding a mobile class instead. I know you hated CSS and you think maybe better then devil you know, but seriously learn this. It will take you an hour tops and it is a joy.
Pullnote
If you've ever been through the pain of either building a content management backend system yourself (TinyMCE!) or installing wordpress as a backend to use for a site you will appreciate Pullnote.
- It handles the admin side of creating and managing docs so you can deploy a read-only site and users can still change the copy / add articles etc.
- The API is SO simple - just make a GET call with your apikey for whichever url slug your user has landed on, and pullnote gives you back title tag, content (as HTML or markdown) etc.
- It writes the SEO bits every page needs for you - you can even include a pre-built section to drop in to your HTML <head> for each page if you want to let someone else handle OpenGraph metadata and JSON-LD
Deployment
Finally, Vercel is * so freaking awesome *.
Point your domain at it (I've even memorised their A record IP 76.76.21.21 now!) then point it at your git repo and every push to main is automatically built and live in seconds. Gah. How did we live without it?
I also hear that Netlify and Cloudflare Pages do both now support SvelteKit and are pretty ok as well :)
Related docs
Download the code for this blog from GitHub at https://github.com/webuildsociety/svelte-headless