I write some of the most popular content on Hacker News. My HTML pages have an similarly austere style to what you might expect from Dan Luu or Fabrice Bellard.

I write some of the most popular content on Hacker News. My HTML pages have an similarly austere style to what you might expect from Dan Luu or Fabrice Bellard. However I make an effort to give them a slightly more distinctive modern feel, while loading just about equally fast. Here's how I do it. Example: https://justine.lol/sectorlisp2/ https://justine.lol/sectorlisp2/ First, I like Roboto. It's overused but it deserves to be. It's the Helvetica of our age. The problem is custom fonts go slow. The trick I use is to use a data: uri for the latin1 character ranges in an inline <style> tag at the very top of the page, so that the top portion of the article can start rendering immediately. <style> @font-face{font-family:'Roboto';src:url(data:font/woff2;base64,d09GMgABAAA... html{font-family:Roboto,sans-serif;font-size:14pt}body{max-width:960px,... </style> The only tools you need to do stuff like this are really uglifycss and uglifyjs. Plus maybe a shell script that runs files through `openssl base64`. To save on bandwidth fees, I've learned to defer autoplay videos until they scroll into the viewport. See http://justine.lol/sectorlisp2/video.js http://justine.lol/sectorlisp2/video.js to learn how. When copying to google cloud storage cdn it's a good idea to use the `-z` flag so content can be delivered with gzip encoding. gsutil -m -h Cache-Control:public,max-age=31536000 cp -a public-read -z com,dbg,css,html,a,h,lds,o,js,ttf *.js *.css gs://justine/sectorlisp2/ It's nice to not force people to use https. Dan Luu talks about the reasons why on his blog. Be sure to use tools like https://pagespeed.web.dev/ https://pagespeed.web.dev/ which will help you with the rest. Another good tool is https://favicon.io/favicon-generator/ https://favicon.io/favicon-generator/ for generating favicons. I'm very happy with it. I'm also a huge fan of https://excalidraw.com/ https://excalidraw.com/ and graphviz https://dreampuf.github.io/GraphvizOnline/ https://dreampuf.github.io/GraphvizOnline/ Also I'd give a shoutout to the optipng and pngcrush commands. PNG-8 is fabulous. So is Photoshop. Finally, for something like a blog, consider just writing HTML. Your time is better spent learning how to be really efficient at using an editor like Emacs that lets you be a monster with manual refactorings than you would with a static site generator framework, which are usually heavyweight and frequently change in ways that causes breakages and have lots of weird dependencies. I don't think they're the sorts of things that can be counted on if you need to go back ten years later.