Lekce 23 - Nahrání webu na internet - Webhosting, doména, FTP klient

V předešlém cvičení, Řešené úlohy k 19.-22. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

V dnešním HTML/CSS tutoriálu pro své hotové webové stránky zaregistrujeme webhosting, doménu a pak je konečně nahrajeme na internet

Svou českou doménu (.cz) si můžete koupit od společnosti cz.nic (resp. vám nákup zprostředukuje daný webhosting) a stojí asi 250 Kč na rok. Jedná se tedy v rámci kurzu samozřejmě o dobrovolný krok. Pokud chcete v IT pracovat, doporučujeme mít nějaké své stránky, které můžete budoucím zaměstnavatelům ukázat. Pokud vlastní web nechcete, nemusíte si ji pořizovat a celou tuto lekci můžete přeskočit.

Registrace webhostingu a domény

Webhosting je prostor na vzdáleném serveru, kam můžeme nahrát naše stránky. Doména je pak adresa, přes kterou budou naše stránky z internetu přístupné. Webhosting i doména pro jednoduché stránky jako ty naše jsou velmi levná záležitost, obvykle se pohybují v řádech desítek korun měsíčně.

Existují i tzv. freehostingy, které jsou zadarmo a přístupné přes doménu třetího řádu. Jsou ale poměrně nespolehlivé, do stránek nám vloží reklamu, doména je ošklivá a neobsahují spoustu služeb, které by nám mohly chybět. Pokud se chceme v oblasti webů rozvíjet a učit, určitě zvolme placený hosting.

Výběr webhostingu

Z českých hostingů máme dobré zkušenosti s Websupport. Má kvalitní podporu, data zálohuje a má propracovanou administraci, kde si můžeme nastavit spoustu funkcí a vyzkoušet si zajímavé technologie. Proto jsme i pro kurz zvolili právě Websupport.

Přejdeme na web https://www.websupport.cz a v navigačním menu zvolíme Webhosting. Níže na stránce si vybereme možnost Prozkoumat hosting:

Na další stránce si vybereme z nabídky webhostingu:

Nám bude stačit nejnižší varianta Simple, která podporuje i PHP a umožní nám tak do webu později přidávat dynamické prvky, jako diskuze a podobně. Po kliknutí na Objednat přejdeme do košíku, kde vidíme objednanou službu, délku trvání a cenu služby:

Nyní nebudeme klikat na tlačítko "Pokračovat v objednávce", ale přidáme si k objednávce i doménu.

Pokud již nějakou doménu máte nebo si ji koupíte zvlášť (lze také na webu websupport), je možné si pak webhosting jen zdarma na 14 dní vyzkoušet­. Tuto možnost zvolíte mezi platebními údaji a takto uzavřete a odešlete objednávku. (Objednávka hostingu s doménou tuto možnost nenabízí.)

Výběr domény

Přejedeme myší po horním menu na záložku Domény a ihned se nám otevře submenu, kde zvolíme Registrace domény. Nyní si vymyslete adresu pro svůj nový web. Doporučujeme volit co nejkratší doménu bez pomlček a s koncovkou .cz, pro osobní portfolio např. z vašeho příjmení. Stiskneme ikonu lupy a hned vidíme, zda je daná doména volná a níže vidíme i které další koncovky (.cz, .com, .eu, ...) jsou pro danou adresu volné:

Doménu vložíme do košíku kliknutím na tlačítko Koupit. Nyní můžeme pokračovat volbou Pokračovat do košíku.

Domény se zpravidla kupují na jeden rok a po roce je potřeba je prodloužit, jinak o ně můžete přijít. Při neprodloužení webhostingu "jen" přijdete o data na webovém prostoru. Neprodloužené domény jsou však větší problém, protože je často rychle najdou roboti a následně je skoupí spekulanti. Tu samou doménu tedy již nemusí jít na rozdíl od webhostingu znovu koupit.

Rekapitulace a platba

V košíku nyní vidíme rekapitulaci objednávky:

V dalším kroku formuláře po kliknutí na Pokračovat v objednávce se nám otevře okno pro přihlášení či novou registraci:

V našem případě budeme vytvářet novou registraci, proto klikneme na Vytvořit nový účet. Zde vyplníme potřebné údaje a potvrdíme souhlasy s obchodními podmínkami a poskytnutím údajů třetí straně (jde o poskytnutí údajů potřebným registrátorům domény či SSL certifikátu, můžeme si zde k tomuto přečíst Více informací):

Následuje volba fakturačního profilu, který si můžeme případně upravit a výběr platební metody.

