Rewriting my website in plain HTML and CSS
1–10 of 218 posts
Re: Rewriting my website in plain HTML and CSS
#2I'm surprised to not see Astro mentioned, its whole schtick is providing very similar DX to frameworks like SvelteKit except in a way that's geared towards generating plain HTML/CSS with zero JS by default. You get things like components with scoped styles but they are compiled down to nothing. It's really a breath of fresh air.
Re: Rewriting my website in plain HTML and CSS
#3Nice job! If only HTML had a serious templating system(no the template tag isn’t enough) that could be used without JavaScript, we won’t need any 3rd party system for assembling static sites. For example a mechanism for including partials with the tag and refer them inside a or directly into current html
Re: Rewriting my website in plain HTML and CSS
#4I did kinda the same thing. Not being a backend dev didn't stop me using some PHP, basically as template language. It has a few downsides as well, but overall I am happy with it.
Re: Rewriting my website in plain HTML and CSS
#5I decided to do write from scratch for my own site, and found that a real burden was maintaining lists of pages: there was no framework helping me out, and every time I added a new page I had to remember to go update my list of blog posts in the 2 or 3 pages I could access it from.
To solve that and other issues, like adding an rss feed and letting pages specify their own publish date, I did what anyone would do: write a custom web server. It's up at https://github.com/playtechnique/andrew/, if anyone wants to give it a whirl.
Re: Rewriting my website in plain HTML and CSS
#6I'm surprised to not see Astro mentioned, its whole schtick is providing very similar DX to frameworks like SvelteKit except in a way that's geared towards generating plain HTML/CSS with zero JS by default. You get things like components with scoped styles but they are compiled down to nothing. It's really a breath of fresh air.
Yep -- I rewrote my blog over new year's with Astro and am pretty happy w easy markdown and a bundle size of zero bytes.
Re: Rewriting my website in plain HTML and CSS
#7Nice job! If only HTML had a serious templating system(no the template tag isn’t enough) that could be used without JavaScript, we won’t need any 3rd party system for assembling static sites. For example a mechanism for including partials with the tag and refer them inside a or directly into current html
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/if...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/po...
https://en.wikipedia.org/wiki/Server_Side_Includes
Also, other than to satisfy a purist desire, why do you need this?
You can pre-render HTML quickly using a variety of template systems, and it would outperform what you are suggesting every time (from a client's perspective). I mean, think about the potential CSS resolution complexity, FOUC, etc.
Re: Rewriting my website in plain HTML and CSS
#8Nice job! If only HTML had a serious templating system(no the template tag isn’t enough) that could be used without JavaScript, we won’t need any 3rd party system for assembling static sites. For example a mechanism for including partials with the tag and refer them inside a or directly into current html
In the 90s, we used Server Side Includes (SSI) for this. Probably still works.
Re: Rewriting my website in plain HTML and CSS
#9I started a portfolio website with Netlify (iirc), then I moved to Vue + Gridsome (on GitHub pages), then Next.js with Tailwind CSS, and was about to move to Vite.js over winter break.
That's 4 stacks over the course of 5-6 years. Not worth it.
Decided to do the sensible thing and use GitHub's README functionality. I prefer this approach and wish more folks in the tech community adopted it: https://github.com/SuboptimalEng
Re: Rewriting my website in plain HTML and CSS
#10Here's some of my tips for a handwritten HTML site, since the author wished more tips existed:
- consider using an HTML boilerplate template like this one if you don't know where to start: https://www.matuzo.at/blog/html-boilerplate/
- consider using a CSS template, or a CSS reset, if you don't know where to start with styling. Pico CSS is a good drop-in: https://picocss.com/. Frontend devs always blog about their CSS resets, like this one: https://piccalil.li/blog/a-more-modern-css-reset/. But if you're someone inclined to write their own HTML, then you'll probably also want to write your own CSS. This takes time to learn. Especially learning how to design the page without looking crappy
- I copy my last page as a template whenever writing a new page
- I don't worry about code duplication. If I need to refactor duplicated content, I use search and replace across files in vim (like https://nithinbekal.com/posts/vim-search-replace/). Hopefully your editor/IDE has something similar, and hopefully you're comfortable with regexes
- markdown + pandoc + scripting is a common solution. Technically it's not handwriting HTML at this point -- it's hacking together your own static site generator instead of using an existing framework -- but no biggie
- frontend people have made a lot of live reload tools over time. Here's a couple: https://nitoyon.github.io/livereloadx/ and https://github.com/tapio/live-server. Personally, I've cobbled together something with entr/caddy/websockets/userscripts. I've had problems with `python -m http.server` freezing up occasionally, but YMMV
- About RSS: you can generate your own feed if you already started your own generator script. Personally, I let this tool generate a feed for me in a GitHub Action: https://feed-me-up-scotty.vincenttunru.com/, but the feed quality is meh
- Expect to do a lot of fiddling. You'll reinvent things. You'll lack common features for a while. Embrace this as minimalism. You'll begin to appreciate the tasks that frameworks automate (image optimization, compression, meta tags, validation, etc)
- You'll face growing pains after you cross certain thresholds of page counts. Personally, I'd rather be grug-brained and edit more HTML than figure out some new framework. This is fine for a personal website with a straightforward structure