Way to include HTML code statically instead of in a live environment?

Question

I am building a front-end website, no back-end code at all, since I want to host it on GitHub pages, and honestly adding any back-end would be overkill.

Is there a way to include common elements of the website in each webpage easily? For example, add a special tag that specifies which html file to replace that tag with and running a command that will do that and place it in a file which will be the final product? This is so I can have this instead of copy-pasting my nav-bar code whenever I make a small change for example.

Is there a NodeJS package for this?

I saw similar questions, however, they aren't exactly asking for the same thing as I'm looking for...

There's hundreds of tools for that, but it sounds like Jekyll is probably what you are looking for: https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/setting-up-a-github-pages-site-with-jekyll — dpwr, Dec 12 '20 at 01:44

score 1 · Answer 1 · answered Dec 12 '20 at 01:46

1

What you're looking for is called a boiler plate. This should give you a good place to start.

When you say "No back-end code at all" do you mean - no database that stores information that your website displays, or do you mean you don't want to have any dedicated javascript files in your project and want to work on pure html/css? To me, it appears like you are talking about the latter - in that case, you can add some jquery to your code right in the html files by using the <script></script> tag.

answered Dec 12 '20 at 01:46

MCA

92
6

How would I do this with JQuery? I've tried the answer at https://stackoverflow.com/questions/15320801/how-to-include-an-html-file-with-jquery however, there was a brief instant where the page would show without the JQuery included files and it would be very noticeable... Is there another way? – Yiannis128 Dec 12 '20 at 02:01
Would you be able to post the code you have so far? I will be able to provide you with a more in-depth solution or pathway-to-solution if I could see the source code. – MCA Dec 12 '20 at 02:10
` @(Common.html)@ @(Header.html)@

...

@(Footer.html)@ ` Here is the code, the @(html file)@ is used to just mark where I would want to include the files – Yiannis128 Dec 12 '20 at 02:12
Is there no NodeJS package that could do this? – Yiannis128 Dec 12 '20 at 02:13
There might be - but what you can consider instead is simply organizing your project file tree so that you can reference these with a simple line of code like: . You would simply create these separate html files and reference them in the different html files you want to create with that line of code i wrote above. – MCA Dec 12 '20 at 02:19
How would creating an tag with a href attribute pointing to the file include them inside the html file? I think I might be misunderstanding something.... – Yiannis128 Dec 12 '20 at 02:23
1

https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages. - This is what you're looking for! – MCA Dec 12 '20 at 02:28

score 0 · Answer 2 · answered Dec 12 '20 at 02:25

0

<!DOCTYPE html>
<html>
<body>
<a href ="src/boilerPlate/header.html"></a>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<a href = "src/boilerPlate/footer.html"></a>
</body>
</html>

And your file tree would look like:

SRC
    >>index.html
    >>boilerPlate
             >>>>header.html
             >>>>footer.html

answered Dec 12 '20 at 02:25

MCA

92
6

1

This isn't what I'm asking for though, since say you have a navigation bar that is across 10 static html webpages, you can't include it in all of them using this method... I'll just make a bash script that does it... Thanks for taking your time to help anyway. – Yiannis128 Dec 12 '20 at 02:29

Way to include HTML code statically instead of in a live environment?

2 Answers2