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

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
Newbie ⚓︎

⛺︎ 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
Newbie ⚓︎

⛺︎ 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:

Pages: [1]

« previous next »