17 ms·

How to build a website without frameworks and tons of libraries

• deleted 3y ago
  [deleted]
• zh3 3y ago
  It may not have a zillion libraries, but surprised that a site trying to be zippy uses low-contrast text (obviously, I am not a fan of the "increases engagement time" school of thought).
  • iskander 3y ago
    It's pretty readable at their large font size
    • Aachen 3y ago
      Agreed. I feel like I'm always the first in my company to complain when someone proposes a too-thin or too-light font style or color, but this read fine for me. I'd move away from monospace if anything, but I take that as a stylistic choice they made even if it hurts readability a little (not like thin gray that's used without even noticing: the dev already knows what's written there, or doesn't care if it's lorem ipsum, and checks the font only for form instead of also for function).
    • zh3 3y ago
      Is that a condemnation by faint praise? :) Could be because I'm reading on desktop and it works better on mobile.
      • iskander 3y ago
        I'm on a laptop and it looks totally fine to me.
  • CharlesW 3y ago
    It passes minimum (AA) contrast recommendations but fails enhanced (AAA) contrast recommendations. I also wouldn't settle for it on a site I'm responsible for.
  • lelanthran 3y ago
    There might be something wrong with your display setup. He is using, as far as I can tell, the solarised theme colours. They are very readable.
    • zh3 3y ago
      Could be but most sites render fine. Pretty stock setup, Dell monitors on Nvidia graphics, no tweaking.
      • lelanthran 3y ago
        Does this site look the same to you? [EDITED] https://www.rundata.co.za https://www.rundata.co.za It's my site, also using solarised (although, it respects the clients dark/light mode, so you will see either solirsed dark or solarised light)
• albertgoeswoof 3y ago
  I took a similar approach building mailpace.com's marketing/landing site: https://blog.mailpace.com/blog/using-html-modules/ https://blog.mailpace.com/blog/using-html-modules/ basically you just write in HTML, CSS and a wee bit of JS wherever you want it, and have a couple of tiny npm scripts that glue it together. Put it on netlify, cloudflare, github, or wherever and it scales right up. In comparison our blog is in Gatsby, and boy does that framework never seem to work right away when we start it up for adding a new post.
  • dimmke 3y ago
    I genuinely believe Gatsby is the epitome of everything wrong with front-end development. It’s such a bad framework. So complex and confusing and fragile just to generate static pages.
    • ukuina 3y ago
      Agree, when did simple template expansion go out of style?
• pacifika 3y ago
  Nice, it’s always interesting to discover blogging stacks. Historically a blog requires a feed, this is typically where super minimal stacks stop, although I guess you could scrape your index. I wonder how many web devs can still build a blogging app, a webshop, etc from first principles when mostly it’s all npm create packages and template languages. I started a php / SQLite blogging stack with basic web based editing and a feed (ah and tagging, a search), hope to add more indie web features to it.
• jonquest 3y ago
  Simple static sites are great ideas. Writing HTML/CSS and not relying on a WYSIWYG back-end editor is an awesome way to work, especially if you're using a templating engine to generate the static content as mentioned here. However, in my experience the people paying to have websites built or your in-house marketing team maintaining and updating the company website, making sure the SEO is up-to-snuff, etc. can't do these things. They don't want to learn how to do these things. The unfortunate truth is that more times than not they require Wordpress or something like it to do their job.
• gwern 3y ago
  This seems to fall into the 'simplistic, not simple' school of thought. You can have a relatively simple website if it doesn't do anything and if it cuts corners. Take your dark mode, which is just about the only nontrivial feature I see on this page. (One could also criticize the low contrast of the appearance and other problems, but that's less relevant to the simplicity thesis you're claiming.) First, your dark mode is implemented wrong in the lazy corner-cutting way of doing JS post-load instead of the correct way of CSS body classes; so you get the 'flash of white' unavoidably on every page load - just what every dark mode user with their phone to their face at midnight wants to see! (If your solution doesn't work, it doesn't matter if it's 'simple' or 'complex'.) Second, you implement what is like 3 lines of JS (setting localstorage & dark-mode) by pulling in what looks like an entire interpreter for a custom 'hyperscript' https://hyperscript.org/ https://hyperscript.org/ language which seems to mostly just offer some sugar over JS; now, maybe you use 'hyperscript' elsewhere for reasonable purposes, but surely pulling in a 96kb (uncached) library solely to run def saveMode() if first classList.value of <html/> contains 'dark' set localStorage.kkColorMode to 'dark' else set localStorage.kkColorMode to 'light' end end init if localStorage.kkColorMode is empty set localStorage.kkColorMode to 'light' end if localStorage.kkColorMode is 'dark' add .dark to <html/> end is a bit against the spirit of this "simplicity is the ultimate perfection" enterprise...? Personally, I feel like I see some easy perfection to add right there. (And is this hyperscript stuff also why the HTML doesn't validate?) Third, this binary toggle is a bad way to implement dark mode because it ignores system/browser settings, so if a user has, say, enabled dark-mode on their smartphone OS, they still get served light-mode until they manually enable it; note that some systems change it based on local time/ambient light too, which is quite nice... if websites & apps respect it instead of overriding it. And since localstorage expires and users switch devices, they would have to do so repeatedly. Is this a good thing? A user probably would disagree with the developer who is touting how 'simple' the dark-mode implementation is because they cut corners in handling system settings/auto-dark-mode...
  • nickelpro 3y ago
    > First, your dark mode is implemented wrong in the lazy corner-cutting way of doing JS post-load ... I agree with your whole comment, but the media query approach is also tricky. You typically still want to offer a toggle while respecting prefers-color-scheme, and you may want to give priority to whatever choice the user has made with that toggle if they've used it on your site before. This still requires JS and localstorage. So what to do? My preferred choice is having an inline style element of: body {visibility: hidden; opacity: 0;} This will maintain the previous page until DOMContentLoaded, at which point you can query prefers-color-element and localstorage, set the body class correctly, and let the page paint.
