Pozadí.
09.10.2016

Možná bude někoho zajímat, jakým způsobem je tento blog vyřešen po technické stránce. Je totiž hostován na službě AWS S3, která umožňuje uložení a hosting pouze statických dat.

Nejprve možná vysvětlení, proč vlastně používám na hosting S3. Hlavní důvod je ten, že rád zkouším nové věci a chtěl jsem si vyzkoušet něco jiného než jen klasický hosting. Znáte to, máte nějaký server s přiděleným místem a data nahráváte přes (S)FTP nebo nějakým sofistikovanějším způsobem. Platíte paušální platbu. S3 je trošku jiné - paušálně neplatíte nic, nemáte vyhrazený žádný pevně daný prostor a ani vás nezajímá, na kterém serveru jsou data uložena. Místa můžete obsadit kolik chcete (v podstatě) a platíte pak za obsazené místo a za přenos dat. V mém případě jsou to jednotky centů měsíčně.

Jak jsem již zmiňoval v úvodu, služba S3 nabízí hosting pouze statických dat. V první verzi jsem to neřešil a každý článek byl samostatný HTML soubor, který obsahoval záhlaví, zápatí i boční panel. Asi už tušíte, že takové řešení je, mírně řečeno, neoptimální. Já to samozřejmě poznal záhy, kdy jsem měl napsané pouhé 2 příspěvky a potřeboval jsem upravit něco v bočním panelu. Upravovat 3 soubory byla otrava a při představě třeba 50 článků... Napsal jsem tedy jednoduchý JS skript, který řeší „šablonování“ na straně klienta. Jistě existuje spousta client-side šablonovacích systémů, ale já potřeboval něco jednoduchého a nehledal jsem kanón na vrabce. V době psaní článku vypadá skript takto:

$(document).ready(function () {
    var addressElements = window.location.href.split("?");
    var len = addressElements.length;
    var name = (len == 1) ? "index.inc.html" : addressElements[len - 1] + ".inc.html";
    $.get(name, function (data) {
        $("#content").css({opacity: 0});
        window.setTimeout(function () {
            $("#content>.col-sm-10").html(data);
            $("#content").css({opacity: 1});
        }, 500);
    })
    .fail(function () {
        $("#content>.col-sm-10").html("<div class='alert alert-warning'><strong>Not found.</strong>" + 
            " Resource can not be found.</div>");
    });
});

Princip je jednoduchý. Po načtení stránky article.html se najde poslední parametr v URL. Pokud tam žádný není, nastaví se name na index.inc.html. Pokud tam parametr je, přidá se k němu koncovka .inc.html a nastaví se jako name. Potom se pomocí AJAX volání soubor se jménem name načte a vloží na správné místo. Pokud se během načítání něco nezdaří, vypíše se chybová hláška. A to je vše. Samozřejmě by se dala funkčnost rozšiřovat - například udělat možnost načítání souborů Markdown, ale mně se píše dobře v HTML, takže jsem to neřešil.

Celý blog si můžete stáhnout z Githubu. Budu tam posílat všechny změny, které udělám. Příští příspěvek na blog snad napíšu dřív, než za 8 měsíců :).