Jak s ColdHost AI postavit celý web od zadání po nasazení

AI dokáže napsat celý web – ale jen tehdy, když jí práci rozumně rozdělíte. Požadavek „udělej mi web“ vede k obecnému výsledku. Tento návod ukazuje postup, který funguje: od zadání přes projekt v ColdHost AI až po nasazení na vlastní VPS. Jako příklad použijeme jednoduchý statický web malé firmy.

1. Sepište zadání

Než napíšete první zprávu, ujasněte si:

• Účel – prezentace firmy, portfolio, landing page produktu.
• Stránky – úvod, služby, ceník, kontakt.
• Obsah – texty (nebo aspoň body), kontakty, otevírací doba.
• Vzhled – barvy, styl, reference na weby, které se vám líbí.
• Technologie – čisté HTML/CSS, statický generátor, nebo framework.

Pro jednoduchý web doporučujeme čisté HTML, CSS a minimum JavaScriptu. Je rychlý, bezpečný a hostovat ho jde kdekoliv.

Příklad zadání:

Vytvoř statický web pro truhlářskou dílnu "Dřevo Novák".
Stránky: index.html (úvod + služby), galerie.html, kontakt.html.
Styl: přírodní, teplé barvy (dřevo, krémová, tmavě zelená), hodně bílého místa.
Technologie: HTML5, jeden soubor css/style.css, bez frameworků.
Responzivní (mobil first), přístupné (alt texty, kontrast), sdílená hlavička a patička.
Kontaktní údaje: Pražská 12, Brno, tel. +420 600 000 000.

2. Založte projekt

Pro web s více soubory použijte projekt, ne obyčejný chat. AI v něm vytváří a upravuje soubory přímo a vy máte vše pohromadě. Vložte zadání a nechte AI vytvořit základní strukturu:

index.html
galerie.html
kontakt.html
css/style.css
js/main.js
img/

3. Postupujte po krocích

Neřešte všechno najednou. Osvědčené pořadí:

1. Kostra a navigace – všechny stránky s hlavičkou a patičkou.
2. Styly – barvy, typografie, rozvržení (CSS proměnné pro barvy usnadní pozdější změny).
3. Obsah stránek – jedna stránka po druhé.
4. Responzivita – kontrola na mobilu, menu.
5. Detaily – favicon, meta popisy, Open Graph, robots.txt, sitemap.xml.

Každý krok zadávejte samostatně a konkrétně: „Na stránce kontakt.html přidej mapu přes iframe pod adresu a formulář vyměň za odkaz mailto.“ AI upraví jen dotčené části souborů.

Ilustrační obrázky můžete vytvořit generováním obrázků přímo v ColdHost AI; fotky skutečných výrobků ale vždy použijte reálné.

4. Kontrolujte průběžně

Stáhněte projekt jako ZIP a otevřete ho lokálně. Nejjednodušší lokální server:

cd web
python3 -m http.server 8000

Pak otevřete http://localhost:8000. Kontrolujte:

• v prohlížeči režim mobilního zobrazení (F12 → přepnutí zařízení),
• Lighthouse v Chrome DevTools (výkon, přístupnost, SEO),
• validitu HTML přes validator.w3.org.

Nalezené problémy pošlete zpět AI: „Lighthouse hlásí nízký kontrast u tlačítek v patičce, oprav to.“

5. Verzování přes GitHub

Pokud máte propojený GitHub, pošlete projekt jako novou větev nebo pull request. Získáte historii změn a snadné nasazování přes git pull na serveru.

6. Nasazení na VPS

Na serveru s nginx stačí jednoduchá konfigurace. Soubor /etc/nginx/sites-available/drevo-novak:

server {
    listen 80;
    server_name drevonovak.cz www.drevonovak.cz;
    root /var/www/drevo-novak;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~* \.(css|js|webp|png|jpg|svg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
}

Aktivace a HTTPS přes Let’s Encrypt:

sudo ln -s /etc/nginx/sites-available/drevo-novak /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d drevonovak.cz -d www.drevonovak.cz

Pokud máte server připojený v ColdHost AI, může vás nasazením provést AI – v režimu Server a DevOps navrhne příkazy a vy je jeden po druhém schválíte. Repozitář na server naklonujete přímo přes funkci git na VPS.

7. Po spuštění

• Zaregistrujte web v Google Search Console a odešlete sitemap.xml.
• Nastavte zálohy (stačí git a záloha konfigurace nginx).
• Změny dělejte v projektu, pushněte na GitHub a na serveru jen git pull.

Nejčastější chyby

Chyba	Jak se jí vyhnout
Vágní zadání	popsat stránky, obsah, styl a technologii
Všechno v jedné zprávě	postupovat po krocích
Žádná kontrola	průběžně testovat lokálně a v Lighthouse
Vymyšlený obsah	dodat reálné texty, kontakty a fotky

Zbytečně složitá technologie je častá chyba – pro firemní web s pěti stránkami nepotřebujete React ani databázi.