15 ms·

I almost agree. The thing that keeps me coming back to static site generators is HTML partials. Having a header.html file that defines my navigation, that I can

I almost agree. The thing that keeps me coming back to static site generators is HTML partials. Having a header.html file that defines my navigation, that I can edit once and include everywhere, is why I pay the complexity tax. And since I'm already there, I do also like scss + file watching / hot reloading. Though would happily live without it, if there was a 'native' solution to e.g. <html> <% include './header.html'> <body> ... </body> <% include './footer.html'> </html>

superkuh 2y ago
Use a webserver with server side includes (SSI) like nginx or apache and you can  in the other HTML files themselves and it's all completely transparent. No need to 'build' or anything. And no complex software stack to mantain or worries about attack surfaces like with dynamic languages like php. Just the bare minimum power to do templating that hasn't changed or had issues in 20 years.
- numlocked 2y ago
  Well, except for the webserver with nginx or apache, correctly configured with SSIs enabled. It's not terrible -- but not 'obviously' less complex than using e.g. 11ty (a static site generator) + uploading to an s3 bucket or FTP server. Just trading off complexity in one place for complexity in another. A sibling (top-level) comment suggest a standard HTML templating (or SSI) language that many static hosts would support. I like that idea quite a bit conceptually, though of course much easier said than done.
danvoell 2y ago
I pay the nav tax too but use “static” php.
- josefresco 2y ago
  I did (still do) this for years but it just feels... wrong. I recently hand built a personal site and used JavaScript to insert the html header/footer. Not great, but it worked.
