What is a static website generator?

Question

Recently I came across this theme, more precisely the tool Hugo, that basically builds sites from themes and Apis reminding a lot of Ruby on Rails.

I ran a test on build of an application that uses a static JSON for content listing, example:

products.json

[{
    "id": "1",
    "name": "Klingon dictionary",
    "price": 34.87,
    "image": "/images/dictionary.jpg",
    "description": "nIvbogh tlhIngan dictionary qaStaHvIS veng SuvwI'",
    "url": "http://snipcart-hugo.netlify.com"
}, {
    "id": "2",
    "name": "Captain Kirk Phaser",
    "description": "The Original Series Phaser comprises a small, hand-held Type I Phaser, which slots into a larger Type II Phaser body with a removable pistol-grip.",
    "price": 145.98,
    "image": "/images/phaser.png",
    "url": "http://snipcart-hugo.netlify.com"
}]

HTML

<div class="col s6">
    <h2 class="header">{{ .name }}</h2>
    <div class="card horizontal">
        <div class="card-image">
        <img src="{{ .image }}">
        </div>
        <div class="card-stacked">
        <div class="card-content">
            <p>{{ .description }}</p>
        </div>
        <div class="card-action">
            <button
                class="snipcart-add-item waves-effect waves-light btn"
                data-item-id="{{ .id }}"
                data-item-name="{{ .name }}"
                data-item-price="{{ .price }}"
                data-item-url="{{ .url }}">
                    <i class="material-icons right">shopping_cart</i>
                    Add to cart
            </button>
        </div>
        </div>
    </div>
</div>

When consulting the requests, the file products.json was not requested in client making clear the safety of working with JSON directly on DOM.

What is and how this kind of tool works?

Answer 1

There is a huge amount of tools like this, some are very sophisticated CMS, with the difference that the page to be viewed is not created at each request as is common.

Think about it, if a page practically doesn’t change, it doesn’t deliver something different to each user, to each access, so why create this page dynamically? The way it’s done in most Cmss is insane.

You can have all the CMS infrastructure, a database, data files, and generate the page every time it changes in some way. Then you change the processing need of the moment of reading the page to the moment there is written on it, which is very rare, many pages will never receive changes.

The generation takes place in much the same way that everyone knows, but instead of already having the server deliver for a request it writes to a file and/or keeps it in memory so that it is delivered ready every time there is a request. In fact in most cases you don’t even need to have an application serving it, you can generate HTML and leave it there as a static page, the difference is that there is a backend for your generation, it was not made in the hand. And it has a Dashboard for administration

It’s very simple to do this, very efficient and usually much safer.

The people don’t use it anymore because they don’t know the technique, which is naive, it’s not advanced. It’s that people don’t think to do it, they follow what they read somewhere and they don’t create anything, they don’t look for new solutions, they don’t weigh the alternatives, they’re not engineers.

In this case there is this JSON somewhere with the data needed to generate the page

But only with this excerpt it is not clear if this is what is happening, it seems that there is a request for JSON data on a static page and that the data is loaded dynamically, for this needs some script that does this load. It may be that this is one more SPA than static content.