• INTPenis 3y ago
  For information, static sites are unchallenged imho. Even for a certain level of collaboration, I think one could get away with using static sites. I haven't tried this in practice but imagine having a git-based CI/CD flow for a static site, where non-technical end users could use the web-based Markdown editors of github.com or gitlab.com to make small changes, save and push via a pull request. Each merge is of course approved by a more technical user. I would love to hear if anyone has tried this model.
  • spondylosaurus 3y ago
    I'm a technical writer and this is how I'm running docs at my company. You'd be shocked at how easy it was to get one of our content marketers comfortable enough to start opening pull requests for an internal-only docs site. (It helped that I assured them that, thanks to how branches and approval workflows function, absolutely no changes they made could ever wreck the live site.)
  • wonger_ 3y ago
    I've thought of something similar! A git-based flow for a friend's static portfolio site, where he can make text edits and upload images, and the site builds that content with HTML templates. Not sure how the GitHub markdown editor would feel for the user. It might be really great, even for uploading images. I was imagining a static admin page, WYSIWYG, that makes git pushes on submit. These were the headless CMSs that seem to be able to accomplish that: https://www.siteleaf.com/ https://www.siteleaf.com/ https://decapcms.org/ https://decapcms.org/ And not git based, but similar idea of static content editing: https://editable.website/ https://editable.website/ And this is what the admin edit page usually looks like: https://quick-edit-demo.vercel.app/admin/index.html#/collections/edit/post/~/anotherPost https://quick-edit-demo.vercel.app/admin/index.html#/collect... But it was taking a bit of work to configure.
    • INTPenis 3y ago
      Github.com and Gitlab.com have after all put a lot of effort into their WYSIWYG editors, but they're not very useful for image uploads. That part should probably be handled separately just to avoid slowing down the git repo with huge binary files. For example upload an image to S3, note the path, enter it into a markdown syntax image url. There are many ways to skin that cat, depending on the technical skill level of your client. They could even e-mail the images to a script, or message them to a bot on an IM service, that then returns the URL for them to use in Markdown.
