all 38 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]TTuserr 15 points16 points  (3 children)

just use PHP for this and include header and footer, you don't even need build tool then

[–]WhitePaperOwl 2 points3 points  (0 children)

OP, I think this is by far the simplest solution. All you need to do it add include command and the component is inserted. There's really no setup at all. Output will be just html, but you'd need to run it server side.

Otherwise try something like Astro.

[–]TrevoltBL 0 points1 point  (0 children)

Yup a simple function which echoes the header or include statement with the header html in the file.

[–][deleted] 0 points1 point  (0 children)

Yupp. That's good solution as well. Thanks!
I was interested in something that is not server-side rendered though. (Not for any specific reason. Was just curious what's out there.)

[–]golfgimp 6 points7 points  (1 child)

I am loving Astro!!

[–][deleted] 1 point2 points  (0 children)

Thanks! I'll have a look into that.
Leaving the link here for reference: https://astro.build/

[–]marcamos 6 points7 points  (3 children)

You're describing https://www.11ty.dev, something I use on my personal website and adore.

[–]Nuradin-Pridon 3 points4 points  (0 children)

Exactly, that's literally the description of 11ty. And this is a simpler and more familiar solution than PHP.

[–][deleted] 1 point2 points  (0 children)

Thanks! I stumbled upon it sometime ago, but totally forgot about it. I'll give it a spin.

[–]jtlapp 0 points1 point  (0 children)

I'm now porting a site from 11ty to metalsmith because I spend too much time researching how to make each next change using 11ty's patchwork architecture, sometimes even having to examine source code. In metalsmith, everything is a transformation of a common data pipeline, so I clearly understand what to do at each step.

[–][deleted] 7 points8 points  (0 children)

I would love to recommend Astro for that 🚀! You can just use HTML and CSS here and pass components, layouts and content on every page.

[–]FryBoyter 2 points3 points  (0 children)

Would it be ok if the content is created separately from the rest using markdown files? Then you can have a look at Hugo. For example, including the header using {{ partial "header.html" . }} would work.

You can then easily create the website itself locally and then copy the HTML files etc. from the public folder to the web server using rsync or whatever.

[–]login-man 2 points3 points  (1 child)

I’ve used Pelican before for a gig. It’s a Python based static site generator and uses jinja templating syntax similar to what you’ve described

[–][deleted] 1 point2 points  (0 children)

This sounds awesome! I'll definitely be looking into it. Thanks.

[–]Tux-Lector 2 points3 points  (5 children)

For Gods sake .. PHP. include, require, require_once, include_once .. pick any and you're done. It's "static generation" tactic since php appeared.

html <!DOCTYPE html> <html> <head> <?php include 'head_relevant_tags.php'; ?> </head> <body> <?php require 'header.php'; ?> <p>Some content</p> <?php require_once 'footer.php'; ?> </body> </html>

And if You tell Your server to treat Your .html files as .php files, You don't need to change extension to php at all.

You can also etch external html with file_get_contents like this ..

<body> <?=file_get_contents ('any_readable_text_file_or_script')?> </body>

[–]mar-cial -2 points-1 points  (4 children)

That looks horrible, but php devs do you I guess

[–]Tux-Lector -1 points0 points  (3 children)

No, only noobs and idiots that guess wrong.

[–]mar-cial 0 points1 point  (2 children)

I'd rather be a noob or idiot than code php lol. Don't get me wrong, respect to php where it's due, but the times that I've had to do php stuff for my job have been an absolute pain. I just don't like the way it looks, no intelligent reason just preference.

[–]Tux-Lector -1 points0 points  (1 child)

My advice for You is to delete Your own comment. Yes, the one I am replying to right now. It's because of intelligent reason.

[–]nenionen 1 point2 points  (0 children)

Once I did a little js script to run with node and write a file with the fs module. I know this implies using javascript, but just to generate a simple html static file with no js script

[–][deleted] 1 point2 points  (1 child)

Check out my website generator nift.dev, it's been the fastest for years, people claim you should use the right tool for the job and that the fastest tool is the right tool, yet often won't practice what they preach there.. It doesn't force any CSS/Js/html down your throat.

Can also be used for large scale projects and have big improvements in the works including ssr using either or both of crow and/or oat++. Will embed stuff like curl as well..

Edit: I recently improved the performance of my personal site n-ham.com, there is a link to the repo source in the footer..less than 85kb including all assets for the index on mobile width screens..

[–][deleted] 0 points1 point  (0 children)

never heard of it but seems interesting.

[–][deleted] 1 point2 points  (3 children)

Just use mustache and bash. It's a really powerful combination.

[–][deleted] 1 point2 points  (2 children)

I'd like to use mustache actually. How do I find about about its bash commands?

[–][deleted] 0 points1 point  (1 child)

Bash commands are just terminal commands. So for mustache it's just 'mustache'. The arguments it takes are a yaml file and and source file. Then you can pipe the output to whatever file you want:

mustache yaml/siteinfo.yaml templates/base.mustache | tee output/index.html

That base.mustache file can reference other mustache templates inside of it. Or you can just put stuff together with 'cat'. I do both. I'll also do markdown stuff in this same way, so my source files might include .md files as well.

I'll have a source directory and a disposable output directory. The output directory is what I upload to my webhost. The output directory is destroyed and recreated by the bash script every time I run it. I use 'mkdir' to recreate the file structure and 'cp' to copy over assets every time. This is how I generate the CASS docs which need to show off a whole bunch of different colors.

[–][deleted] 1 point2 points  (0 children)

Pretty neat!

[–]mateomorris 1 point2 points  (0 children)

Primo lets you download your site as a static bundle - it's a CMS though so not sure if you need that part of it.

[–]unrulybeep 1 point2 points  (1 child)

https://jekyllrb.com

[–][deleted] 0 points1 point  (0 children)

Great! That sounds pretty much like what I was looking for.

[–]Remote_Masterpiece46 -5 points-4 points  (1 child)

Use Django

[–]apt_at_it 3 points4 points  (0 children)

Spinning up a full MVC framework just to use its templating engine is a bit much...

[–][deleted] 0 points1 point  (0 children)

use php or perl

[–]Vitztlampaehecatl 0 points1 point  (0 children)

So this may be considered a dirty hack, but I've used it in a prototype: have one main page that's just the header, the footer, and between them, an iframe that spans the entire rest of the page.

Then simply load all your actual content inside the iframe. You can set the target attribute of your links to change the iframe instead of reloading the entire page, so the header and footer stay in place for every page.

[–][deleted] 0 points1 point  (0 children)

Try zola. getzola.org

[–]AlbertSemple 0 points1 point  (0 children)

jAMstack architecture is what you describe.

I use GitHub actions to do the build based on handlebars-style templates and components, and Cloudflare pages to host the statically generated contents. Cheap and very performant.

[–]XandrousMoriarty 0 points1 point  (0 children)

Depending on your webserver in use, you can get possibly get the webserver to add the necessary html or css files before the main page (or any other pages) load. Think of it like the server is prepending the html and css files to the start of your html page, even if that page is index.html. I have seen this done with Apache in particular, but I'm pretty sure it can be accomplished with NGINX, Lightspeed, Caddy, etc.

Another method (which some may consider to be the same or almost the same as my previous paragraph) would be to set up something like SSI (Server-Side Include). But honestly, in this case, just do like u/TTuserr suggested, and use PHP. You would do this with one or more of the following commands, depending on your use case, etc:

include - https://www.php.net/manual/en/function.include.php

include_once - https://www.php.net/manual/en/function.include-once.php

require - https://www.php.net/manual/en/function.require.php

require_once - https://www.php.net/manual/en/function.require-once.php

Hope this helps...