Rewriting my website in plain HTML and CSS
116 comments
·January 14, 2025uncheckederror
EvanAnderson
> Yes, you must copy and paste content and not having layout page is annoying at times. But the overhead of just doing it yourself is surprisingly small in terms of the time commitment.
This calls out for server side includes[0]. I so loved server side includes back in the late 90s. You still work in plain HTML and CSS, boilerplate can be centralized and not repeated, and clients receive the entire page in a single request.
tannhaeuser
> copy and paste content and not having layout page is annoying at times
HTML was envisioned as an SGML application/vocabulary, and SGML has those power features, such as type-checked shared fragments/text macros (entities, possibly with parameters), safe third-party content transclusion, markup stream processing and filtering for generating a table of content for page or site navigation, content screening for removal/rejection of undesired script in user content, expansion of custom Wiki syntax such as markdown into HTML, producing "views" for RSS or search result pages in pipelines, etc. etc. See [1] for a basic tutorial.
[1]: https://sgmljs.net/docs/producing-html-tutorial/producing-ht...
kreetx
I didn't expect this to be serious and am surprised on that the tutorial actually delivers. Way back when I was learning HTML and it was said that it was built with SGML, then this relation remained a total mystery to me.
culi
> Yes, you must copy and paste content
Many people who maintain their own sites in vanilla web technologies tend to create reusable functions to handle this for them. It can generate headers and the like dynamically so you don't have to change it on every single page. Though that does kill the "no javascript required" aspect a lot of people like
Of course you could simply add a build step to your pure HTML site instead!
8organicbits
I've adopted the idea that a blog post is archived when it's published; I don't want to tinker with it again. Old pages may have an old style, but that's OK, it's an archive. Copy/paste works great for this.
The only reason I use a blog engine now (Hugo) is for RSS. I kept messing up or forgetting manual RSS edits.
promiseofbeans
I really love this! I've seen it in action a couple times in the wild, and it's super cool seeing how the site's design has evolved over time.
It also has the benefit of forcing you to keep your URIs stable. Cool URIs don't change: https://www.w3.org/Provider/Style/URI.html
arkh
Or, let me be cheeky: you could add some `<php include('header.html')?>` in your html.
mixmastamyk
I recently learned the object tag can do what I wished for in the 90s... work as an include tag:
<object data="footer.html"></object>
Should reduce a lot of boilerplate that would get out of sync on my next project, without need for templating.
liontwist
Unfortunately that will require the client to make additional web requests to load the page, effectively doubling latency at a minimum.
lelanthran
> It can generate headers and the like dynamically so you don't have to change it on every single pa
Yeah, I noped out of that and use a client-side include (webcomponent) so that my html can have `<include-remote remote-src='....'>` instead.
Sure, it requires JS to be enabled for the webcomponent to work, but I'm fine with that.
See https://www.lelanthran.com for an example.
spoonfeeder006
Isn't using React with a static site generator framework basically the same thing but better?
datavirtue
Yes, if you want to throw up in your mouth.
realusername
In theory yes, in practice good luck maintaining that if you are just a solo blogger.
I doubt your blog would last a single month without some breaking change of some sort in one of the packages.
liontwist
> Yes, you must copy and paste content
Manual work is almost never a good solution. Try this:
for PAGE in *.page
do
cat header.html "$PAGE" footer.html > “$PAGE.html”
doneAdieuToLogic
A slightly simpler version of same is:
for PAGE in *.page
do
cat header.html "$PAGE" footer.html > "$PAGE.html"
done
HTH
EDIT: if you don't want the output file to be named "a.page.html" and instead it to be "a.html", replace the above cat invocation with:
cat header.html "$PAGE" footer.html > "${PAGE%.page}.html"
0 - https://man.freebsd.org/cgi/man.cgi?query=cat&apropos=0&sekt...
adamzochowski
Why not use server side includes? Most web servers support it, and it dates back to one of the early features of webservers.
<!--# set var="pagetitle" value="Main page" -->
<!--# include file="00__header.html" -->
... main content here
<!--# include file="00__footer.html" -->liontwist
Because that requires a server with the proper config and this is an HTML file. So it works in every environment, like locally on your machine, or GitHub pages.
8n4vidtmkvmk
`cat` supports multiple files, no? The whole point is that it concatenates. Why use 3 commands?
liontwist
Because I’m typing on my phone and the line was long. Thanks!
dgfitz
Oh man, cattiness use of cat!
null
ycombinatrix
use esbuild to get rid of copy-pasting
begueradj
How do you do for syntax highlighting ?
insonable
There's a lot you can do with just plain html these days if you just need a clean site. Here's an example from my recipe site (https://xilic.com/recipia/sauces/pesto_traditional.html), mostly for my personal use or sharing with friends, with only html/css. It has expandable boxes, a menu system, etc. A simple script converts a directory structure of .csv files to these recipe cards with a template, and this way you can edit the sources in a spreadsheet and then the publish script just takes whatever is new and re-does the whole lot of html as necessary. Just like we used to do with Apache Forest!
nayuki
Really appreciate that you're doing mass-based recipes, and in metric too. I'm tired of all the American recipes with quantities like "2 1/3 cups"; the proliferation of units and fractions makes work needlessly hard compared to just grams and millilitres.
makizar
What a beautiful website ! Feels carefully crafted, full of nice moments like the > turning the a - when sections are open in the TOC. Would love to hear more detail on how you went about making it. Did you ever consider sharing parts of the source code ?
bob1029
With regard to templating approaches, my favorite by a very wide margin is to simply use string interpolation in the base language.
You create a common template type with methods like:
LayoutHtml(Session? Session, string title, string innerHtml, ...) => $@"
<html>
(common elements)
{innerHtml}
(common elements)
</html>";
azangru
Did he reinvent a static-site generator? Markdown, pandoc, makefile... Sounds like a job for hugo/eleventy/jekyll/whatever.
NoboruWataya
I don't maintain a blog so my opinion may not count for much, but I feel like if what you are trying to do doesn't fit neatly into an SSG's existing templates/themes, it may in fact be easier just to use pandoc and some simple tooling around it. Certainly when I looked into a few SSGs for the purpose of making a simple personal website (without a blog) I found I would spend more time trying to bend them to my will than just writing what I want in markdown and running pandoc on it.
Ugvx
Its the the first time someone has reinvented a static site generator...
Looks around sheepishly
alwillis
In my opinion, Jekyll is easier and more capable than Pandoc and markdown files for a HTML/CSS website.
Jekyll also has a higher ceiling than Pandoc when you need a templating language, plugins, etc.
null
arnath
Yeah, obviously this is literally what something like Jekyll or Hugo does. It's just (at least to me) a simpler version of that where you can fully see what's happening. Also I didn't want all the theme-ing overhead that comes with those - just something I could inject into my existing site.
erremerre
I have found someone who uses the anchor suffix to solve the problem:
https://john-doe.neocities.org/
I am not html expert, so I have no idea how complicate or what implications would that have.
nbbaier
I love this site and concept and have been thinking about moving to this method for my own site
catapart
Good on ya! HTML+JS is plenty performant for a blog and I'm always happy to see more people eschewing frameworks when they're not necessary.
I've been writing a progressive web app that is, itself, a "web component" (custom element), built entirely with custom elements, so I feel like I've got a pretty good idea of how you can tackle that header reuse bullet point. Happy to give pointers if you're interested in that at all.
Anyway, great job on simplifying things! I hope it gets easier from here!
SuboptimalEng
I 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
arnath
This is an interesting idea! Honestly I didn't even know Github had a per-user readme until you mentioned it
bb88
I hate the UI layer, for this reason. Nothing is ever stable. I'm looking for "Boring" and "Googleable in the age of AI slop". The other alternative are frameworks small enough to easily comprehend.
The UI is often tangential to the heavy lifting done by the back end. It often needs to be "just good enough".
eviks
Don’t hate the layer, hate the player.
How can UI be stable if you’re the one changing it all the time even if all you need is a readme page that can be done in the same UI with no change for decades?
dvt
GitHub was just down the other day. Why would you want your personal website/portfolio to be tied to GitHub? Crazy "modern web dev" stacks are likely overkill, but that's not an argument against self-hosting.
mr_mitm
Because it's free and convenient, and other hosting providers don't magically have 100% uptime either. Not even necessarily more uptime than GitHub.
sneak
Personal websites can be down a few days a month without a problem.
8n4vidtmkvmk
+1. Not like my $5 hosting plan has less downtime than Github. Well... maybe? Fewer moving parts perhaps. But it's not immune.
abdulmuhaimin
sounds like a self-inflicted problem really. Why do you even change stack that much if what you want is a simple functionality?
paulmooreparks
I took a similar approach, but I still have a dynamic site generator that reads my HTML content and outputs it to a template. I write all of my pages as stand-alone HTML, and each page can render on its own without any of the template being present. For example:
https://parkscomputing.com/page/conways-game-of-life
Is supported underneath by the raw HTML:
https://parkscomputing.com/content/conways-game-of-life.html
The menu and main page are controlled by a JSON configuration.
The site is slow right now because I'm being stingy on the Azure storage performance.
eviks
Before
> Why? It took me hours of Googling
After
> How? I spent some time looking around for guides or a “canonical” way of doing this and found that there isn’t really one.
Sounds like no benefit in reducing the costs to achieve a less functional site (see next steps, which would require more googling)
jsheard
I'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.
yawnxyz
Once I randomly discovered Astro, I couldn't go back.
I love that you can even drop in Svelte and React blocks right next to each other, so you basically the power of all the advanced frameworks, and the choice to pare it down to a barebones html static site
null
pantathei
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.
mplewis
Astro is my favorite tool for static sites these days. It's wonderful.
begueradj
How is code syntax highlighting achieved in this context ?
planetjones
Hugo worked for me. And as part of the GitHub pipeline that builds the site and deploys it I can grab some ‘dynamic’ content (from a Notion DB) and render it. Subsequently I added Zapier so that when the Notion DB changes it triggers the pipeline to update my website. The only thing I pay for is the web hosting with dreamhost.
https://www.planetjones.net/blog/03-05-2023/relaunching-my-p...
I've been maintaining my personal website as plain HTML for five years now. I must say, I quite like this method. There's no substitute for practice when it comes to maintaining your skills at editing HTML and CSS.
Yes, you must copy and paste content and not having layout page is annoying at times. But the overhead of just doing it yourself is surprisingly small in terms of the time commitment.
Typically, I'll draft a post in MS Word then open the git repo for my site, hosted on github pages, duplicate and rename the template.html page that includes the CSS, footer, and header for my site and then copy my content into it. When I'm happy with everything, I'll make my commit and then a minute later it's live at my custom domain. Seeing that it takes only 11KBs and 26ms to load my landing page strangely delightful.