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ů :).