Jak jste si určitě všimli, tak blog má nový vzhled. A nejen to, má i celý nový backend. V tomto článku vám popíšu, co mě ke změně vedlo a také co všechno využívá. Také si tím nastíníme obsah dalších článků.

Změna je život

Již nějakou dobu jsem přemýšlel nad novým vzhledem a co všechno bych chtěl změnit či upravit. Blog běžel na Wordpressu a proto vhodnou šablonu jsem mohl najít opravdu ze široké nabídky (nejsem grafik a ani jsem si nechtěl platit za zcela nový design, a už vůbec řešit nasazení nové grafiky na Wordpress). Problém byl ale v tom, že žádná nebyla přesně taková, kterou jsem si představoval a také problém byl v tom, že když bych chtěl přidat nějakou novou funkcionalitu (samozřejmě přes plugin), musel bych řešit i další stylování a ohybání, aby to fungovalo podle mých potřeb.

V té době jsem také narazil na skvělý článek od Freeka Van der Hertena, který řešil podobný problém. To mě přivedlo k myšlence, proč si blog nevytvořit zcela od základu přesně podle toho, jak jsem potřeboval. Využil jsem jeho opensource projektu a upravil si import z Wordpress databáze do vlastní struktury. Tím jsem dostal základ reálných dat, na kterých jsem mohl dále stavět.

Frontend

Jako první jsem řešil vzhled. Jak jsem již psal, nejsem grafik a ani jsem nikdy nechtěl jít do hloubky CSS stylů. Možnost byla teda využít některý z CSS frameworků. Zvolil jsem Tailwind od Adama Wathana, protože mi přišel nejsrozumitelnější z pohledu psaní a čitelnosti kódu. Když se podíváte na různé příklady, nebo i zdrojové kódy těchto stránek, tak zjistíte, že z názvů CSS tříd lze jednoduše předpokládat, co provádějí. Jasně, kód je pak trochu ukecanější, ale o to se jednodušeji píše a čte. Další výhodou je to, že využívá flexbox a návrh layoutu je pak o to jednodušší.

Všechny články jsou psány v markdownu a můžu říct, že psaní v něm je velmi jednoduché a co nejvíce oceňuji je to, že je to standardizované pro všechny editory, které jej podporují. Články jsem původně psal ve Wordpressu v jejich výchozím editoru a abych zvýraznil kód, tak jsem si jednoduše nainstaloval plugin a kódy označoval. Problém pak ale nastal, když jsem si články exportoval do vlastní databázové struktury. Přenesly se totiž i se všechny HTML znaky, odřádkováním a styly, které označovaly kód. Musel jsem tak všechny články projít a přepsat do markdownu. Nyní vím, že když budu potřebovat články někam přenést, nebudu muset řešit stejný problém, protože jiný editor dokáže zobrazit markdown stejně jako předtím.

Backend

Backend byla jasná volba, framework Laravel. Abych nemusel vytvářet celé nové administrační rozhraní, využil jsem Laravel Nova. To mi umožnilo během pár chvil vytvořit vše, co jsem potřeboval pro publikování článků.

Dále jsem chtěl na stránky přidat live autocomplete vyhledávání. K tomu jsem využil Laravel Scout společně s Algolia. Celá implementace je opravdu jednoduchá a zcela plní svůj účel.

Deploy

Možná jste si všimli, že stránky byly pár dní offline. Snažil jsem se celý projekt jednoduše rozjet na Wedosu. Měl jsem tam klasický sdílený webhosting, takže jsem měl i omezené možnosti. Bohužel se mi aplikaci nepodařilo rozjet, konkrétně mi to nechtělo načíst service provider od Laravel Nova. Problém se mi ani po několika hodinách nepodařilo vyřešit a tak jsem se rozhodl využít jiný "hosting". Přes Digital Ocean jsem si vytvořil nový virtuální stroj a protože se mi nechtělo ztrácet čas a ani jít nějak do hloubky s nastavením (a údržbou) webového serveru, využil jsem Laravel Forge k vytvoření a deploy blogu. I když se to může zdát jako overkill, já to beru tak, že virtuál se dá vždycky využít i na další projekty, případně si s ním hrát a zkoušet nové věci. Forge pak umožňuje velmi jednoduše řešit nastavení PHP prostředí, databází apod., aniž bych se musel přes SSH přihlašovat do virtuálu.

Díky vlastnímu webserveru také mohu implementovat do projektu další zajímavé části Laravelu, jako je například Horizon, Echo, Telescope a další. Nejsem tak omezen hostingem, který nemusí vše podporovat, či něco dokonce blokovat.

Závěr

Rád bych se postupně věnoval všem věcem, které jsem zde vyjmenoval a o kterých je dobrý alespoň znát k čemu vlastně slouží a v případě potřeby je využít. Pokud by jste měli o něco větší zájem, klidně napište do komentářů nebo přes Kontakt a pokusím se co nejdříve něco sepsat.