How do you manage to serve the same header/sidebar on all of your static sites? - ✁ ∙ Web Crafting

Tuffy!
Jr. Member ⚓︎

⛺︎ My Room

Guild Memberships:

Artifacts:

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

« on: September 25, 2025 @434.16 »

I wonder how other webmasters organize their site structure and keep the navigation menu / links / sidebar the same on all of their static pages. I currently have my homepage hosted on neocities and the nonexistent php support is driving me nuts sometimes.

How are you keeping your navbar or sidebar up to date on all of your pages?
And what are the pros and cons of each option in your opinion?

There are several options
Lets say you want to include your nav menu into all of your pages without the need to edit every static site once one of your links gets updated, removed or a new one gets added.

None of those that are working on neocities (marked with ✔) is appealing to me

JS client side includes ✔
JavaScript includes work on the client side and include the content of file from the server by injecting the content into the html of the parent document within the browser. This is an easy approach when hosting on neocities but it doesn't work when a visitor has turned off javascript. With the usage of <noscript>a fallback navmenu in plain html can be placed here</noscript> to show a navbar for those users.

Usage:
index.html

Code

<script src="nav.js"></script>

nav.js (this is for newer browsers, fallback code for older browsers can be found here

Code

document.write(`
<a href="/">Home</a> - <a href="/links.html">Links</a> - <a href="/guestbook.html">Guestbook</a>
`);

HTML frameset ✔ but deprecated in HTML5
After my first websites back in the day I got told that using frames is SO WRONG after which I adapted to using php include. I never looked back to using a frameset.

Code

<frameset cols="30%, 40%, 30%">
        <frame name="top" src="nav.html" />
        <frame name="main" src="home.html" />
        <frame name="bottom" src="footer.html" />
        <noframes>

            <body>Your browser does not support frames. (You can show the content without frames here)</body>
        </noframes>

iframes ✔

Usage:

Code

<iframe src="nav.html">

SSI - Server side includes

Usage:

Code

<!--#include file="nav.html" -->

PHP includes
Usage:

index.php (or index.html when parsing is on)

Code

<?php include 'nav.php';?>

Code

<?php require 'nav.php';?>

nav.php

Code

<?php
echo '<a href="/">Home</a> - <a href="/links.html">Links</a> - <a href="/guestbook.html">Guestbook</a>';
?>

There are other ways to achieve this as well but they doesn't listed here seem to work on neocities webspace (please correct me if I'm wrong)

What is your opinion on this subject?


	Logged

Proud member of the NEW
Forum Revival Movement

Artifact Swap:

ArtificialAnima
Casual Poster ⚓︎

She/They
⛺︎ My Room
Matrix: Chat!
Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

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

« Reply #1 on: September 25, 2025 @581.11 »

I feel like the best option is probably to just use a static site generator (Eleventy is pretty nice) and have your navbar, etc. be part of a template, since it'll be efficient and compatible with everything because it'll just render into plain HTML.


	Logged

TheFrugalGamer
Hero Member ⚓︎

⛺︎ My Room
Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

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

« Reply #2 on: September 25, 2025 @596.38 »

Personally I wasn't really willing to go without PHP, which is why I never went the Neocities route. Also, there were a number of other things I wanted to do that just weren't available on Neocities, mostly dependent on PHP, so it just wasn't for me.

I think you've covered all the methods I'm familiar with, and @ArtificialAnima brought up static site generators. The only other way I can think of would be to embrace unconventional site design and keep the menu on its own page. Then just include a "Menu" and "Home" link on every page that links back. This is obviously not something everyone wants to do, so it's only going to work for those who don't want a traditional type of site.


	Logged

| Find me on the Fediverse

Artifact Swap:

Marziponder
Casual Poster ⚓︎

⛺︎ My Room
SpaceHey: Friend Me!
RSS:

Guild Memberships:

Artifacts:

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

« Reply #3 on: October 18, 2025 @344.07 »

Quote from: ArtificialAnima on September 25, 2025 @581.11

I feel like the best option is probably to just use a static site generator

I strongly agree. I've been building my site with Astro (https://astro.build/) and I like it quite a lot so far. I have run into some roadblocks on some *very* specific *very* custom stuff I'd like to do that I won't go into, but when it comes to repeating elements and whatnot, it kicks it out of the park. Really simple to understand in my opinion and has a very nice startup template and documentation.


« Last Edit: October 18, 2025 @347.95 by Marziponder »	Logged

_ghost_
Full Member ⚓︎

⛺︎ My Room

Guild Memberships:

Artifacts:

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

« Reply #4 on: October 19, 2025 @617.28 »

I've been using iframes; I keep seeing people say this is the "wrong" way to do it, but I generally take an "if it works, it works" approach to my website.


	Logged

Marziponder
Casual Poster ⚓︎