• spondylosaurus 3y ago
  Maybe I'm misunderstanding, but this doesn't sound all that different from your average static site generator—Python-based Jinja templating for HTML files versus Ruby-based Liquid templating for HTML/Markdown files (i.e., Jekyll).
  • nickstinemates 3y ago
    Instead of using an off the shelf framework, they made their own. And that's cool. Making stuff is fun.
    • spondylosaurus 3y ago
      For sure! I'm all in favor of bespoke new tools. If anything I'm just confused about the way they describe this in contrast to SSGs (and why a SSG wasn't a good option for them), and then go on to create a tool that literally generates a static site. :P Maybe I'm being obtuse, but the reasons they gave for not using an established SSG primed me to expect a radically new solution. Versus "we didn't like any existing SSGs so we built our own," which was my takeaway from the whole thing.
      • Terretta 3y ago
        I'm with you. Jinja and watchdog.py taking somefile.src.html -> somefile.html feels a bit static-site-gen-ish.
        • fullstackchris 3y ago
          [flagged]
          • dang 3y ago
            Can you please stop posting unsubstantive comments? We're trying for something different here. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
• FpUser 3y ago
  For me the question has been solved for ages. If it is a website - then it is plain HTML with some CSS. The exception is - there will be some JS if we want saucer flying across screen. If it is an application - the logic will be coded in plain JS that talks to backend using JSON based RPC. No frameworks bar some domain specific libs. Minifying / building step can be included for production. Works well for me.
• deleted 3y ago
  [deleted]
• ad404b8a372f2b9 3y ago
  Fancy that! HTML and CSS? To make a Website? They must be mad! All joking aside, I use the same stack save for the templating. Unless you are a web developer I don't see the point of a CSS framework, it's much easier to roll your own. Nor of a site generator, I tried Hugo it saved no time at all. Nor of JavaScript, a few months ago I tried replicating the websites of a few companies to improve my css skills, HTML and CSS were enough to reproduce the appearance of all of them, yet none of their website would even appear without JavaScript enabled. We stack on framework after framework, new languages, new tools, all for nothing but increased complexity and busy work for a new generation. (Save for the 5% of websites that actually need that stuff.) Also interesting to see they actually sell a service, would have been curious to know what their prices are like.
  • mteam88 3y ago
    Agre except have used astro with good success
  • djbusby 3y ago
    I find it very hard to design. And then design consistently. So, I love some CSS that has that pre-defined. Otherwise my looks like heck.
    • ad404b8a372f2b9 3y ago
      I see your point. My recommendation if you wish to improve your designs is to do them outside of CSS if you don't already. With something like figma or Penpot you will have your fonts, palette, spacing and layout all predefined. Then once all your views are created using these common elements, you only need to transcribe them as classes in your CSS and use those few classes where needed in your HTML. I'm not a design expert, so take it with a grain of salt, but I used to be terrible and following that workflow allowed me to get decent.
      • djbusby 3y ago
        See, my problem is that I don't want to get good. I just want to ship.
• pier25 3y ago
  I'd go with Astro. Super easy to get started and has lots of goodies to generate static HTML. You can scale it up later if you need more than just a static website.
  • n3storm 3y ago
    This is the thing with digital stuff, nor simple nor simplistic stays enough.
• klysm 3y ago
  Using tailwind and jinja...
  • suddenclarity 3y ago
    Reminds me a bit about the minimalism trend where people boasted about getting rid of all their belongings, only to mention at the end that they borrow everything they need from their parents or roommates.
• pknerd 3y ago
  Slightly off-topic: His single "index.php" with jQuery is helping him to earn thousands per month. https://twitter.com/levelsio/status/1675829733668319233/photo/1 https://twitter.com/levelsio/status/1675829733668319233/phot...
  • graypegg 3y ago
    I’m all for jquery to handle sending and event and updating some dom elements, that’s simple and pretty easy to debug actually. Not using any modern CSS layout though, ehhh I would never want to return to the age of .clearfix, that feels like the opposite of simple.
  • mgbmtl 3y ago
    Are there ways to view tweets without an account? Kind of like archive.is? For now, I could enter it in Google and view cache, but I assume that will go away soon. And if I understand correctly, it's not the index.php, but the actual service behind it, that earns thousands per month. Looks nice :)
    • deleted 3y ago
      [deleted]
    • viraptor 3y ago
      Nitter.net was that thing, but the rate limits killed it for now. We'll see if it gets back online.
      • Given_47 3y ago
        So sad. And even if one didn’t care about privacy, the speed of Nitter relative to the official Twitter client was amazing
    • oneeyedpigeon 3y ago
      There used to be, but Elon nuked it. I think, as commenters, we should start embedding the content of a tweet right after we link to it.
• noobdev9000 3y ago
  Why? Most companies require skills in frameworks and libraries. The fact you can glue them together shows a different skill, that you'll most likely use in job daily. This feels so forced. Make a joke CV, strip it of any mentions of these "bad" things, try applying. Good luck.
  • nkozyra 3y ago
    To be fair, they're still using frameworks and libraries. A static site generator is probably not going to be an entry on a CV anyway.
  • deleted 3y ago
    [deleted]
  • kaesve 3y ago
    There's a ton of value in building stuff without tools. It's somewhat similar to learning two frameworks; seeing React's philosophy makes me a better Vue programmer. In a similar vain, building stuff without tools teaches me a lot about what those tools actually offer me. What stuff is really hard? What stuff is really easy to abstract out? How do Vue/React/Whatever do these things? It also teaches you more about your platform. In the end, all these web tools and frameworks are running in that same browser. I find especially with newer web developers, it's hard to solve something in React/Vue/.. because they don't know how to break up the problem. If you'd roughly know how to solve the problem without those frameworks, it becomes much easier to figure out how to solve it with them too. Finally, I also just get toolchain fatigue. If I want to build a simple landing page, I don't want to learn new stuff, I don't want to read what changed in the latest versions, what the correct way of the day is to set up a project. Honestly, I don't even want to have a build pipeline and module swapping dev server, that inevitably needs to be configured. Just some static html/css/js is often good enough. And as I said, you also learn which problems frameworks solve well, so you'll know when some static files isn't the right choice.
• streamcode9 3y ago
  github pages
  • simultsop 3y ago
    And here is you getting nagged by someone for a suggestion which will nag me too.
  • oneeyedpigeon 3y ago
    I was quite surprised that was missing from their list of options.
• CodeWriter23 3y ago
  Thank you, no
• z3t4 3y ago
  I think everyone writing content for the web should learn HTML and maybe some CSS - although the design part should be done by someone good with CSS, so that you only need to use semantic HTML, or you will end up with div's all over.
  • oneeyedpigeon 3y ago
    I think CSS is an order of magnitude more complicated than html, so I'd leave that to the professionals. But pretty much everyone should learn html, I agree with that.
    • wg0 3y ago
      It has gotten better. There are three major algorithms for layout - flex, grid and the positioning types along with display type behaviours. Cross Browser compatibility has also gotten better.
    • z3t4 3y ago
      With a little bit of CSS I mean enough to know how to add some extra padding to all buttons on the site, like finding button { padding 4px } and change that to 6px.
• fimdomeio 3y ago
  I believe the most minimalistic and productive way is to just use php. The language was specifically just created for that. If it's a simple site then you don't need composer you don't need router logic. just create separate files for header footer navigation and include them on each page.
  • asddubs 3y ago
    if you want simple, you can't beat PHP + HTML. I wouldn't actually go that simple for anything that's more than a single purpose script, usually I would at least have a separate templating library, but it's really nice that you can do it.
    • SoftTalker 3y ago
      Yeah the advantage of PHP is that it is its own templating language. You don't need anything else.
  • bluGill 3y ago
    There are a number of simple frameworks, but soon you are back to the common bloat from adding too many frameworks.
  • pickingdinner 3y ago
    Ya, or any server side scripting language. You just want the ability to refactor your site, as in, name, save, and load data and code blocks. And if html allowed inserting html as it does css or js from external files, even that would be mostly be redundant. If only it let you use <html src="" /> at will.
    • sseagull 3y ago
      If the http server supports it and it is enabled, you can do Server Side Includes https://en.m.wikipedia.org/wiki/Server_Side_Includes https://en.m.wikipedia.org/wiki/Server_Side_Includes
      • 3y ago
• Xenoamorphous 3y ago
  A tiny mostly static website written by one person certainly doesn’t need anything special. A website/webapp with millions of visits per day and a ton of stakeholders requesting features every week, on the other hand... It all depends on the use case, like most stuff.
  • oneeyedpigeon 3y ago
    Agreed. I wonder what the ratio is between the former and the latter...
  • Dah00n 3y ago
    Crazy. I wonder how cars would look if stakeholders had a say.
  • Lio 3y ago
    Totally agree. I think where complexity really creeps in is as you add multiple new content editors with varying skill sets. If you want a team of people that don't know HTML or rest of the stack to edit, manage and deploy it then you're going to need a more complex abstraction. The alternative might be a training programme for new staff in HTML, CSS, git and rsync. You're trading one type of complexity for another. As you say, it all comes down to use cases.
• jamiedumont 3y ago
  I've landed on the same approach for my photography portfolio. Benefit of jumping ship from development to photography is that I don't have to rely on Squarespace like most other photographers! After trying a few server-based options like Ghost, Statamic and self-built ones with Phoenix or Vapor (I've covered some ground as a dev) and the usual SSG options I ended up just writing everything as straight HTML without any templates and upload to a Hetzner server using rsync. The lack of templating for shared UI like navigation is a touch irritating, but with some RegEx magic I haven't found a change I want to make that takes more than a few minutes. I got caught out early on with some greedy RegEx that nuked some content, but git to the rescue. Image generation with all the sizes and format variants is laborious, but it prompts me to try new layouts rather than relying on cookie-cutter ones like Ghost. Plus I've noticed a slight improvement in image quality generating my web variants out of my RAW editor (Capture One) vs using the libraries and CLI tools used in most SSGs. It's slower, but my thinking is that it's more akin to putting together a photo book. It take more effort up front, but once it's done, it's done for good, and won't need mangling in and out of various CMS over the next 20 years!
  • grilledchickenw 3y ago
    I've been meaning to do this and move away from Smugmug. Would you be okay to share your portfolio and/or source?
    • natpalmer1776 3y ago
      On their profile they have their website linked (https://jamiedumont.com/ https://jamiedumont.com/)
    • jamiedumont 3y ago
      Someone beat me to the punch and added the URL (thanks!). The site is what's left over after trying a few different options, most notably Ghost and later Zola. Most of the current layout mimics what can be created within Ghost's editor. I then migrated to Zola which shares the bulk of the layout. Currently most of my images are coming from Zola's "/processed_images" directory. You can view the Zola codebase here[1] if you like. The layouts I'm currently working on (not yet published) are heavily influenced by Andrew Clarke's work [2] and his book "Art Direction for the Web" [3] which I highly recommend if you want to explore less generic layouts online. I hope that on day my site can be example that web design can be as varied and interesting as print! 1: https://github.com/jamiedumont/zola_jamiedumont.com https://github.com/jamiedumont/zola_jamiedumont.com 2: https://www.smashingmagazine.com/author/andy-clarke/ https://www.smashingmagazine.com/author/andy-clarke/ 3: https://www.smashingmagazine.com/2019/03/art-direction-release https://www.smashingmagazine.com/2019/03/art-direction-relea...
• Animats 3y ago
  I'm still using Dreamweaver 8. I have to run it under Wine on Linux, but I have a permanent license, and it works fine. That does most of the drudge work. Sometimes I'll hand code some Javascript. I wish there was a modern version of Dreamweaver that didn't phone home, didn't use "cloud", and didn't require endless payments.
  • vereis 3y ago
    I've not tried this for any adobe products, but you could try running them in a locked down environment (container, vm, whatever) and don't allow network access.
    • spectre3d 3y ago
      Adobe Creative Cloud apps stop working after a while if they can’t phone home. Adobe Creative Suite apps do not. “After Adobe Systems' acquisition of Macromedia in December 2005, Dreamweaver 8 was added to Adobe Creative Suite 2.3 and was later succeeded by Adobe Dreamweaver CS3.“ [1] (Replacing Adobe GoLive, good riddance) So you could use up to Dreamweaver CS6 with just a serial number (usually requiring one-time internet activation), but anything newer requires regular internet access. [1] https://macromedia.fandom.com/wiki/Macromedia_Dreamweaver_8 https://macromedia.fandom.com/wiki/Macromedia_Dreamweaver_8
• mindwork 3y ago
  https://10kbclub.com/ https://10kbclub.com/ https://250kb.club/ https://250kb.club/ https://1mb.club/ https://1mb.club/
  • InnerGargoyle 3y ago
    thats very interesting..
• mildred593 3y ago
  The article says "Unfortunately, Jamstack tools require an initial setup and an initial (and continuous) learning" but with the bare minimum, static website generators are nothing more than glorified template engines. I'm using Hugo and for my purposes, I always start without any theme. Basically, I start to write a markdown file for each page, and an HTML template, then if I need more complexity I have the power available underneath. Static website generators are not necessarily complex to use, and they generally stay compatible from version to version so you only need to learn the new features and only if you want to use them.
• theflyingelvis 3y ago
  Whatever happened to html?
• deleted 3y ago
  [deleted]
• iamdamian 3y ago
  I adopted this mentality a few years ago and it's served me very well. Pro tip to anyone looking to do the same without losing the benefits of SquareSpace's WYSIWYG editor: try out Bootstrap Studio [0], which gives you a visual editor but also full control over the CSS and the ability to create reusable components. The licensing is also user-friendly (doesn't require a subscription). [0]: http://bootstrapstudio.io http://bootstrapstudio.io
  • akudha 3y ago
    Bootstrap Studio looks good. Is there anything like that for Tailwind?
• deleted 3y ago
  [deleted]
• wizofaus 3y ago
  Did anyone else notice the fact that on the home page, for any window width >= 1280px, the text "Your design. Our HTML and CSS" (in the body) overlaps the text in the footer (and is strangely hard to select for copying to the clipboard). In fact the footer tends to overlap the body at various window sizes. Can't help but think that you'd wanna at least get a simple thing like that right on such a page... Edit: I noticed it's using "rem" for specifying the font size, and I've actually seen quite a few sites where the font sizes look wrong using that unit, I'm wondering if it's something specific to my system (but happens both with Chrome and Edge).
  • djbusby 3y ago
    On my Chrome/Android I have the default font size larger. And sometimes HN loads with my preference - and others it loads tiny. No rhyme/reason.
    • andai 3y ago
      On iOS Safari, sometimes the same element type on the same page will be different sizes (e.g. the navigation buttons on xkcd).
      • MaxLeiter 3y ago
        I think you and the parent comment are running into a mobile feature that attempts to ensure text is legible: https://maxleiter.com/blog/mobile-browsers-resizing-font https://maxleiter.com/blog/mobile-browsers-resizing-font
  • wizofaus 3y ago
    Guess it wasn't just my system, they've since fixed this. Though at the cost of the footer never being visible without scrolling now (even at ~2100 x 1080 size).
• cassepipe 3y ago
  tldr; the author is using jinja templates + tailwind + a python script It all feels a bit moot because most frameworks exist to create website that tend to be web apps If you just want static website well it's pretty easy to use any kind of simple templating system that will give you some html + css + optionnally js. Hell you don't even have to generate the file, you can use CGI to generate your page on the fly with CGI (I like haserl) If you like or are competent in dealing with quirks, you can do it all by hand instead. I just got into webdev and I really like Svelte and SvelteKit so far. Svelte works well if all you want is to colocate a bit of html, css and js. You can really start simple and iterate when you have bigger needs. Now, if I want to make a webapp I'll use SvelteKit even if only for the baked in client side routing based of the structure of the project.
• toddmorey 3y ago
  I don’t get it. They didn’t want a static site generator so they wrote a static site generator.
• alin23 3y ago
  I use something very similar on https://lunar.fyi https://lunar.fyi and https://lowtechguys.com https://lowtechguys.com but I wouldn’t call this “simple” anymore. They use Jinja templating, I prefer Slim (https://github.com/slim-template/slim#syntax-example https://github.com/slim-template/slim#syntax-example) which has a more Pythonic syntax (there is plim [0] in Python for that) I use Tailwind as well for terse styling and fast experimentation (allows me to write a darkMode-aware and responsive 100 line CSS in a single line with about 10 classes) For interaction I can write CoffeeScript directly in the page [1] and have it compiled by plim. I run a Caddy static server [2] and use Syncthing [3] to have every file save deployed instantly to my Hetzner server. I use entr [4] and livereloadx [5] to rebuild the pages and do hot reload on file save. All the commands are managed in a simple Makefile [6] ——— You can already see how the footnotes take up a large chunk of this comment, this is not my idea of simple. Sure, the end result is readable static HTML and I never have to fight obscure React errors, but it’s a high effort setup for starters. Simple for me would be: write markdown files for pages, a simple CSS for general styling (should be optional), click to deploy on my domain. Images should automatically be resized to multiple sizes and optimized, videos re-encoded for smaller filesize etc. I have mostly implemented that for myself (https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog%20on%20my%20iPhone%20in%20a%20train https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog...) but it feels fragile. I’d rather pay for a professional solution. [0] https://plim.readthedocs.io/en/latest/ https://plim.readthedocs.io/en/latest/ [1] https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd/index.plim#L169 https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd... [2] https://caddyserver.com/docs/command-line#caddy-file-server https://caddyserver.com/docs/command-line#caddy-file-server [3] https://syncthing.net https://syncthing.net [4] https://github.com/eradman/entr https://github.com/eradman/entr [5] https://nitoyon.github.io/livereloadx/ https://nitoyon.github.io/livereloadx/ [6] https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile
• hcarvalhoalves 3y ago
  You can create a pretty decent static website with templating, sitemap, etc. just with Emacs' built-in Org Mode. Here's my minimal setup: https://github.com/hcarvalhoalves/org-mode-site-template https://github.com/hcarvalhoalves/org-mode-site-template
• michaelteter 3y ago
  "as simple as possible but no simpler" - (not Albert Einstein, probably) Pure HTML + CSS, with the CSS in the <head> or inline in each html tag... this is a fine way to get something going. And then when you have two pages, you pull the CSS out to a separate file. But once you start making any site which has multiple pages of the same format, you want some kind of template system with includes and a (static page) generator. If your pages are data-driven, then you might want a programmable site generator which can ingest the data and spit out pages. But if your data is "live", you end up needing per-view page creation, which is at minimum PHP realm (and certainly leaning into modern web framework with running servers realm). I recently built a pro-bono website for a hobby of mine. The site is a dance promotion and event site, and the owner is a very non-technical dance teacher. It uses Eleventy (https://www.11ty.dev/ https://www.11ty.dev/) to generate a static site on Netlify (free tier), and it has some custom build code which pulls data from a Google Sheet which I have setup for the teacher to use to define upcoming events. It took a good dozen hours to build, but now it works like a charm while costing nothing to operate or manage. Now having built this, I have discovered a great and powerful sweet spot between absolute bare minimum and Rails/Phoenix/Django level.
  • divbzero 3y ago
    Yes, even OP ends up using two libraries: Jinja for templating and Tailwind for styling. It’s the happy medium, as you say, between bare HTML + CSS and full-blown Django/Phoenix/Rails + Angular/React/Vue.
  • hunter2_ 3y ago
    > when you have two I tend to refactor on two, but I've heard that letting DRYness lapse until three tends to be the sweet spot in terms of likeliness to break even in effort. Although I guess pages per site is almost guaranteed to hit 3 anyway, whereas in general a block of code being used 3+ times doesn't necessarily have that same likelihood.
    • michaelteter 3y ago
      I agree on 2 vs 3, but with CSS and other formatting rules it is too easy to become inconsistent on 2. And I hate inconsistency.
• jaza 3y ago
  Not sure about other Static Site Generators, but Eleventy lets you write your content in straight HTML, or whatever else you want, doesn't have to be in Markdown. Do that, plus don't use anything much else except simple template includes, and you've basically got the author's build script, without having to write or maintain any code yourself. Just sayin'.
  • michaelteter 3y ago
    There may be other equal or better options, but I also recently discovered and built something with Eleventy. I'm a big fan now.
• 72736379 3y ago
  For static pages I'm a huge fan of using SSG's (static site generators) like Hugo
• 0xEF 3y ago
  This is the same approach I took when trying to set up a small project site at SDF.org. It was a great way to build a site, and learn some new things while having a bit of fun. Sadly, I just don't have the time to generate the content I wanted to do, so the site sits.
• fullstackchris 3y ago
  > Mind you, Hetzner webhosting starts at 2 EUR! How crazy is that? Oh yeah? and netlify is totally free for an infinite amount of sites! how crazy is that? > We use a short Python script with exactly 45 lines of code. Including comments and blank lines. > > In summary, this is the simple toolchain for building our web: > > Developer updates index.src.html > Watchdog.py detects the file change and ... > ... renders Jinja template into index.html and ... > ... calls Tailwind CSS CLI to generate styles.min.css. love posts like these that insult literally any other way of doing things except their way, claiming it's "simple" when in the end they don't even show the step by step code or link to any repository that shows how it's done. regardless of "without frameworks or tons of libraries", its esoteric and definitely not an average or common way of doing things (to the rest of us), and clearly DOES use codes (and/or?) a framework!!! no description of what the heck "Watchdog.py" is, no description of what Jinja - I for one don't know what either of those are, sorry if i'm an "ignorant normie" simply put, it's quite clear you ARE using frameworks, just in your mind, perhaps, you "aren't" this whole framework vs no framework vs BS vs BS vs BS has gotten really out of hand, and 99% of devs cant see the forest from the trees what in the world did i just read
  • calvinmorrison 3y ago
    99% of developers are out her building with php, .net or Java and its fine
    • teej 3y ago
      In 2005 maybe
      • chefandy 3y ago
        Perhaps not 99%, and perhaps not new sites, but I'll bet those three environments combined run more than 80% of sites right now.
        • calvinmorrison 3y ago
          99% of code is boring, closed source, and provides business value. Most people do not work at FAANG, and do not want to. People mostly work at SMBs doing things that are not super exciting, and that's OK.
• collaborative 3y ago
  I recently built AI Search with 0 frameworks and dependencies (please don't hate because of the word AI) For comparison, similar sites are a lot heavier (not criticizing anyone here) phind.com = 1.09MB you.com = 1.3MB aisearch.vip = 0.035MB I still find the ~1MB of other sites to be ok, but 35kB is the smallest I've ever made a full SPA and that's simply because every single letter in the code is specifically made for this one and only site (and uses vanilla everything)
  • Kuinox 3y ago
    FYI I went on your site and it took 5 full seconds to load.
    • collaborative 3y ago
      Thanks for letting me know. Oh yeah, I can see in the logs that someone was summarizing a 100-page PDF. It slowed things down for a few seconds. All should be well now (I need to tweak the PDF function to prevent this, it seems to cause issues)
• roblh 3y ago
  Alright, I’m gonna be that guy. Right now, sveltekit + skeleton has absolutely blown my mind at how fast you can make a usable prototype. It’s honestly insane. You don’t even need to know svelte, really. As long as you can understand the file based routing thing, the rest is just html unless you really need more. Especially with the tailwind stuff built right in and a mostly vanilla looking theme. I’ve tried probably a dozen different things in the last few months, ranging from Astro to Lit to NextJs to using the built in golang templating system, pug, eleventy, and more I’m forgetting. So far this is my favourite in just about every way.
  • zztop44 3y ago
    I agree. Yes, it’s a “framework” but it easily outputs static sites that work fine without JS enabled, you don’t need to know any Svelte to use it (but it’s there if you want it), Tailwind works out of the box, and deploying it to eg Netlify is dead simple (much easier than FTP). If you ask me, it’s the best static site builder right now, and a lot simpler than what’s described in this article.
  • tornato7 3y ago
    This is a great recommendation. I'm interested in hearing more of your experiences trying different web frameworks. Did you try Flutter as well?
    • roblh 3y ago
      I haven’t tried flutter! It looks interesting, but I don’t have much interest in learning Dart so it’s pretty low on the list of things to try, for me. I have experience with Capacitor and Vue, which kind of accomplishes the same cross platform thing, although I wouldn’t really recommend it. Another one I tried was Hugo, but I also didn’t bond with it. I found Go makes it so tough to have your templates be properly reusable if you stick to only the standard library template engine.
  • andersrs 3y ago
    SvelteKit is amazing. I disagree about Skeleton though. Skeleton makes you feel productive and safe at first but it has a lot of foot-guns. It leads you down a happy path until you don't like something and then it's difficult to customize. You're much better off using DaisyUI or something headless like MeltUI when it's ready. Take a look at Skeleton's own site https://www.skeleton.dev/docs/get-started https://www.skeleton.dev/docs/get-started Press page down - no scrolling happens. Hover your mouse over the navbar - no scrolling. Print the page - the content is cropped to only what's shown on the screen. I've raised this with them and it hasn't been a huge priority yet tones of sites are using this pattern from the <AppShell> component. Skeleton thinks you can just take your dark theme, invert the colours and end up with a decent looking light theme which just isn't the case. With DaisyUI you get a more mature/performant/popular framework that takes accessibility seriously. It's amazing what they can achieve with just CSS animations and no JS. It solves the hard part (HTML, CSS) and let's you write the easy part (Svelte). You're also less locked into Svelte - you can much easily pull your DaisyUI html into a different framework.
• deleted 3y ago
  [deleted]
• lionkor 3y ago
  I've found a combination of picocss (or similar), a webserver with some templating (like handlebars) and as much server side rendering as possible pretty simple, and pretty easy to use, so far. For example, one could use rust with some webserver and handlebars-rs to do this. You can add databases to this, and whatever else you need, and it works nicely. If you want to change anything, its very vanilla html, css, javascript, or rust/c++/nodejs/whatever else. No new frameworks to learn, and you decide the structure.
• vogre 3y ago
  > Frameworks bad Yeah cool! >We use html and css sooo hip! >We use jinja wait.. what? >and self-made file-watching static generator that uses python and css-generator Are you kidding me? That's the real good case of NIH syndrome.
• fullstackchris 3y ago
  "don't build sites a complex way with FRAMEWORKS or LIBRARIES!" "instead, here's our way with a DIFFERENT set of frameworks and libraries!" ...you're kidding me right?
• ploum 3y ago
  Sounds already too complex for me. I wrote my post as Gemtext (the Gemini markdown) and wrote a python script that convert it to HTML and generate an index page. Also, I put the CSS in each page because I’ve 42 lines of CSS and I did the math to show that having 42 more lines in each file would never cost more than having a second http request. Honestly, it was a lot simpler than expected, without using any python library or any template. The hardest part was generating the email to send to the list. I spent month analysing different frameworks, different static site generators. I spent week trying to find a good CSS. According to the git history, it took me 2 weeks of hacking to get it done including importing 18 years of Wordpress history. And without having to learn anything because it was straight python. And the best of all is that I can easily change/correct if I’ve a bug. It’s my code. We, computer scientists, forgot completely that we could simply code adhoc solutions instead of trying to reuse everything. We take more time to learn and adapt than to do. https://git.sr.ht/~lioploum/ploum.net https://git.sr.ht/~lioploum/ploum.net for the code (the site itself is https://ploum.net https://ploum.net)
  • idlewords 3y ago
    Email? Python script? Git?? Okay, Rube Goldberg. I serve my site from a 6502 processor I carved out of balsa wood back in 2003 and epoxied to an ethernet cable. When I want to make changes, I heat the EPROM with a hair dryer until the right bits flip. No templating, no code, no bloat.
  • ad404b8a372f2b9 3y ago
    Gotta say, that's a great blog. I opened it only to check the design and ended up reading 4 articles back to back. It feels nostalgic scrolling down and back through our technological history.
• keyle 3y ago
  That this is at the top of hn boggles my mind. It's a new generation I guess.
  • deleted 3y ago
    [deleted]
• hugozap 3y ago
  Most framework devs don't have any incentive to stop adding features. What was a simple and elegant tool ends up trying to do much more and the additional complexity negates a lot of the benefits.
• masfuerte 3y ago
  I use pandoc (and a makefile) as an SSG. It has stuff like syntax highlighting and TeX equations built-in and the install is one exe, not a pile of node or python cruft. It's simple and reliable.
• NKosmatos 3y ago
  Back in the old days (90s), I remember seeing the “made with notepad” icon on the footer of many pages :-) I used it myself on many websites. Heck, we were still using the <blink> tag back then. Here’s an Easter egg for young HN readers, search for “blink tag” on Google and see the results ;-)
• revskill 3y ago
  It's a chicken-egg problem. In order to build a website without frameworks, you should master the frameworks first, in order to understand their shortcomings ;)
• deleted 3y ago
  [deleted]
• hugozap 3y ago
  You can get far with htmx and any server template language. Common patterns are already encoded as html attributes.
• plainOldText 3y ago
  I was reading just today about this project using "almost 14,000 lines of raw PHP mixed with inline HTML, CSS in <style> and raw JS in <script> tags" and making $60,000/month. [1] Talk about non-pretentious stacks. [1] https://twitter.com/levelsio/status/1675829733668319233 https://twitter.com/levelsio/status/1675829733668319233
• varispeed 3y ago
  I miss these simple days. Now to make a website, first start to design a cluster, what services it will run, the CICD pipeline and after a week of battle forget what was the site you wanted to make.
• ahmedfromtunis 3y ago
  Frameworks and libraries should not be limited by ideology. The primary objective should be to utilize whatever is necessary to achieve the task at hand. And no more! When creating websites, the focus should not be on competing to use the fewest (or most) number of tools, but rather on effectively serving users and ensuring their satisfaction. *User experience should be the guiding principle.* What concerns me about this article is their simplistic view that using a minimalist stack is solely a matter of choice, without acknowledging the nuances involved. It comes across as arrogant. Furthermore, their demonstration of "building a website without frameworks and numerous libraries" is based on their own website, which is nothing more than a static landing page with links to blog posts. Could anyone realistically build an Uber or an Airbnb using the same approach, even if they wanted to?
• Uehreka 3y ago
  I’m just really tired of this debate about “frameworks” and “complexity”. If your client asks you for a custom CMS with a multi-stage publishing workflow with i18n and regulation-compliant a11y, you’ll need high-powered tools to build it in the time clients expect. Lots of clients in enterprise are like this, which is why the demand for this stuff is so high. If you’re working in B2C this may be surprising, but this is what the underwater part of the tech industry iceberg is. Yes, a complicated Next.js setup or Vite toolchain isn’t necessary for a static blog. But the people who are talking seriously about these tools aren’t talking about making a simple blog site (even if that’s what their “reduced teaching case” tutorial is). So can we just chill with this framework hate? If you’ve got ideas for simple ways to make web sites, go ahead and publish tutorials, and if they’re appealing then people will start doing things your way where appropriate. But please don’t position yourself in opposition to a vague “spicy toolchains and trendy frameworks” enemy.
  • robswc 3y ago
    Agreed, and this is someone who isn't a fan of the complexities frameworks introduce. Not OP but I'm not sure why people think you can't just use different tools for different jobs. There's times where a framework isn't needed but in my experience its rare, unless you're doing something _very_ simple that won't be changing often. I can't imagine how a "simple tools" site would work with a team and client... and that's not a diss on anything its just that I really don't see how.
  • okeuro49 3y ago
    I agree. Furthermore if you're trying to do anything complex and you don't use a framework, you just end up creating another framework. But this time there are no updates or help on Stack overflow for the person who inherits the code.
    • sanitycheck 3y ago
      Eh, I read this a lot. An app architecture is not a framework, frameworks get complicated because they have to be generalised enough to serve multiple projects with different requirements which leads to a ton of abstraction. Then because they're complicated they're difficult to learn. An architecture concept just needs a page or two of docs and diagrams to understand, and the code is right there in the app. You don't need a framework to implement relevant design patterns. Those apps can also last longer, because there's less pressure to rewrite in React/Svelte/Solid/etc when the existing code isn't dependent on some obsolete framework - Ember/Angular 1/etc.
• __david__ 3y ago
  emacsformacos.com still uses a CGI script written in Perl which is just a very simple wrapper around Template::Toolkit. It _used_ to be CGI even in production but it had to change for silly reasons (_not_ related to speed!). The CGI script still exists but has a small tweak to loop over all the pages and save the output of each. Then I just rsync the output to the production server (which still runs Apache, lol).
• vbezhenar 3y ago
  My advice would be to use github and github pages. It uses jekyll by default which is good enough for static website. It's easy to add domain. You can use HTML or Markdown and you don't need to write anything. I read jekyll starting guide and didn't do anything else, it was enough for everything I wanted to implement. I also use cloudflare for caching, but that's more because I wanted to tinker with it. Surely GitHub can withstand personal blog.
• Kalanos 3y ago
  https://key.bio https://key.bio is built with pure html/css/js and hosted/cached on GCP
• BirAdam 3y ago
  So, didn’t use frameworks but then used frameworks? Tailwind and Jinja.
• noisy_boy 3y ago
  I fondly remember writing a bottle.py+jinja based dashboard wrapped into a windows utility that allowed to let that run as a service. My first web app, only for my team's internal use, without any autoscaling etc but boy did I have fun writing it! It's a scale thing - today I would reach for a framework for bigger things but lightweight setups have their own place.
• namuol 3y ago
  Kind of annoying to see tailwind mentioned practically as a footnote when it clearly enables a huge amount of productivity for a system like like this. Styling is easily half of the work for most web development, even for the simplest websites.
• nathants 3y ago
  i make two kinds of websites: - static. markdown rendered to html using github’s api[1]. - dynamic. a go binary and an html file with inlined js zipped together and shipped somewhere[2]. it’s nice to never consider the machinery of either of these anymore. instead i think about building interesting things. cf workers + r2 are a great addition to this when heavy egress is needed. 1. https://github.com/nathants/render https://github.com/nathants/render https://nathants.com/ https://nathants.com/ 2. https://github.com/nathants/aws-gocljs https://github.com/nathants/aws-gocljs https://gocljs.nathants.com/ https://gocljs.nathants.com/
• slmjkdbtl 3y ago
  I never understand the appeal of templates, why not just use a regular programming language and make a function that generates html string like h("div", { class: "container" }, [ h("p", {}, "oh hi!"), ]) // -> "<div class="container"><p>oh hi!</p></div>" It's the same ergonomics as custom template languages as far as I know, loops, variables, functions etc, plus you can just call them directly in your server code, not having to worry about another syntax that's not even turing complete
• jongjong 3y ago
  As someone who was around when people still wrote apps in plain HTML and .js files without a build step, I'm surprised to read stuff like 'the simple toolchain for building our web: Watchdog.py detects the file change and ... renders Jinja template into index.html and ... calls Tailwind CSS CLI to generate styles.min.css...' You don't need any of those tools. You can build a fast website and even a complex reactive web app with plain HTML, JavaScript and CSS and you don't need any transpilation step. These days browsers have native features that we couldn't even dream about 10 years ago like HTMLElement (Web Components) which you can use to isolate components (each with their own dependencies) and build reactive front ends with very little boilerplate required. You don't even need a bundler these days because now there is HTTP2 which allows servers to preemptively push resources to the front end before they were requested by the browser so the round-trip latency argument for using a bundler is gone. Not to mention the script tag now has async and defer attributes to give you fine-grained control over the execution order of scripts on a page or within a component. Also, caching controls are on another level nowadays. It's probably even less efficient to bundle everything into a single file as the whole thing has to be downloaded again each time any change is made to any tiny script... I feel like there are all these amazing native features that are being ignored completely in favor of heavily-marketed over-engineered bloatware. It boggles the mind... From where I'm standing, it feels like there is a psyop in this industry to make everything as complex as possible. Even the narratives around keeping things simple are over-complicated. Junior developers these days are accustomed to a level of complexity that I find unfathomable and they are incapable of seeing through the abstractions. There is all this stuff available in the layers below which is less complicated and provides a more elegant solution than all the abstractions you learned, yet you are discouraged from peeking under the hood. All these layers of abstraction offer nothing substantial aside from lock-in factor for certain large tech companies which benefit from people thinking that building software end-to-end is more complicated than it really is. How many junior devs were discouraged from building a new website or app because they thought they didn't have what it takes. They could have done it if they knew: It's OK, you don't need to know React or Next.js or NestJS or TypeScript or Tailwind or WebPack or Lambda/serverless or ORMs... There are better technologies and techniques to learn with your time which will make you a better developer much faster and with less pain and unlearning required later...
• thinkpad13 3y ago
  what is the design language name for a deisgn such as this blog? I find it really fascinating clean uncluttered and easy to read
• metmac 3y ago
  This resonates a lot. I really wanted to get on the Hugo train but I just couldn’t. I’ll probably give it another go someday. For now it’s straight HTML,JS, and tailwinds for CSS. Then I let Parcel do all the minifaction magic when shipping to GitHub pages.[1] Which is the only “magic” in this equation. I could pull it out if it ever broke. [1] https://metmac.dev https://metmac.dev
• xyzzy4747 3y ago
  I just do literally everything with next.js and Vercel and either MUI Joy or Tailwind.css... works pretty well and fast to implement once you understand it.
• _mql 3y ago
  Been dedicating a ton of time to this goal lately. I released a "SvelteKit template for building CMS-free editable websites" earlier this year and the idea has evolved since. I started out with using Postgres + MinIO for storage, but have switched entirely to SQLite. I also added an in-place image cropper, to resize and optimize images on the client side (WebP output) before uploading and storing them in SQLite. I chose Svelte because it's easy to build classic Web pages (with minimal JS overhead), and at same time implement the reactive layer (e.g. editing) on top of it (will be loaded async). However we are also evaluating the possibility to port this to a LAMP stack at some point. Oh and everything is dynamic here, no build steps involved, edits are live immediately. Just launched my first client project using this approach: https://trails-shop.at?editable=true https://trails-shop.at?editable=true (hit the red button in the bottom-right corner) Project website: https://editable.website https://editable.website Source Code: https://github.com/michael/editable-website https://github.com/michael/editable-website HN discussion: https://news.ycombinator.com/item?id=35456083 https://news.ycombinator.com/item?id=35456083 Twitter Thread, that explains how it works under the hood: https://twitter.com/_mql/status/1655553156799922180 https://twitter.com/_mql/status/1655553156799922180
• wg0 3y ago
  Hetzner is the hands down best cloud/infrastructure provider for the quality and price both but for a static website, spinning up a cloud VM is far from minimal. You need lots of setup, a web server and web server configuration. That too when far minimal options like Cloudflare Pages exists that are dirt cheap as well and is somewhat "serverless".
  • arynda 3y ago
    [dead]
• pjbrunet 3y ago
  WordPress was very simple back when it started. You needed just a few files: header.php, home.php, single.php, footer.php, and I wrongly assumed "Code is poetry" was about the brevity of poetry. More recently, for simple websites I created a Golang template that reads a PSV config file. (PSV throwback to my Perl days.) Uses very little memory, no database, and I can reuse the same Go code for multiple websites. I think about sharing the code, but I'm not sure if it's worth the trouble. I'm encouraged to see people here using their noggin, following their bliss, keeping things simple, and I hope this trend catches on.
• mohitgangrade 3y ago
  I build my sites the static way too these days. The best part is that I can host my sites on Cloudflare Pages, which is completely free and can easily handle a traffic spike. Plus, it has a built-in CDN, so it's super quick. I use Astro for my websites, because I'm familiar with the framework and have used it for many of my clients. Even though Astro is a framework, it doesn't feel like one when creating content inside it.
• udbhavs 3y ago
  The first hurdle in trying to make simple multipage apps with handwritten HTML/CSS is, as the author mentioned, getting to the step where you have reused components across pages and have to jump into a server-side templating setup like PHP, or use something that introduces a build step if you want to stay static. I don't know why there isn't a simple method for including HTML partials incrementally in handwritten sites without doing either of these. WebComponents and slots seemed perfect for this but they force you to define them with JS.
  • skydhash 3y ago
    HTML was built for documents. And documents was supposed to stand on their own, like man pages.
• Tepix 3y ago
  The page has low contrast (3.5:1) and uses a fixed width font. Both are bad for legibility. The contrast is even too low to fulfill the WCAG minimum success criteria (4.5:1). To me as a site visitor, that's more important than whatever framework it uses. Also, uploading the site via FTP? There are far better options.