Toto shrnutí potvrdíme klikem na Pokračujte na shrnutí. Dále se dostaneme na Souhrn objednávky, kde odsouhlasíme zaškrtnutím checkboxu obchodní podmínky a klikneme na Dokončit objednávku. Objednávka se pak odešle.

Administrace

Jakmile proběhne vyplnění údajů, systém nás již během nákupu přihlásí do administrace. Tu najdeme v pravém horním rohu:

Zde si pak po kliknutí na služby můžeme zobrazit všechny služby s potřebnými údaji. Najdeme zde také své faktury i další kontakty a podporu:

Prostor na internetu máme, hurá na něj web nahrát!

Nahrání webu na webhosting

K nahrávání souborů na vzdálený počítač se používá protokol FTP (File Transfer Protocol), přesněji tedy jeho zabezpečená varianta SFTP. Abychom přes FTP na webhosting něco nahráli, potřebujeme FTP klienta. To je program, který nám umožní spravovat naše soubory na serveru. Lze k tomu využít buď webovou aplikaci nebo desktopového FTP klienta. Využijeme druhou variantu, jelikož je pro práci se soubory praktičtější.

FTP klient

Ukážeme si práci s programem FileZilla. Z webu https://filezilla-project.org/ stáhneme FileZilla client (stačí základní verze) a nainstalujeme.

Nikdy nenahrávejte obsah na FTP přes Průzkumníka Windows nebo přes Total Commander! Tyto nástroje nepřevádí kódování zdrojových souborů (binary/ASCII) a také hůře zvládají výpadky.

FTP účet

K navázání přenosu souborů s naším webem potřebujeme znát jméno a heslo k FTP účtu webu. Před prvním přihlášením do FTP je třeba si FTP účet vytvořit. Údaje můžeme vytvořit přímo z administrace a poslat je na konkrétní email. V sekci Služby vyhledáme svou doménu a klikneme na ni. Dále klikneme v levém menu na FTP účty a vpravo nahoře klikneme na tlačítko Vytvořit nový FTP účet:

Když pak někdy později potřebujeme znovu zjistit naše údaje, tak v sekci Služby klikneme na svou doménu. Dále pak zvolíme v levém menu FTP účty a pak klikneme na název loginu a následně se nám zobrazí všechny přihlašovací údaje a taktéž možnost úpravy nastavení anebo změny hesla.

Připojení na FTP přes FileZilla

Nyní přistoupíme k práci s FileZillou. Program spustíme a v horní části obrazovky, hned pod ikonkami, vidíme pole pro vyplnění našich údajů:

Pole Hostitel je nutné vyplnit ve formátu sftp://ftp.xxxxx.yy, v našem příkladu tedy sftp://ftp.honzadeveloper.cz. Dále vyplníme údaje z administrace Websupport a klikneme na Rychlé připojení.

V tuto chvíli se nás FileZilla dialogovým oknem zeptá, zda důvěřujeme danému hostiteli a má nás připojit. Před kliknutím na OK ještě zatrhneme možnost "Vždy důvěřovat..." a FileZilla si zapamatuje tento klíč a příště se již ptát nebude. Potvrdíme tedy OK. A jsme přihlášení.

Připojovací údaje si později můžeme ve FileZille uložit přes Site manager, abychom je nemuseli vyplňovat pokaždé znovu. Pokud se připojení nezdaří, je možné, že se nám změnila IP adresa a že ji je nutné znovu přidat do administrace Websupport.

Nahrání souborů

Okno programu je nyní rozděleno do 2 částí:

• Vlevo vidíme soubory v našem počítači,
• vpravo pak prostor na našem hostingu.

V horní části okna můžeme sledovat všechny kroky FileZilly, které právě dělá a jejich historii.

Následně otevřeme v pravém okně připojeného hostingu složku public_html/. Pokud je v ní nějaký obsah, tak ho odstraníme. V levém okně si otevřeme obsah složky s naším webem. Nyní jednoduše myší přetáhneme všechny soubory webu z levého okna do pravého okna. Je třeba, aby se vaše hlavní stránka jmenovala index.html. Výsledek po nahrání na server vypadá ve FileZille takto:

Gratuluji vám, máte nyní pěkný a moderní web na kvalitním webhostingu! Vyťukejte do prohlížeče adresu a vyzkoušejte si ho!

Kam dál

Náš web nyní vypadá pěkně, není ovšem přizpůsobený na malé obrazovky mobilních zařízení. O tom pojednávají navazující kurzy:

• Responzivní webdesign a
• Bootstrap.

Pokud se chcete více soustředit na backend, můžete se zatím spokojit jen s těmito základy HTML a přejít již na webové kurzy nejrůznějších programovacích jazyků.

Kompletní web máte opět v příloze a já se na vás těším u dalších kurzů na ITnetwork 🙂

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.