I am developing a simple static website with just HTML and CSS. On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
I am aware of doing it via PHP on the server side or via JS on the client side. But as it is a simple static website, there is no need to create it over and over again either on the server side or on the client side. I think it would be the best to somehow generate the finished HTML code once and upload it to the webserver. Just like compiling C code and shipping the ready to use executable.
I can also imagine, that such a compiler is able to remove comments from HTML and CSS, optimize (minimize) the code, or realize variables in CSS (e. g. for colors) etc. There are a lot of similar questions, just to name some:
Make header and footer files to be included in multiple html pages
Need an efficient way to get rid of my duplicate HTML code in multiple HTML files
How to include header/footer in a static website?
But they are all about doing the compiling over and over again by PHP, JS or server side includes, which are wasted resources for a static website.
So I am wondering, is there no such thing as "compiling a website"? How is it done nowadays? What am I missing?
On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
This use case fits very well with template engines, such as Handlebars, Mustache or Pug, just to mention a few. Template engines simplify your development by letting you re-use components across multiple files.
Besides, template engines are (also) good at being complemented with data feeds. This simplifies the process of creating your HTML files even more. Let's look at an example why:
// example taken from Pugjs.org
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
The sample code will render 3 <li> DOM elements from data that can be generated with JavaScript. This allows your website to be dynamic in content. That is exactly the key difference with Static Site Generators.
Static Site Generators (SSGs) can also compile HTML files with reusable components. However, these tools (i.e. Jekyll, Hugo, etc) emphasize more on the "static" compilation of the website, rather than the dynamic data complement. Just to elaborate more on this, Jekyll uses Liquid, which is a template language for HTML. Let's say Jekyll is the engine in charge of the layouts, HTML files, deployment etc. Whereas, Liquid a template language, allows you to do loops similar to Pug (template engine):
{% for post in site.categories.podcasts %}
<li>{{ post.title}}</li>
{% endfor %}
If your website has a lot of static content like blogs with articles, tutorials, images, and even writing documentation or basic text information, SSGs should be your option. For more dynamic content, i.e. fetching from server communication and databases, a template engine is definitely better.
If you want even more robust options, then you have Gatsby which is a framework using React for CMS, and again, a static content generator with more capabilities.
No compiling.
You need a static site generator (SSG). BTW I recommend 11ty, It is the best if you want simplicity & no limitaion on template languages (html, md, nunjucks, liquid, handlebars, etc are supported)
EDIT 1:
If you want to get started quickly then comment below, I have ready to use code to with HTML, CSS, JS minification, concatination
I want to create my first statice html template to sell it on theme forest or somewhere else. But how can I create my templates without redudant html code, e.g. header or footer? In PHP you can use the include function, but this is a server side include and frames are the wrong way.
How do the professionals manage their static html templates? Do they use HAML to precompile the html code? Or do they really manage every single html file manually?
Thanks,
rjgamer
It depends a bit on what framework you are using. If you are on ruby you will likely use a layout file with a header and footer and a yield call where you want the specific content to appear. In rails this is done automatically for you by naming convention. Other frameworks may do it differently.
I've been trying to find a way to write HTML partials (header.html, nav.html etc.) and include them inside another HTML page as a part of my build process.
I know about server-side includes in Apache or includes in PHP but I was wondering if there was a way to do it in Node ? I've tried using template engines like Jade or Handlebars but they were not really built for that. Jade was the closest to what I'm trying to achieve but I don't want to use the syntax and there's no good way to use regular HTML. With every other one you have to include a script tag in your HTML, which I would have to strip for production.
I'm just trying to build a static website and would like to keep my build process simple (I'm using NPM scripts). Do you know any other way around copy-pasting the common parts of my website for every page ? How do you manage this in your workflow ?
Here is a recap (a bit overdue) of what seem to be the best solutions for a simple use case: preprocess (has more options, can use custom or environment variables) and ssi (mentioned by #Alex K., it is very simple and sticks to Apache-style server-side includes). I ruled out jade since it added a lot of features I didn't really need.
This actually is really a perfect use case for jade or some other tempting engine.
Layout
The basic approach would be to create a layout.jade file with all the stuff that doesn't change and dictates the general layout of the site.
layout.jade
doctype strict
html(xmlns='http://www.w3.org/1999/xhtml')
head
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
title some title
body
| Static content like nav
block pageContent
Content based on the route
Within the layout file you can define a series blocks as place holders for content to be injected from other templates. That template will extend the layout and inject the relevant blocks, something like this:
some-route-template.jade
extends layout
block pageContent
| I am content from the relevant page
Compilation
The only thing left at this point is to compile template that matches the requested route using the jade library
I'm using static html pages and incline js to generate dashboard. The backend is go.
However, as number of pages growing, I have to maintain a lot of html pages, and many of the block elements are duplicated.
I'm wondering whether there're some cases to use jekyll to generate dashboard pages, since jekyll can convert pieces of elements into complete htmls? So that I can modify one part and the modification take effect on every html pages that generated.
Are there better framework to do so?
Thank you!
If you're duplicating elements, then those are the perfect pieces of markup to put into a layout and/or include. That's exactly what those are for.
Each individual page you need can reference a specific layout in its front matter. Includes can be used within the individual pages or within the layouts or both (and can be nested).
The Jekyll Documentation is ok for this, but to wrap your head around it I find it easiest to look at the documentation together with a few existing Jekyll templates to understand how it all fits together.
after a bit more dig. I found that packages such as Grunt and Gulp can be used to generate htmls from separate parts.
I have several html templates that extend a base template using django. In these templates there are common html/django snippets that I would like to have in one place and then rendered in the various places they appear in the templates.
i have looked at include tags, but I'm not sure this is what I need.
Any suggestions or explanations appreciated
Thanks
Include is the way... you can keep your snippets in a template subdirectory (like templates/includes/....) for example and do {% include "includes/mytemplate.html %}.