- Klient
- BOIT Cyber Security s.r.o.
- Co jsme dělali
- Vývoj webu podle předlohy, redakční systém, nasazení v Azure
- Technologie
- Next.js, Payload CMS, PostgreSQL, Azure
- Web
- boit.cz
KlientKdo je BOIT a co od nového webu potřeboval?
BOIT je česká firma, která prověřuje, jak jsou na útok připravené systémy i lidé. Dělá penetrační testy, simulovaný phishing a další testy sociálního inženýrství, pomáhá firmám s NIS2 a školí zaměstnance, management i správce IT. Pro školy a rodiče má vlastní programy a na webu nabízí bezplatné nástroje, třeba generátor hesel nebo kontrolu podezřelých odkazů.1,2,3
Původní web běžel na WordPressu. Stránky stavěl Elementor Pro, menu JetMenu, prodej webinářů WooCommerce, materiály ke stažení Download Monitor, SEO Yoast, historii změn Jetpack a analytiku Google Site Kit.20 Sedm pluginů, sedm zdrojů aktualizací a sedm míst, kde se může něco pokazit. U firmy, která o bezpečnosti učí ostatní, to byl problém.
Zadání stálo na pěti požadavcích:
- Marketing bez programátoraMarketérka spravuje celý web sama: logo, menu, stránky a jejich sekce, články, kategorie i štítky. Bez čekání na vývojáře.
- Design, který nejde rozbítVizuální návrh dodal BOIT jako hotovou předlohu. Web ji musí přesně dodržet, i když obsah upravuje někdo bez zkušeností s grafikou.
- Vzorová bezpečnostJak praví interní pravidla projektu: web o bezpečnosti musí být vzorový. Žádné klíče v kódu, bezpečnostní hlavičky, kontrola závislostí.20
- Všechno u MicrosoftuHosting, databáze, soubory, kód, úkoly i nasazování v Azure, s přístupem pro lidi z firemního tenantu BOIT.
- Dva jazyky, dva režimyČeština i angličtina, světlý i tmavý režim, rychlé načítání na mobilu.
ArchitekturaProč Next.js a Payload, a ne další WordPress?
Protože jedna aplikace s jednou databází se líp hlídá, zálohuje i nasazuje než web poskládaný z pluginů. Než jsme vybrali CMS, prošli jsme osm kandidátů: Payload, Wix, Storyblok, Sanity, WordPress s Gutenbergem, Webflow, Strapi a Directus.20 Vyhrál Payload. Je open source, běží přímo uvnitř Next.js a administrace je na adrese /admin téže aplikace.6,7 Žádná další služba, licence ani synchronizace dat mezi systémy.
| Část | Volba | Proč |
|---|---|---|
| Aplikaceweb i API | Next.js v TypeScriptu | Web i API v jednom projektu, velká komunita, rychlé stránky generované předem |
| CMSspráva obsahu | Payload CMS uvnitř Next.js | Open source, zdarma, obsah i data v jedné databázi |
| Databázeobsah a data | Azure Database for PostgreSQL | Spravovaná databáze u Microsoftu se zálohami v ceně |
| Souboryobrázky a PDF | Azure Blob Storage | Levné úložiště, které Payload umí nativně |
| Hostingprovoz | Azure App Service | Unese web, CMS i API najednou, vlastní doména a HTTPS v ceně |
| Vývojkód, úkoly, nasazení | Azure DevOps | Repozitář, úkoly i pipeline na jednom místě v tenantu klienta |
Správa obsahuJak může marketing měnit web, aniž by ho rozbil?
Tak, že neskládá stránku z pixelů, ale z hotových sekcí. Z předlohy jsme vytáhli opakující se prvky a každý udělali jako jednu komponentu s variantami: hero, mřížku karet, reference, ceník, postup, FAQ, tým, pruh log klientů a další. Dnes jich je přes dvacet. Marketérka vybere sekci, vyplní texty a zvolí variantu. Barvy, písmo a odsazení hlídají tokeny designu, takže stránka vypadá jako zbytek webu.20
Každý plugin starého webu dostal náhradu přímo v aplikaci:
Elementor Pro a JetMenu Nahrazeno
Stránky z bloků v Payloadu a hlavička s mega menu jako jedno nastavení. Šablony stránek a blok pro vlastní HTML, když je potřeba něco mimo katalog.
Yoast SEO Nahrazeno
SEO pole u každé stránky a strukturovaná data generovaná z obsahu, včetně jazykových verzí pro Google.
Jetpack Activity Log Nahrazeno
Vlastní log změn: u každého záznamu je vidět, kdo ho přidal a upravil, kdy, a jak vypadal předtím.
Google Site Kit Nahrazeno
Vlastní anonymní měření návštěvnosti bez cookies. Google Analytics se zapne, jen když s tím návštěvník souhlasí.19
Jedno technické rozhodnutí stojí za zmínku. Sekce stránek ukládáme do databáze jako jeden dokument, ne do desítek tabulek. Načtení stránky je díky tomu jediný dotaz a nový typ sekce nepotřebuje novou tabulku. Bloky s mnoha poli předtím narážely na limity Postgresu.20
BezpečnostJak se staví web firmy, která se živí bezpečností?
Tak, aby bezpečnost nezávisela na tom, jestli si na ni někdo zrovna vzpomene. Většinu pravidel jsme proto dali do automatické pipeline. Každý push do hlavní větve projde stejnými kontrolami a když něco neprojde, nasazení se zastaví.9
bezpečnostních hlaviček posílá boit.cz s každou stránkou: CSP, HSTS, ochranu proti vložení do cizích rámců a další. Ověřili jsme na produkci.11,12,13
klíčů a hesel v repozitáři. Žijí jen v konfiguraci Azure a v proměnných pipeline.
smí trvat pipeline od pushe po nasazení. Změnu, která ji prodlouží, nepushujeme.
Co pipeline hlídá:
- Dodavatelský řetězec. Balíčky npm se instalují bez spouštění jejich instalačních skriptů, jen pár ověřených se po instalaci znovu sestaví. Přes instalační skripty vedou útoky na dodavatelský řetězec.15
- Zranitelnosti. Nová kritická zranitelnost v balíčcích běžící aplikace nasazení zastaví.14 Aktualizace závislostí připravuje Renovate a před sloučením projdou stejnými testy.10
- Databáze. Pipeline pozná změnu schématu bez migrace a nepustí ji dál. Na produkci se tak nikdy nedostane kód, který nesedí k datům.
- Kvalita. Kontrola typů, lint a automatické testy běží souběžně, aby se vešly do limitu.
TempoJak rychle to šlo a co udělala AI?
Plán schválil BOIT 15. 10. 2026 a ještě týž den stála kostra aplikace s pipeline do Azure. O čtyři dny později bylo v CMS všech 32 stránek předlohy česky i anglicky, s drobečkovou navigací a SEO, a k tomu kolekce článků, kategorií a štítků pro blog. Za prvních šest dní vzniklo 82 commitů.20,21
Pomohla nám v tom AI. Projekt má soubor AGENTS.md s pravidly, která čte Claude Code, GitHub Copilot, Cursor i další asistenti, a přes dvacet sdílených návodů (skills) na opakované postupy: design, nasazení, přístupnost podle WCAG 2.2 AA, SEO, bezpečnost.21,24,25 Asistent tak pracuje podle stejných pravidel jako člověk a nepřidává si vlastní odchylky od předlohy.
Každou změnu navíc posoudí čtyři role: architekt, bezpečnost, UX a výkon s náklady. Tyhle role nesoudí od oka, každá má vlastní kontrolní seznam v repozitáři. AI zrychluje psaní kódu. Kontrolu kvality ale nenahrazuje, jen ji dělá důsledněji.
VýsledekCo nový web umí a jak si vede?
Web má dnes 84 veřejných stránek ve dvou jazycích, šest interaktivních nástrojů a blog. V Lighthouse získává 100 bodů za přístupnost, osvědčené postupy i SEO a stránka se při načítání neposouvá.1,18
stránek v sitemapě: 43 českých a 41 anglických, s propojenými jazykovými verzemi.4
bodů v Lighthouse za přístupnost, osvědčené postupy i SEO. Výkon na simulovaném mobilu 85 až 96 bodů.22
Web je připravený i na vyhledávání přes AI. Strukturovaná data popisují firmu i služby, robots.txt výslovně pouští vyhledávací roboty AI asistentů a každá stránka má popis a obrázek pro sdílení.5,23 Další fáze podle plánu přidá přihlášení firemním i osobním účtem Microsoft a platby za kurzy přes Stripe.
„Spolupráce s Develogi běžela hladce a všechno bylo hotové v termínech. Kluci reagovali rychle a sami přicházeli s dobrými nápady.“
Pavel Matějíček alias Spajk.cz, zakladatel a CEO BOIT26