0

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:

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?

stackprotector
  • 10,498
  • 4
  • 35
  • 64
  • 1
    Seems you are looking for a static site generator. There are many around for pretty much all languages. After the build-process, you end up with a bunch of static files to deploy to your webserver. – Sirko Apr 03 '22 at 08:53
  • "Static site generator" indeed seems to be a keyword I was missing. Looks like there are some promising results. Will have a deeper look into that. Thx! – stackprotector Apr 03 '22 at 09:01

2 Answers2

1

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><a href="{{ post.url }}">{{ post.title}}</a></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.

chris
  • 2,490
  • 4
  • 32
  • 56
0

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

Nitin Kumar
  • 77
  • 4
  • Yeah, "static site generator (SSG)" seems to be the thing. Instead of providing a recommendation about a particular tool, I encourage you to elaborate on SSG as a development process itself. Otherwise your answer might be inapropriate for this site. – stackprotector Apr 03 '22 at 09:04
  • you should watch this https://youtube.com/watch?v=rZyNBd1WgVM – Nitin Kumar Apr 03 '22 at 09:39