cut3 2y ago
I made a free project at http://docbits.io/ http://docbits.io/ so i could include external things in html, markdown, css, etc.
ravetcofx 2y ago
I do this with JS, which I know isn't great practice but works pretty well.
mikae1 2y ago
Your web server probably has Server Side Includes. No need for an SSG.
- numlocked 2y ago
  My web server is a public s3 bucket :(
  - interactivecode 2y ago
    Thats an expensive way to say github pages
hipadev23 2y ago
Nobody writes and maintains fully individual HTML pages, everyone uses partials/templating with server-side code (perl, php, python, ruby, js) since about 1999. The only difference between SSG and dynamic backends is the point in time that you're generating cacheable static content.
- lapcat 2y ago
  > Nobody writes and maintains fully individual HTML pages I do. Partying like it's 1999.
  - randomdata 2y ago
    It ain't no 1999 party if you aren't using frameset to provide the shared page elements.
    - 6510 2y ago
      I fool around with it a while back with modern js framesets are actually good. They feel much more like real applications and are much easier to work with than the dynamic js rolercoaster. Say you have a menu + banner at the top. It's its own document. looking at the source it all makes perfect sense. The css only affects this frame so you can just target the links image or list items directly without a class or id. Then you click on the links (at the top) and they open different side menus that are also amazingly simple documents. Clicking on those opens all kinds of things in the main area. PDF images, video, widgets, error pages, EVEN DIFFERENT DOMAINS! Or [say] music, in a small frame on the side. The big frameset issue was that the address bar didn't show a useful url and opening a link in a new tab was a problem. These are now easily fixed by pushstate and you can also rebuild the frameset in a new tab if the user tries to open a link in a new tab. As there is nothing dynamic about the documents they are easily cached. Clicking around feels like an application! You can also reuse the side menu frame to open diagrams and charts to accompany the text without scrolling up and down like a madman. On mobile you simply don't load the frame set. The menu is the mobile application. We also got <details> and <summary> adding even more dept to the menus entirely without js. I still have to one day make a website with it.
deleted 2y ago
[deleted]
mhitza 2y ago
If you want to learn the arcane ways of m4 (probably already available on your system if you're ever had to build from source a project that uses autotools) you can use the include function without rolling your own with a bit of sed or awk. https://web.mit.edu/gnu/doc/html/m4_8.html https://web.mit.edu/gnu/doc/html/m4_8.html
j45 2y ago
<OBJECT data="file_to_include.html"> Warning: file_to_include.html could not be included. </OBJECT> https://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4 https://www.w3.org/TR/WD-html40-970708/struct/includes.html#... It can be a delicate balance to stick to simplicity when we say that's what we're after.
- codetrotter 2y ago
  Does this work in modern browsers? If so then that’s amazing.
  - j45 2y ago
    Seems to be in HTML5 as well. https://html.com/tags/object/ https://html.com/tags/object/ One thing that seems to get lost in modern programming is the JS frameworks arose in a time where HTML5+/CSS were also growing to gain some of those capabilities. For example, Web Components, Web Sockets, etc., are all pretty capable assuming it's a feature implemented in the browsers. In a recent project / prototype, the task was to build video capture and playing from scratch in html/ vanilla javascript. It was surprising how far it got compared to the libraries and frameworks out there. In the end, there were some tradeoffs to both but the consensus was no one had every considered HTML/JS alone could do it (even though js frameworks use.. js). Javascript30.com is a handy spot for new to JS developers to learn Javascript how I think it should be learned. First Vanilla, then Libraries, then Frameworks, in that order. Each helps fill in the "why" of the next.
    - codetrotter 2y ago
      Yeah the object tag is there but what I mean is do any browsers support using it for embedding HTML? I’ve mainly seen the object tag used ages ago back when people had Flash animations on websites. I remember Java Applets also but I think at the time people were using the applet tag for Java Applets. PDFs might also have been using the object tag however.
      - deleted 2y ago
gadders 2y ago
Every time I read about static site generators I keep thinking of City Desk from Joel Spolsky/Fog Creek. https://www.joelonsoftware.com/2001/10/12/what-does-citydesk-do/ https://www.joelonsoftware.com/2001/10/12/what-does-citydesk...
- 800xl 2y ago
  I liked CityDesk so much I wrote a clone of it in Xojo (then Realbasic) about 15 years ago. It has wysiwyg, templates, uses sqlite instead of a MS Access DB. Sometimes I think about making it public but don’t know if anyone would be interested these days.
vaylian 2y ago
This is such an obvious missing feature in HTML. I wonder why we don't have <include src="header.html"> yet.
- itomato 2y ago
  If only there were a hypertext pre-processor...
  - vaylian 2y ago
    You are missing the point. Repeated document fragments have been a pattern since the very beginning of HTML. This is a missing feature. Hypertext pre-processors are just a workaround.
    - lelanthran 2y ago
      > . Repeated document fragments have been a pattern since the very beginning of HTML. This is a missing feature. With webcomponents, it's now trivial to do client-side includes. It's not really a missing feature anymore. See this post here (which, for some reason is being downvoted): https://news.ycombinator.com/item?id=40847759 https://news.ycombinator.com/item?id=40847759
      - vaylian 2y ago
        I like web components. But they require JavaScript. I'm thinking about something that is pure HTML.
        lelanthran 2y ago
        > But they require JavaScript. Sure, but only for implementing your own. In practice they don't typically require the author of the page to know any Javascript. I'm using a client-side include by writing only HTML tags (with a 'remote-src' attribute). It's no different from not having to know C++ in order to write HTML which is rendered by C++ code. The implementation just doesn't matter, because the user (in this case the page/site author) never needs to examine it.
lelanthran 2y ago
Here is a snippet from a site I made: <zjs-include remote-src='/project/webroot/zjsi/navbar-signed-in.zjsi'></zjs-include> <zjs-include remote-src='/project/webroot/zjsi/error-dialog.zjsi'></zjs-include> <zjs-include remote-src='/project/webroot/zjsi/info-dialog.zjsi'></zjs-include> So, yeah, you don't need server-side includes if you use one of many free client-side webcomponent. That component `zjs-include` took me 30m to write.
actinium226 2y ago
I'm in the middle of making a small website to document some recent travels and I just ran into this problem. I looked at SSI but as you said elsewhere it needs to be configured and then I lose hot reloading support. So what SSG are you using? I was going to just make some jinja templates that I re-render with my own script, but it would be great if there was something that supported this out of the box without going crazy far up the complexity ladder.
- bbkane 2y ago
  Not OP, but I really like https://www.getzola.org/ https://www.getzola.org/ because its a single binary (I switched when I realized I could no longer easily build my Jekyll setup locally), has templates that make sense to me (i.e. similar to Jekyll), and hot reloading.
- sphars 2y ago
  Depends on your language of choice. Personally I use Eleventy[0]. Written in JavaScript (so you'll need node & npm). Has very minimal default settings but highly configurable. Pick your templates or just use markdown if you really want. Hot reloading is enabled by default. [0]: https://www.11ty.dev https://www.11ty.dev
- Ancapistani 2y ago
  I'm partial to mkdocs. It's designed for documentation sites, but the mkdocs-material theme provides enough functionality to make it well-suited for blogs and adaptable for almost anything.
hu3 2y ago
agreed. https://htmx.org https://htmx.org is a battle tested lib can load partials using ajax. but then your website wont work with javascript off.
- actinium226 2y ago
  But can it load them locally? Can it load them into the <head> tag? Sorry if these are dumb questions, I'm just getting started with webdev.
  - hu3 2y ago
    It can replace/alter <head> tag too yes. I'd have to test if it works locally without a webserver. With a web server like the embeded Python or PHP webserver, it works everywhere.
mdavidn 2y ago
You're looking for "server side includes." Most HTTP web servers provide such a feature, as do many CDNs. Here's the Nginx module's documentation: https://nginx.org/en/docs/http/ngx_http_ssi_module.html https://nginx.org/en/docs/http/ngx_http_ssi_module.html
- andai 2y ago
  I used this all the time with PHP back in the day. include("header.html");
- d13 2y ago
  Exactly. This is how it was always done and it works great.
- frugalmail 2y ago
  So you're replacing the "complexity" of the static site generator with the "complexity" of custom web server configuration. I think the post you're replying to was trying to make the point "it's worth the complexity"
- nox101 2y ago
  The only difference between a service side include and a static site generator include is whether the include happens build time or serve time (and cached). Any issues with including will be exactly the same regardless of where this happens.
- curtisblaine 2y ago
  If you're running your server, though, it's another level of complexity and support compared to uploading your pages to some static CDN or bucket (yes I know a CDN is a server, but it's 1. a solved problem 2. not maintained by you).
  - freedomben 2y ago
    I do a ton of devops/infrastructure so I hate to use myself as any sort of benchmark, but is it really that hard to run your own VPS with Nginx? Especially nowadays, there are tons of pre-canned examples you can tweak and AI can write most any nginx.conf you need as well. If you're just serving static content, you can scale to massive heights with Nginx on a small VPS with Cloudflare in front.
miragecraft 2y ago
I coded my own JS based HTML include leveraging script tags. https://github.com/miragecraft/x-include https://github.com/miragecraft/x-include The main advantage is that it’s not subject to CORS thus works directly from the local file system without having to set up localhost.
masswerk 2y ago
This is my favorite concept: writing HTML by hand, but having a static wrapper, which also takes care of links and their validity, and things like tags, public visibility of posts, RSS feeds and so on. (The data feed for this may live in a static data file, as this will be still of moderate size — you probably won't have multiple hundreds of posts — and loads without db latency. As a bonus, since there is no input and no query, this should be quite secure. Or rather, as secure as you basic server setup.)
o11c 2y ago
The native client-side solution is called XSLT. You need to invert your flow a little (the header and footer are merged into a single xml file that includes a placeholder for the body) but that's easy enough.
- 6510 2y ago
  Reading the comments I now badly want to make an XSLT frameset website.
- wodenokoto 2y ago
  I have never come across a practical guide to xslt. I know it’s the transform your xml to anything, but I’ve never seen anyone say “this is how you do a simple transformation” I would have no clue how to built what you suggest.
  - o11c 2y ago
    So, there are basically 2 things people use XSLT for. You can use it to extract data, or you can use it for templating. The former is generally trivial (it's generally just a set of hard-coded output nodes + some xpath), so I'll only discuss the latter. For templating, there's a simple rule: always start with the identity transform: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> </xsl:stylesheet> (In particular note that `xsl:copy` is the only bit here that's largely interchangeable with non-xsl nodes in the stylesheet.) Then, generally, you'll add `xsl:template`s that `match` some hard-coded node names (or the root) and add some other structure instead of `xsl:copy` before (if not switching to simple extraction) calling xsl:apply-templates at a deeper depth. In my experience, attributes are likely to only ever be copied all at once or not at all (e.g. if only made available for extraction), whereas nodes are likely subject to more complicated logic. For the specific case of a header-footer template, you'd match the root and hard-code the structure instead of using xsl-copy, then use apply-templates where you want to insert the main body from the file that's calling the template. Also, remember you can test with `xsltproc` to avoid browser overhead. `xmllint --xpath` is useful for selectors as well.
jscheel 2y ago
This is how I got into web development. I was taking a web design class in college (back in 2002 or so). I had built a 20-ish page site for a project and got tired of copying and editing my header and footer. Initially I used frames, but then I discovered php. My professor was pissed at me because, in her mind, this was the art department, not the CS department, and if I wanted to do that stuff I should get out of art. Little did she know that I was getting minors in both while studying 3d animation.
6510 2y ago
I've always added some script tags to my static html documents. The scripts can rebuild the entire web page but I actually use document.write in stead. You get to use template strings nowadays. It's hilarious! document.write(`<div id="kungfu"> <ul> <li> <a href="banana.html">banana!</a> </li> </ul> </div>`); before that I was using multi-line comments in function bodies. Like so https://jsfiddle.net/wLb8hjgn/ https://jsfiddle.net/wLb8hjgn/
cyanydeez 2y ago
You'd think with es6 adding JavaScript modules they could easily make a inclusion tag.
rstuart4133 2y ago
> I almost agree. I entirely agree with the sentiment "writing HTML once is easier than using a static site generator". Hell, even writing it twice is probably easier. The point of a static site generator is there is lots of HTML (like headers and menus) you don't write just once or twice, or if it is generated from data in a database you write at all. I'm sure the author of the original post would agree in general, so I was left scratching my head what he is actually objecting to. Going by his comment "This becomes obvious when you eg get a new work machine and need to set up the site generator on the new machine and realize that the exact series of bits you had on disk on the old machine were different than what you can achieve on the new machine" maybe it was a rant about how complex tool chains have become. Or maybe he's just now coming to understand why people stick to what's in Debian Stable, forgoing all the new shinies NPM and the rest of the ecosystem offers. It doesn't take too many replacement laptops before than realisation dawns.

superkuh 2y ago

Use a webserver with server side includes (SSI) like nginx or apache and you can  in the other HTML files themselves and it's all completely transparent. No need to 'build' or anything. And no complex software stack to mantain or worries about attack surfaces like with dynamic languages like php. Just the bare minimum power to do templating that hasn't changed or had issues in 20 years.

numlocked 2y ago
Well, except for the webserver with nginx or apache, correctly configured with SSIs enabled. It's not terrible -- but not 'obviously' less complex than using e.g. 11ty (a static site generator) + uploading to an s3 bucket or FTP server. Just trading off complexity in one place for complexity in another. A sibling (top-level) comment suggest a standard HTML templating (or SSI) language that many static hosts would support. I like that idea quite a bit conceptually, though of course much easier said than done.

danvoell 2y ago

I pay the nav tax too but use “static” php.

josefresco 2y ago
I did (still do) this for years but it just feels... wrong. I recently hand built a personal site and used JavaScript to insert the html header/footer. Not great, but it worked.

cut3 2y ago

I made a free project at http://docbits.io/ http://docbits.io/ so i could include external things in html, markdown, css, etc.

ravetcofx 2y ago

I do this with JS, which I know isn't great practice but works pretty well.

mikae1 2y ago

Your web server probably has Server Side Includes. No need for an SSG.

numlocked 2y ago
My web server is a public s3 bucket :(
- interactivecode 2y ago
  Thats an expensive way to say github pages

hipadev23 2y ago

Nobody writes and maintains fully individual HTML pages, everyone uses partials/templating with server-side code (perl, php, python, ruby, js) since about 1999. The only difference between SSG and dynamic backends is the point in time that you're generating cacheable static content.

lapcat 2y ago
> Nobody writes and maintains fully individual HTML pages I do. Partying like it's 1999.
- randomdata 2y ago
  It ain't no 1999 party if you aren't using frameset to provide the shared page elements.
  - 6510 2y ago
    I fool around with it a while back with modern js framesets are actually good. They feel much more like real applications and are much easier to work with than the dynamic js rolercoaster. Say you have a menu + banner at the top. It's its own document. looking at the source it all makes perfect sense. The css only affects this frame so you can just target the links image or list items directly without a class or id. Then you click on the links (at the top) and they open different side menus that are also amazingly simple documents. Clicking on those opens all kinds of things in the main area. PDF images, video, widgets, error pages, EVEN DIFFERENT DOMAINS! Or [say] music, in a small frame on the side. The big frameset issue was that the address bar didn't show a useful url and opening a link in a new tab was a problem. These are now easily fixed by pushstate and you can also rebuild the frameset in a new tab if the user tries to open a link in a new tab. As there is nothing dynamic about the documents they are easily cached. Clicking around feels like an application! You can also reuse the side menu frame to open diagrams and charts to accompany the text without scrolling up and down like a madman. On mobile you simply don't load the frame set. The menu is the mobile application. We also got <details> and <summary> adding even more dept to the menus entirely without js. I still have to one day make a website with it.

deleted 2y ago

[deleted]

mhitza 2y ago

If you want to learn the arcane ways of m4 (probably already available on your system if you're ever had to build from source a project that uses autotools) you can use the include function without rolling your own with a bit of sed or awk. https://web.mit.edu/gnu/doc/html/m4_8.html https://web.mit.edu/gnu/doc/html/m4_8.html

j45 2y ago

<OBJECT data="file_to_include.html"> Warning: file_to_include.html could not be included. </OBJECT> https://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4 https://www.w3.org/TR/WD-html40-970708/struct/includes.html#... It can be a delicate balance to stick to simplicity when we say that's what we're after.

codetrotter 2y ago
Does this work in modern browsers? If so then that’s amazing.
- j45 2y ago
  Seems to be in HTML5 as well. https://html.com/tags/object/ https://html.com/tags/object/ One thing that seems to get lost in modern programming is the JS frameworks arose in a time where HTML5+/CSS were also growing to gain some of those capabilities. For example, Web Components, Web Sockets, etc., are all pretty capable assuming it's a feature implemented in the browsers. In a recent project / prototype, the task was to build video capture and playing from scratch in html/ vanilla javascript. It was surprising how far it got compared to the libraries and frameworks out there. In the end, there were some tradeoffs to both but the consensus was no one had every considered HTML/JS alone could do it (even though js frameworks use.. js). Javascript30.com is a handy spot for new to JS developers to learn Javascript how I think it should be learned. First Vanilla, then Libraries, then Frameworks, in that order. Each helps fill in the "why" of the next.
  - codetrotter 2y ago
    Yeah the object tag is there but what I mean is do any browsers support using it for embedding HTML? I’ve mainly seen the object tag used ages ago back when people had Flash animations on websites. I remember Java Applets also but I think at the time people were using the applet tag for Java Applets. PDFs might also have been using the object tag however.
    - deleted 2y ago

gadders 2y ago

Every time I read about static site generators I keep thinking of City Desk from Joel Spolsky/Fog Creek. https://www.joelonsoftware.com/2001/10/12/what-does-citydesk-do/ https://www.joelonsoftware.com/2001/10/12/what-does-citydesk...

800xl 2y ago
I liked CityDesk so much I wrote a clone of it in Xojo (then Realbasic) about 15 years ago. It has wysiwyg, templates, uses sqlite instead of a MS Access DB. Sometimes I think about making it public but don’t know if anyone would be interested these days.

vaylian 2y ago

This is such an obvious missing feature in HTML. I wonder why we don't have <include src="header.html"> yet.

itomato 2y ago
If only there were a hypertext pre-processor...
- vaylian 2y ago
  You are missing the point. Repeated document fragments have been a pattern since the very beginning of HTML. This is a missing feature. Hypertext pre-processors are just a workaround.
  - lelanthran 2y ago
    > . Repeated document fragments have been a pattern since the very beginning of HTML. This is a missing feature. With webcomponents, it's now trivial to do client-side includes. It's not really a missing feature anymore. See this post here (which, for some reason is being downvoted): https://news.ycombinator.com/item?id=40847759 https://news.ycombinator.com/item?id=40847759
    - vaylian 2y ago
      I like web components. But they require JavaScript. I'm thinking about something that is pure HTML.
      - lelanthran 2y ago
        > But they require JavaScript. Sure, but only for implementing your own. In practice they don't typically require the author of the page to know any Javascript. I'm using a client-side include by writing only HTML tags (with a 'remote-src' attribute). It's no different from not having to know C++ in order to write HTML which is rendered by C++ code. The implementation just doesn't matter, because the user (in this case the page/site author) never needs to examine it.

lelanthran 2y ago

Here is a snippet from a site I made: <zjs-include remote-src='/project/webroot/zjsi/navbar-signed-in.zjsi'></zjs-include> <zjs-include remote-src='/project/webroot/zjsi/error-dialog.zjsi'></zjs-include> <zjs-include remote-src='/project/webroot/zjsi/info-dialog.zjsi'></zjs-include> So, yeah, you don't need server-side includes if you use one of many free client-side webcomponent. That component `zjs-include` took me 30m to write.

actinium226 2y ago

I'm in the middle of making a small website to document some recent travels and I just ran into this problem. I looked at SSI but as you said elsewhere it needs to be configured and then I lose hot reloading support. So what SSG are you using? I was going to just make some jinja templates that I re-render with my own script, but it would be great if there was something that supported this out of the box without going crazy far up the complexity ladder.

bbkane 2y ago
Not OP, but I really like https://www.getzola.org/ https://www.getzola.org/ because its a single binary (I switched when I realized I could no longer easily build my Jekyll setup locally), has templates that make sense to me (i.e. similar to Jekyll), and hot reloading.
sphars 2y ago
Depends on your language of choice. Personally I use Eleventy[0]. Written in JavaScript (so you'll need node & npm). Has very minimal default settings but highly configurable. Pick your templates or just use markdown if you really want. Hot reloading is enabled by default. [0]: https://www.11ty.dev https://www.11ty.dev
Ancapistani 2y ago
I'm partial to mkdocs. It's designed for documentation sites, but the mkdocs-material theme provides enough functionality to make it well-suited for blogs and adaptable for almost anything.

hu3 2y ago

agreed. https://htmx.org https://htmx.org is a battle tested lib can load partials using ajax. but then your website wont work with javascript off.

actinium226 2y ago
But can it load them locally? Can it load them into the <head> tag? Sorry if these are dumb questions, I'm just getting started with webdev.
- hu3 2y ago
  It can replace/alter <head> tag too yes. I'd have to test if it works locally without a webserver. With a web server like the embeded Python or PHP webserver, it works everywhere.

mdavidn 2y ago

You're looking for "server side includes." Most HTTP web servers provide such a feature, as do many CDNs. Here's the Nginx module's documentation: https://nginx.org/en/docs/http/ngx_http_ssi_module.html https://nginx.org/en/docs/http/ngx_http_ssi_module.html

andai 2y ago
I used this all the time with PHP back in the day. include("header.html");
d13 2y ago
Exactly. This is how it was always done and it works great.
frugalmail 2y ago
So you're replacing the "complexity" of the static site generator with the "complexity" of custom web server configuration. I think the post you're replying to was trying to make the point "it's worth the complexity"
nox101 2y ago
The only difference between a service side include and a static site generator include is whether the include happens build time or serve time (and cached). Any issues with including will be exactly the same regardless of where this happens.
curtisblaine 2y ago
If you're running your server, though, it's another level of complexity and support compared to uploading your pages to some static CDN or bucket (yes I know a CDN is a server, but it's 1. a solved problem 2. not maintained by you).
- freedomben 2y ago
  I do a ton of devops/infrastructure so I hate to use myself as any sort of benchmark, but is it really that hard to run your own VPS with Nginx? Especially nowadays, there are tons of pre-canned examples you can tweak and AI can write most any nginx.conf you need as well. If you're just serving static content, you can scale to massive heights with Nginx on a small VPS with Cloudflare in front.

miragecraft 2y ago

I coded my own JS based HTML include leveraging script tags. https://github.com/miragecraft/x-include https://github.com/miragecraft/x-include The main advantage is that it’s not subject to CORS thus works directly from the local file system without having to set up localhost.

masswerk 2y ago

This is my favorite concept: writing HTML by hand, but having a static wrapper, which also takes care of links and their validity, and things like tags, public visibility of posts, RSS feeds and so on. (The data feed for this may live in a static data file, as this will be still of moderate size — you probably won't have multiple hundreds of posts — and loads without db latency. As a bonus, since there is no input and no query, this should be quite secure. Or rather, as secure as you basic server setup.)

o11c 2y ago

The native client-side solution is called XSLT. You need to invert your flow a little (the header and footer are merged into a single xml file that includes a placeholder for the body) but that's easy enough.

6510 2y ago
Reading the comments I now badly want to make an XSLT frameset website.
wodenokoto 2y ago
I have never come across a practical guide to xslt. I know it’s the transform your xml to anything, but I’ve never seen anyone say “this is how you do a simple transformation” I would have no clue how to built what you suggest.
- o11c 2y ago
  So, there are basically 2 things people use XSLT for. You can use it to extract data, or you can use it for templating. The former is generally trivial (it's generally just a set of hard-coded output nodes + some xpath), so I'll only discuss the latter. For templating, there's a simple rule: always start with the identity transform: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> </xsl:stylesheet> (In particular note that `xsl:copy` is the only bit here that's largely interchangeable with non-xsl nodes in the stylesheet.) Then, generally, you'll add `xsl:template`s that `match` some hard-coded node names (or the root) and add some other structure instead of `xsl:copy` before (if not switching to simple extraction) calling xsl:apply-templates at a deeper depth. In my experience, attributes are likely to only ever be copied all at once or not at all (e.g. if only made available for extraction), whereas nodes are likely subject to more complicated logic. For the specific case of a header-footer template, you'd match the root and hard-code the structure instead of using xsl-copy, then use apply-templates where you want to insert the main body from the file that's calling the template. Also, remember you can test with `xsltproc` to avoid browser overhead. `xmllint --xpath` is useful for selectors as well.

jscheel 2y ago

This is how I got into web development. I was taking a web design class in college (back in 2002 or so). I had built a 20-ish page site for a project and got tired of copying and editing my header and footer. Initially I used frames, but then I discovered php. My professor was pissed at me because, in her mind, this was the art department, not the CS department, and if I wanted to do that stuff I should get out of art. Little did she know that I was getting minors in both while studying 3d animation.

6510 2y ago

I've always added some script tags to my static html documents. The scripts can rebuild the entire web page but I actually use document.write in stead. You get to use template strings nowadays. It's hilarious! document.write(`<div id="kungfu"> <ul> <li> <a href="banana.html">banana!</a> </li> </ul> </div>`); before that I was using multi-line comments in function bodies. Like so https://jsfiddle.net/wLb8hjgn/ https://jsfiddle.net/wLb8hjgn/

cyanydeez 2y ago

You'd think with es6 adding JavaScript modules they could easily make a inclusion tag.

rstuart4133 2y ago

> I almost agree. I entirely agree with the sentiment "writing HTML once is easier than using a static site generator". Hell, even writing it twice is probably easier. The point of a static site generator is there is lots of HTML (like headers and menus) you don't write just once or twice, or if it is generated from data in a database you write at all. I'm sure the author of the original post would agree in general, so I was left scratching my head what he is actually objecting to. Going by his comment "This becomes obvious when you eg get a new work machine and need to set up the site generator on the new machine and realize that the exact series of bits you had on disk on the old machine were different than what you can achieve on the new machine" maybe it was a rant about how complex tool chains have become. Or maybe he's just now coming to understand why people stick to what's in Debian Stable, forgoing all the new shinies NPM and the rest of the ecosystem offers. It doesn't take too many replacement laptops before than realisation dawns.