Dotaz: Jak se v roce 2022 dá "zkompilovat" statický web?

[Kolemjdouci]

TL;DR: existuje nějaký hotový nástroj, který z několika zdrojových souborů sestaví více HTML stránek, v nichž se určité části opakují?

Ahoj všem, po dlouhých letech jsem se dostal k potřebě vytvořit nějaký web - má jít o statické HTML (jakože nebude dynamicky generované na serveru - každý návštěvník dostane ta samá data, ve kterých bude i nějaký ten client-side JavaScript), dohromady několik různých stránek se společným layoutem.

Rád bych to měl udělané tak, aby layout byl v jednom zdrojovém souboru a obsah jednotlivých stránek v dalších samostatných zdrojových souborech, přičemž výsledné HTML pro umístění na webserver se z těchto souborů na můj povel vygeneruje. Tzn. na konci mám třeba pět HTML souborů, které se od sebe liší jen relativně malou částí obsahu, ale když chci společnou část změnit, sahám jen do jednoho zdrojového souboru.

V dobách, kdy bylo běžné všechno řešit dynamickým backendem, bych to v PHP napsal v principu takhle:

  <?php
    include 'header.php';
    include $pozadovanaStranka.'.php';
    include 'footer.php';
  ?>

V aktuálním projektu ale server-side funkcionalitu nechci, stránky se budou servírovat furt ty samé a mně jde jen o usnadnění správy obsahu. Určitě nejsem v době client-side aplikací komunikujících s hromadou API jediný, kdo něco takového řeší, ale nenašel jsem žádný vhodný hotový nástroj, i když to principielně jde udělat i šikovným bash skriptem.

Hledal jsem pojmy jako "html preprocessor", "html compiler", "html generator", "html templating" ale našel jsem jen věci, které nechci (kromě "free" online služeb, které jsou úplně mimo, jsem našel jen věci jako Pug, Slim a Haml, případně HTML tag <template> které ale míří na zjednodušení zápisu HTML v rámci jedné HTML stránky). Mohl bych si na to napsat shell skript, což ale při ošetření všech detailů není práce na pět minut, případně by šlo použít i to PHP, ale opět by bylo potřeba napsat nějaký wrapper, což se mi zdá, že by nutně muselo být vynalézání kola.

Jak to řešíte vy?

---

---

Odpovědi

[X]

Pouzivam jekyll a to co hledas je "static site generator". Je jich fakt hodne.

[Kolemjdouci]

Dik! Tohle jsem hledal. Teda nevim, jestli konkretne Jekyll je to, co jsem hledal, ale aspon uz je to nastroj, kterej se blizi, a vim, co hledat dal.

[Ruža Becelin]

Jeste bych X doplnil: https://jamstack.org/generators/

Da se to filtrovat podle chuti a preferovaneho jazyka/sablony.

[Kolemjdouci]

Paradni odkaz, k tomu se jeste budu hodne vracet, diky!

[lukve]

Ešte by sa dalo použiť jedna velka index.html kde by mal viacej odsekov kazda vlastne ID a potom uz sa len pohrat z CSS ze klikne na prikladn a About a zobrazi sa obsah DIV s about. je to dost elegantne riesenie aj ked zalezi od toho kolko toho chce tam mat textu ci to nebude az moc objemna stranka takze za mna HTML+CSS bez JS ale ak uz javascript tak uz by som ukladal data do JSON a mas uplne staticku webku bez PHP

[Kolemjdouci]

Diky za odpoved. Tehle ceste jsem se prave chtel vyhnout - sice jsem se zbavil server-side generovani, ale porad musim udrzovat naprosto custom kod, aby to fungovalo.

Resim to pro stranky, ktere se jednou vytvori a pak se tisickrat zobrazi kazdemu stejne, nez tam nekdo jednou mozna upravi jeden odstavecek, ktery se zase zobrazi tisickrat a kazdemu stejne. Neni duvod takovou vec tisickrat generovat (i kdyz u klienta) - z mnoha duvodu je lepsi to udelat jednou a pak servirovat vysledek. A predevsim to nechci resit vlastnim bastlenim, ale chci pouzit existujici odladenej nastroj, kterej se bude chovat stejne i u dalsich projektu.

[Peter Golis]

V časoch keď sme sa pripájali na internet cez pevnú linku sa na takéto niečo používali elementy FRAME a IFRAME. Občas to ešte vídavam na niektorých stránkach.

Nebude jednoduchšie dať statickú časť stránky do jedného súboru, a v ňom použiť Inline Frame ktorá má byť odlišná? Cel by to vyzeralo podobne ako ten príklad s PHP.

[Kolemjdouci]

Uznavam, ze tohle by bylo superjednoduche a hodne oldschool reseni, ale zase cilem je, aby to trosku odpovidalo letopoctu. Iframe si sam o sobe neporadi uz s takovou malickosti, jako zmena <title> stranky, navic to HTML bude relativne moderni (nejakej Bootstrap, JS komunikace s API apod.), takze s Iframe by bylo spis vic problemu.

Ale rozhodne to beru jako zajimavou myslenku - kdyz si clovek udela odstup, tak naskakuji i dost neotrele moznosti reseni. Diky za to.

[Peter Golis]

A v tom JS čo bude bežať na strane klientovho prehliadača sa nedá zbúchať ten výstup? Myslím že v ňom existovali kadejaké funkcie ako document.write() alebo document.title. Uznávam že komplikovať to pomocou ďalšieho nástroja je dobrý spôsob obfuskácie.

Ale prezraď mi čo je podľa teba statického na dynamickom webe.

[Kolemjdouci]

Ono se to zbastlit samozřejmě dá mnoha způsoby a client-side JS kód je určitě jeden z nich, šlo mi ale o to, abych nebastlil na koleni něco, na co ve dvacátých letech jistě existujou hotové standardizované nástroje. Z NIHS už jsem se před lety vyléčil

A pokud jde o statický vs. dynamický web, hned na začátku původního dotazu jsem psal, že "HTML nebude dynamicky generované na serveru - každý návštěvník dostane ta samá data, ve kterých bude i nějaký ten client-side JavaScript", tzn. celou dobu mluvím o statickém provedení na serveru. Client side neřeším, naopak tam nechci vnášet dopředu žádná omezení.

[gggg]

Pelican?

[Kolemjdouci]

Diky za tip, taky by slo. Nakonec jsem zvolil Hugo, ale tohle vypada jako pouzitelna alternativa.

[[Jooky]]

Jak to řešíte vy?

mkdocs. Zdrojove subory su napisane v markdown. Index (a teda layout stranky) v subore podobnom yaml.

Ja to pouzivam hlavne na dokumentaciu a wiki. Thema "material" s farebou schemou "slate" mi na to uplne vyhovuje. Cez themy sa to da celkom customizovat, takze sa tak da spravit aj pekna zakaznicka stranka.

Mne sa na tom hlavne paci, ze si viem pozriet zmeny lokalne (ma to v sebe web server). Ked som spokojny, tak dam vygenerovat html subory, ktore len nakopirujem (rsync) na web server a vybavene.

[Kolemjdouci]

Ted aktualne je pro me markdown prilis velka limitace, ale napada me, kde mkdocs s vyhodou vyuziju. Diky za tip!

[Kolemjdouci]

Dik yza podnetnou diskusi! Nakonec jsem vybral Hugo, trochu jsem se celkem zorientoval a uz mi to nepripada jako kanon na vrabce.