⛺︎ My Room
SpaceHey: Friend Me!
RSS:

Guild Memberships:

Artifacts:

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

« Reply #5 on: October 19, 2025 @663.84 »

I'll admit I don't know much about iframes since they aren't used much in the kind of web development I usually do, but the top response here is well-received and explained:

https://stackoverflow.com/questions/7289139/why-are-iframes-considered-dangerous-and-a-security-risk#9428051

What they're saying makes sense to me and so I think I iframes are really just considered "bad" because of the kind of user experience modern websites are going for. If you're fine not having that experience, seems fine to me.


	Logged

akchizar
Newbie ⚓︎

⛺︎ My Room

Artifacts:

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

« Reply #6 on: October 19, 2025 @876.76 »

I'm gonna put another vote in here on some kind of SSG on the generation side. I use 11ty for my site, but to be honest if all you need is common code mirrored across all your pages (header, footer, includes, etc.), you can bodge one together in your programming language of choice in relatively short order.

The big plus of SSGs (in my mind) is that you're dealing with the whole issue before it even goes to your webhost. You can throw your site up literally anywhere, you don't have to worry about your users having javascript enabled, or anything...it just works. (And if it doesn't, you have a relatively limited pool of places it could have gone wrong.()


	Logged

Tuffy!
Jr. Member ⚓︎

⛺︎ My Room

Guild Memberships:

Artifacts:

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

« Reply #7 on: October 19, 2025 @957.19 »

Thank you for all your replies, thoughts and ideas.

SSG and iframes are the most simple and probably best route for most people that can't or don't like to make use of SSI/PHP. I really have thought it all through and I don't have as much of an aversion towards iframes anymore as much as I had in the beginning of my decision making thought process. Probably an iframe will do for the nav menu. It doesn't come with the negative side aspects of a real frame-set and as long as the iframe is served from the same domain, even manipulating the contents of it by using JS is possible so...

If I don't make the decision to move away from neocities, I think the iframe will do.

I will never go the JavaScript route because the navigation should be available across all pages without relying on JS IMHO.


	Logged

Proud member of the NEW
Forum Revival Movement

Artifact Swap:

starbreaker
Hero Member ⚓︎

What good is Heaven if we dare not storm it?
⛺︎ My Room
SpaceHey: Friend Me!
RSS:

Artifacts:

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

« Reply #8 on: December 05, 2025 @263.96 »

I do it by creating HTML partials that I insert into pages using hxincl from the W3C's HTML-XML-tools package. I also insert metadata using sed scripts, and implement functionality similar to WordPress shortcodes using m4 macros. And I automate everything with a makefile. All of this functionality requires a somewhat deeper understanding of how UNIX works than using a SSG like Jekyll, Eleventy, or Hugo, but the tools I use are at least 30 years old and not likely to change any time soon. And, unlike Eleventy or Astro, I don't have to deal with node.js or the npm ecosystem. Not depending on Jekyll lets me avoid having to deal with Ruby versioning and Ruby Gems.


	Logged

as all kingdoms fall, let my will be done on earth, and heaven be damned

NoxidKin
Jr. Member ⚓︎

Hey please check out my blog! :)
⛺︎ My Room

Guild Memberships:

Artifacts:

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

« Reply #9 on: December 05, 2025 @395.44 »

Heyo! I wrote a fairly detailed response. But I could get it properly uploaded as a reply here, because I couldn't format the code blocks right. Then I tried to upload it to my site and ALSO couldn't format the code blocks right. So it's been about 20 or 30 minutes since I started writing it. :P

In the end, I've uploaded it as a plain .txt file. I'm pretty sure it's worth the read though. There's a chunk of code that I don't really understand, so if anyone wants to discuss how it works or suggest improvements, that'd be great. :)

Anyway, here's the main post .


	Logged

Dan Q
Sr. Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Artifacts:

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

« Reply #10 on: December 05, 2025 @511.82 »

For the convenience of anybody coming to this thread, here's a quick summary of all the ways (I know) that a person might "share" an element (header, footer, navbar, whatever) of their site across multiple/all their pages:

Method	Explanation	Pros	Cons
Manual	Copy-paste the code into each file that needs it.	Easy!	Laborious. Error-prone.
Menu on a separate page	Move your navigation to a separarate page; every other page links to it.	Works everywhere and is easy. Might be enhanced with JS to make the menu appear in a "popup".	Slow and annoying for users. Not suitable for anything except navigation menus.
Frameset	Use a frameset for your entire web site. The nav/header/etc. "frame" just stays there.	Pretty easy. Annoys anti-frame folks.	Not suitable for all designs. Annoys anti-frame folks. Harder to do responsive design. Harder to do accessibility. Deep-linking difficult.
<iframe>	Embed an <iframe> onto each page that needs it, pointing to a static "nav" (or whatever) file.	Pretty easy. Annoys anti-frame folks.	You need to put the <iframe> on each new page. Annoys anti-frame folks. Slightly harder to do responsive design. Harder to do accessibility. Deep-linking difficult.
Reverse-<iframe>	Have a single page which includes your "nav" (or whatever) and load "content" pages into an <iframe>.	Same as <iframe>.	Annoys anti-frame folks. Slightly harder to do responsive design. Harder to do accessibility. Deep-linking difficult.
<object> or <embed>	Write something like <object type="text/html" data="header.html"></object>.	It's basically an <iframe>.	It's basically an <iframe> but with some features missing. Deep-linking very difficult.
<link rel="import">	This was supposed to be "the way" that static sites would do this!	Super easy; like an <iframe> or <object> but "better".	Only a few browsers ever supported it, and they don't any more: boo!
Use a static site generator	Separate your design, shared components, and content, and have an SSG "build" a stack of static HTML pages to upload.	Fast-loading; updating is easy. Can optionally "build" other assets (like CSS, JS).	(Slight) learning curve. Extra build step (compared to entirely static sites).
Server-side includes	Put code like <!--#include virtual="/header.html" --> wherever you need to "include" it.	Fast-loading; updating is easy.	Requires a webserver that's configured for server-side includes (nowadays, most aren't).
Embed using JS	Add JS to do something like fetch('header.html').then(r=>r.text()).then(t=>document.querySelector('header').innerHTML=t);	A natural progression if you (for some reason) don't want to use an SSG.	Slows page loading; requires JS (if JS fails for any reason, the header doesn't load at all).
Render using JS	Include a JS file on every page; that JS file "writes" the menu.	Might have better performance than "embed using JS", on slow connections (can save a single round-trip). Can be implemented as a progressive HTML Web Component.	Maintenance nightmare. Plus all the problems of "Embed using JS".
Server-side image map	Put your entire header into an image with <a href="/nav.map"><img src="header.png" ismap>[/url] and put coordinates-to-URL mappings in nav.map	Makes you feel clever to be using a technology nobody uses any more! Lets you have "secret" links that can't be detected without clicking the right spot.	Appalling for accessibility. Pretty awful for responsive design. Requires what is nowadays a relatively-exotic webserver configuration (or else needs a server-side language, at which point there are better approaches).
Proprietary technology	Use Java, ActiveX, Flash etc. to embed a navbar. Or a client-side scripting language like JScript or VBScript, if you don't mind it only working in Internet Explorer!	These technologies seemed clever at the time.	These haven't worked for years. You'll struggle to find a browser that supports any of them.
Embed using a server-side language	Do something like <?php include('header.html'); ?>	Almost as fast as a static file and no special browser requirements.	Requires a webserver running a server-side language (which is unlikely to be free). Introduces whole new ways to shoot yourself in the foot.

Did I miss one? Let me know! (I've included methods I don't recommend - marked in red - including some which are obsolete, for completeness, but I might have forgotten something!)

Did you learn something today? Let me know that, too!


	Logged

Artifact Swap:

Dan Q
Sr. Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Artifacts:

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

« Reply #11 on: December 05, 2025 @517.62 »

Possible future ideas that don't work today but might (maybe!) in the future, and so I didn't include in the table above include:

Embed an SVG with <img>; <svg> includes xlink: namespace and <a> tags - doesn't work because most browsers don't respect hyperlinks in SVGs unless their "inline" SVGs
<link rel="include"> comes back? - for a while it looked like this standard was gonna take off... maybe someday!
CSS content: blocks - right now these can only contain plain text, and that's probably for the best, but someday they or some other CSS feature might allow hyperlink injection
XML + XInclude - XML documents already have an "inclusion" strategy, and with some careful stylesheeting XML documents can look just like web pages... but this doesn't work because no browser I know of supports XInclude


	Logged

Artifact Swap:

alexela64
Sr. Member ⚓︎

Liberation within our lifetime!
⛺︎ My Room
SpaceHey: Friend Me!

Artifacts:

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

« Reply #12 on: December 16, 2025 @829.92 »

Quote from: Dan Q on December 05, 2025 @511.82
For the convenience of anybody coming to this thread, here's a quick summary of all the ways (I know) that a person might "share" an element (header, footer, navbar, whatever) of their site across multiple/all their pages:
I know this doesn't add much to the thread but I just wanted to thank you for this helpful chart!! Made it a lot quicker to figure out what I wanted to try.
It's been two years since I started webmastery and i've just been copy pasting because i can't be assed to figure out something smarter. And then I realized from reading this that the only reason I had been doing that was because at the time of my site's creation, I didn't understand iframes -- which I thankfully do now!
Iframes it is 


	Logged

Pages: [1]

« previous next »