Ask HN: How do I make a website in 2023?
I just had an idea for a side project and I want to make a modern website. I spent the last 20 hours trying to figure out what the best practices are now. Everything should've gotten easier, right? It has been 10 years after all.
But I'm totally lost. 4 layers of bundlers. Two layers of language abstractions. CSS frameworks that need to be compiled!? Several more layers of database abstractions and services that I have no idea what they do by looking at their landing pages.
My requirements are pretty simple. I want it to work on all devices and look good. I need some user authentication and user state, but nothing complex. The data model is relatively simple, but it needs to be stored somewhere, local storage is not enough.
From all my research, my best bet right now seems to be next.js + React + Tailwind because that combination seems to be relatively popular and well-documented with good editor integrations. Not sure what to use for the database/backend though. I also looked at htmx but don't really like the idea of templating html snippets on the server without great editor integration.
So, how do I actually make a modern website? Is it really this hard?
(I'm aware there have been similar threads the past year, but they're already a year old, which is an eternity in JS world)
88 comments
[ 2.4 ms ] story [ 200 ms ] threadAs soon as you restrict yourself to a specific stack, you'll be able to find out by researching via the web.
Exactly this!
My personal website is pure html and css on a custom backend. I do not find the combination lacking.
[1]: https://w3techs.com/technologies/history_overview/programmin...
Not saying this is the case because I don't know you, but that's been the common theme for a long time.
It's like hearing a carpenter complaining their hammer is just not good and nobody should use hammers and they should instead use a screwdriver because everyone knows how bad and outdated hammers are.
My favorite story is the client that came to me after a superstar dev made them a one pager with Vue, Atomic design and so on. Name a framework buzzword, and that onepager had it.
The client was desperate because the superstar Dev billed them 15k and then disappeared because his pre-booked hours where depleted and he didn't have any more capacity.
I rewrote the entire site in HTML + CSS + Javascript (all static) in 3 days in order to be live. Then I just turned everything into a simple custom Wordpress Theme so that they could change this or that image and text in a backend they knew.
Charged the client 5k (cheap for them, fair for me for a 4-day max project) and they were happy and thankful beyond any possible imagination.
I am not a superstar dev, I don't know all the frameworks, but I know how to structure content thanks to my larger professional background in media. I strongly believe that interpreting and guiding a client's wishes and goals is more important than what you build with.
If anything, "latest and shiniest" or "exaggerated abstraction" is almost never good for mid-size business with regular needs. That's a massive market with a lot of value to go around.
https://htmx.org
The popular solutions you find online are for Enterprise. Where different teams maintain the same site and no one "owns" any part of the code.
JS suggestions: Sveltekit, Next.js, Remix Server-side suggestions: Rails, Phoenix, Django, Laravel
You can get a web site quickly by asking https://durable.co to IA-write it. You will get a non-descript, not "this is really me" web presence.
If you are looking for a challenge you can try to belong to the http://1mb.club you can even aim for the https://1kb.club/
https://www.phoenixframework.org/
If it's not an app itself, you probably don't need a framework such as React for a website and you don't need to precompile and bundle CSS either for most simple website use cases.
That’ll keep you in the realm of “making a website” and away from “learning the entire Node.js stack from first principles.”
You could add (non-compiled) Vue.js templates to it which is more akin to jQuery, or try Blazor (ASP.NET that runs both on the client and on the server.)
Neither of these are particularly well recognized as the typical path, but they will do the job if your intent is to build a functional website.
If your goal is to build a complex single page app then you will do fine with React, Angular or Vue. All of these have a learning curve made more complex by the compilation stages required to get it to the browser, but the documentation made by the developers should be enough to get started.
If you want to become competent without having to waste time tracking down blog posts or Stack Overflow answers for specific questions, go and buy a Udemy course for the particular library you want to use. All of the big ones have good courses that will take you from zero to making your own application. It should give you a strong foundation. The courses are inexpensive if you wait for a sale day. There are often a couple every month.
Finally, I think this is where ChatGPT really shines. It is a great tool for exploring new libraries and solving all the small problems you run into along the way. Imagine all the questions you would want to ask on Stack Overflow but they would get downvoted, you can ask those questions to ChatGPT. Stuff like how do I make a checkbox, why does this piece of state not update like I expect it to, how do I display my components in certain routes, show it your webpack file and ask why your application is not starting, etc.
For css, I usually don’t bother with any advanced framework, I commonly go with mui, but you can just do css files or css in js.
Sveltekit on Vercel, with a Cloudflare Worker wrapped around the Notion API. It even updates live
For complex things like if you need DB or something else depends on your knowledge.. I'd go for Rust for the API and Bulma.io for the Frontend.
For JS only next.js and Tailwind looks like a good bet but no clue.
For frontend, vanilla JS and modern CSS go a long way. Reactivity is something you can build yourself if needed (https://news.ycombinator.com/item?id=35937464, among other examples).
Though for CSS I'd like to know if there's a slightly less outdated alternative to Spectre: Something that ships a sane default design (and not just unstyled components), but isn't a giant mess like Bootstrap.
That said, I recommend trying the SvelteKit tutorial and seeing if you like working with it. If nothing else it’ll let you skip a lot of that framework-analysis paralysis. https://learn.svelte.dev/tutorial/welcome-to-svelte
Personally, I build webapps in Go now. I make heavy use of the HTML templating package, and then just use vanilla HTML, CSS, and JS on the front end. Database in PostgreSQL or MySQL.
That will build a binary that you can run locally, and when you're ready to deploy you just drop that and your template files on a VPS. Very easy to migrate this stack to a cloud architecture as you scale, e.g. on App Engine.
The tech debt I have on this stack right now is still running with the Gorilla Toolkit project which has been shuttered.
https://htmx.org/
Nice essays too: https://htmx.org/essays/
Some useful explanation videos using Django backend: https://m.youtube.com/playlist?list=PL-2EBeDYMIbRByZ8GXhcnQS...
- HTML/JS/CSS
- Rails/jquery
- Sveltekit
- Flask/Django/Laravel/Golang + JS/CSS
- ASP.NET + vue.js/Blazor
- Nexts.js / Rails
- Cockroach/Netlify for DB
- Phoenix
- React
Let's face it, there's no consensus.
Consensus might be imposed (e.g. a monopoly situation) which does not seem to apply yet (thankfully).
Consensus might also emerge if independent entities realize that they might benefit greatly from it (e.g. accelerating the maturity of consensus approaches, reducing costs etc.).
So far we can empirically state the obvious (that centrifugal forces are stronger than consensus forming forces). Whether the future will look like the past is anybody's guess.