How do you manage to serve the same header/sidebar on all of your static sites?

[HisVirusness]

Server side includes.

Everything passes through one single monolithic script containing all of the boilerplate code, metadata and general plumbing of the site.  After everything runs smoothly, experimentation starts and things snowball quickly.  Before you know it, you created a custom markup and most of your "pages" are just plain text files that get interpreted into HTML upon page request.

Tale as old as time, right?

...Right?

[Adam]

I use a frameset on my homepage. It's how I initially learned to build a navigation bar and I still enjoy the way it looks today. I don't update my home page very often, though, so maintaining the navigation bar by hand isn't a big deal. Biggest drawback is that some browsers can't display frames, so I also include a link to the navigation page within the noframes tag.

For my blog, on the other hand, I use a static site generator (Hugo) to embed all the links onto every page.

[sunnyp4rk]

I'm not on Neocities, so I just use PHP header/footer layouts to get everything to be the same.

[GlitchWolf47]

Ok so ive kinda switched between 2 methods for this but settled on the current one for the purpose of optimization

So at first I tried setting up basically a javascript variable injecting code thing. Basically, i have a js file where i keep the sidebar code and then i just add the div where i want it in the page and it would stay the same across all pages

however, this was not optimal as it required a LOT of javascript.

ive come up with a better method I think, and thats a SITE BASE. I have basically a site that is the base code for others. Its got all the different sidebar divs, and whenever I update something on the sidebear, i always start on the sitebase page and then copy and paste it to my other pages. This is a bit more work btu I think is more optimal and helps for the issue of which boxes I want in the sidebars on different pages (for example, i have my "Amigos Do dia" div on the homepage sidebear but not on my OC page)

as for links, i do use a variable system for it. This helps if I change a site's file name (for example, changing my homepage to index). I can basically just go into the js file and edit the link the variable leads to so that anywhere that variable is used itll update.

[Daniele63]

I avoid using JavaScript for things as essential as a navbar because it locks out your site for everyone that doesn't have scripts enabled.

I use VSCode (or VSCodium in my case) search function to select all the parts of the navbar I want to modify, in every file at once, and click replace, which will modify every file in the current folder at once. Static HTML only, no php or JavaScript needed, keeping it simple.
I have currently 84 pages, and it works fine, I don't think it would be viable on a page with thousands of pages for example.

[Dan Q]

It sounds like at lot of people are using JavaScript for this, so I started poking around the sites of Melonlanders who are doing so... and I found a couple of dozen different approaches!

I figured I'd have a go at making my own, to try to make the whole process of JavaScript-HTML-embedding easier for those who want it. I've posted a thread over here with my results, if you're interested!

Personally, I prefer a (1) static site generator, (2) server-side includes, or (3) server-side scripting approach, but I can see the utility in a JavaScript approach for folks who don't want to do option #1 and might not have hosting that supports option #2 or #3. So I figured it'd be useful to share "my way" of doing JS embedding.

I think it's pretty elegant, and has some fun "bonus features" like optional precaching (so everything loads as fast as if it were a single page, after the first visit) and placeholdering (to mitigate content "jumps" and flicker). Take a look if you'd like.