Live data from Hacker News

Rewriting my website in plain HTML and CSS

vijayp.dev

101–110 of 218 posts

Re: Rewriting my website in plain HTML and CSS

#101

Earlier quoted context omitted.

One modern approach would be Caddy Server's templates, using Golang templating: https://caddyserver.com/docs/modules/http.handlers.templates The "include" function should do the job: {{include "path/to/file.html"}}

httpd, nginx, a number of other servers support SSI https://nginx.org/en/docs/http/ngx_http_ssi_module.html Caddy chose not to, I guess? https://caddy.community/t/caddy-update-on-ssi-server-side-in...

You generally can’t use SSI on many popular platforms for static websites like Netlify, etc.

Re: Rewriting my website in plain HTML and CSS

#103
post #24

Earlier quoted context omitted.

> 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 inste…

Isn't using React with a static site generator framework basically the same thing but better?

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.

Re: Rewriting my website in plain HTML and CSS

#104
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.

Re: Rewriting my website in plain HTML and CSS

#105
post #24

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…

> 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 inste…

> 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 `` 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.

[EDIT: Dammit, my blog doesn't use that webcomponent anymore! Here's an actual production usage of it: https://demo.skillful-training.com/project/webroot/ (use usernames (one..ten)@example.com and password '1' if you want to see more usage of it)]

Re: Rewriting my website in plain HTML and CSS

#106

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…

use esbuild to get rid of copy-pasting

Re: Rewriting my website in plain HTML and CSS

#108
post #24

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…

> 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 inste…

Or, let me be cheeky: you could add some `` in your html.

Re: Rewriting my website in plain HTML and CSS

#109
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, ...) => $@"
  
  (common elements)
  {innerHtml}
  (common elements)
  ";
Which is then fed html partial snippets generated however you see fit. The use of methods to abstract partials in a hierarchical fashion like this can manage complex layouts well. You can recurse and compose this structure as much as needed (i.e., partials inside partials).

Re: Rewriting my website in plain HTML and CSS

#110
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)

Post reply on HN