23. diel - Nahranie webu na internet - Webhosting, doména, FTP klient

V predchádzajúcom cvičení, Riešené úlohy k 19.-22. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V dnešnom HTML/CSS tutoriále pre svoje hotové webové stránky zaregistrujeme webhosting, doménu a potom ich konečne nahráme na internet

Svoju českú doménu (.cz) si môžete kúpiť od spoločnosti cz.nic (resp. vám nákup sprostredukuje daný webhosting) a stojí asi 250 Sk na rok. Ide teda v rámci kurzu samozrejme o dobrovoľný krok. Pokiaľ chcete v IT pracovať, odporúčame mať nejaké svoje stránky, ktoré môžete budúcim zamestnávateľom ukázať. Pokiaľ vlastný web nechcete, nemusíte si ju kupovať a celú túto lekciu môžete preskočiť.

Registrácia webhostingu a domény

Webhosting je priestor na vzdialenom serveri, kam môžeme nahrať naše stránky. Doména je potom adresa, cez ktorú budú naše stránky z internetu prístupné. Webhosting aj doména pre jednoduché stránky ako tie naše sú veľmi lacná záležitosť, obvykle sa pohybujú v rádoch desiatok korún mesačne.

Existujú aj tzv. freehostingy, ktoré sú zadarmo a prístupné cez doménu tretieho rádu. Sú ale pomerne nespoľahlivé, do stránok nám vloží reklamu, doména je škaredá a neobsahujú množstvo služieb, ktoré by nám mohli chýbať. Pokiaľ sa chceme v oblasti webov rozvíjať a učiť, určite zvoľme platený hosting.

Výber webhostingu

Zo slovenských hostingov máme dobré skúsenosti s Websupport. Má kvalitnú podporu, dáta zálohuje a má prepracovanú administráciu, kde si môžeme nastaviť množstvo funkcií a vyskúšať si zaujímavé technológie. Preto sme aj pre kurz zvolili práve Websupport.

Prejdeme na web https://www.websupport.cz av navigačnom menu zvolíme Webhosting. Nižšie na stránke si vyberieme možnosť Preskúmať hosting:

Na ďalšej stránke si vyberieme z ponuky webhostingu:

Nám bude stačiť najnižší variant Simple, ktorý podporuje aj PHP a umožní nám tak do webu neskôr pridávať dynamické prvky, ako diskusie a podobne. Po kliknutí na Objednať prejdeme do košíka, kde vidíme objednanú službu, dĺžku trvania a cenu služby:

Teraz nebudeme klikať na tlačidlo "Pokračovať v objednávke", ale pridáme si k objednávke aj doménu.

Pokiaľ už nejakú doménu máte alebo si ju kúpite zvlášť (možno tiež na webe websupport), je možné si potom webhosting len zadarmo na 14 dní vyskúšať. Túto možnosť zvolíte medzi platobnými údajmi a takto uzavriete a odošlete objednávku. (Objednávka hostingu s doménou túto možnosť neponúka.)

Výber domény

Prejdeme myšou po hornom menu na záložku Domény a ihneď sa nám otvorí submenu, kde zvolíme Registrácia domény. Teraz si vymyslite adresu pre svoj nový web. Odporúčame voliť čo najkratšiu doménu bez pomlčiek as koncovkou .cz, pre osobné portfólio napr. z vášho priezviska. Stlačíme ikonu lupiny a hneď vidíme, či je daná doména voľná a nižšie vidíme aj ktoré ďalšie koncovky (.sk, .com, .eu, ...) sú pre danú adresu voľné:

Doménu vložíme do košíka kliknutím na tlačidlo Kúpiť. Teraz môžeme pokračovať voľbou Pokračovať do košíka.

Domény sa spravidla kupujú na jeden rok a po roku je potrebné ich predĺžiť, inak o ne môžete prísť. Pri nepredĺžení webhostingu "len" prídete o dáta na webovom priestore. Nepredĺžené domény sú však väčší problém, pretože ich často rýchlo nájdu roboti a následne ich skúpia špekulanti. Tú istú doménu teda už nemusí ísť na rozdiel od webhostingu znova kúpiť.

Rekapitulácia a platba

V košíku teraz vidíme rekapituláciu objednávky:

V ďalšom kroku formulára po kliknutí na Pokračovať v objednávke sa nám otvorí okno pre prihlásenie či novú registráciu:

V našom prípade budeme vytvárať novú registráciu, preto klineme na Vytvoriť nový účet. Tu vyplníme potrebné údaje a potvrdíme súhlasy s obchodnými podmienkami a poskytnutím údajov tretej strane (ide o poskytnutie údajov potrebným registrátorom domény či SSL certifikátu, môžeme si tu k tomuto prečítať Viac informácií):

Nasleduje voľba fakturačného profilu, ktorý si môžeme prípadne upraviť a výber platobnej metódy.

Toto zhrnutie potvrdíme klikom na Pokračujte na zhrnutie. Ďalej sa dostaneme na Súhrn objednávky, kde odsúhlasíme zaškrtnutím checkboxu obchodné podmienky a klikneme na Dokončiť objednávku. Objednávka sa potom odošle.

Administrácia

Akonáhle prebehne vyplnenie údajov, systém nás už počas nákupu prihlási do administrácie. Tú nájdeme v pravom hornom rohu:

Tu si potom po kliknutí na služby môžeme zobraziť všetky služby s potrebnými údajmi. Nájdeme tu aj svoje faktúry aj ďalšie kontakty a podporu:

Priestor na internete máme, hurá naň web nahrať!

Nahranie webu na webhosting

Na nahrávanie súborov na vzdialený počítač sa používa protokol FTP (File Transfer Protocol), presnejšie teda jeho zabezpečený variant SFTP. Aby sme cez FTP na webhosting niečo nahrali, potrebujeme FTP klienta. To je program, ktorý nám umožní spravovať naše súbory na serveri. Možno na to využiť buď webovú aplikáciu alebo desktopového FTP klienta. Využijeme druhý variant, pretože je pre prácu so súbormi praktickejší.

FTP klient

Ukážeme si prácu s programom FileZilla. Z webu https://filezilla-project.org/ stiahneme FileZilla client (stačí základná verzia) a nainštalujeme.

Nikdy nenahrávajte obsah na FTP cez Prieskumníka Windows alebo cez Total Commander! Tieto nástroje neprevádzajú kódovanie zdrojových súborov (binary/ASCII) a tiež horšie zvládajú výpadky.

FTP účet

Na nadviazanie prenosu súborov s naším webom potrebujeme poznať meno a heslo k FTP účtu webu. Pred prvým prihlásením do FTP je potrebné si FTP účet vytvoriť. Údaje môžeme vytvoriť priamo z administrácie a poslať ich na konkrétny email. V sekcii Služby vyhľadáme svoju doménu a klikneme na ňu. Ďalej klikneme v ľavom menu na FTP účty a vpravo hore klikneme na tlačidlo Vytvoriť nový FTP účet:

Keď potom niekedy neskôr potrebujeme znovu zistiť naše údaje, tak v sekcii Služby klineme na svoju doménu. Ďalej potom zvolíme v ľavom menu FTP účty a potom klikneme na názov loginu a následne sa nám zobrazia všetky prihlasovacie údaje a taktiež možnosť úpravy nastavenia alebo zmeny hesla.

Pripojenie na FTP cez FileZilla

Teraz pristúpime k práci s FileZillou. Program spustíme av hornej časti obrazovky, hneď pod ikonkami, vidíme pole na vyplnenie našich údajov:

Pole Hostiteľ je nutné vyplniť vo formáte sftp://ftp.xxxxx.yy, v našom príklade teda sftp://ftp.honzadeveloper.cz. Ďalej vyplníme údaje z administrácie Websupport a klikneme na Rýchle pripojenie.

V tejto chvíli sa nás FileZilla dialógovým oknom opýta, či dôverujeme danému hostiteľovi a má nás pripojiť. Pred kliknutím na OK ešte zatrhneme možnosť "Vždy dôverovať..." a FileZilla si zapamätá tento kľúč a nabudúce sa už pýtať nebude. Potvrdíme teda OK. A sme prihlásení.

Pripojovacie údaje si neskôr môžeme vo FileZille uložiť cez Site manager, aby sme ich nemuseli vyplňovať zakaždým znova. Pokiaľ sa pripojenie nepodarí, je možné, že sa nám zmenila IP adresa a že ju je nutné znovu pridať do administrácie Websupport.

Nahranie súborov

Okno programu je teraz rozdelené do 2 častí:

• Vľavo vidíme súbory v našom počítači,
• vpravo potom priestor na našom hostingu.

V hornej časti okna môžeme sledovať všetky kroky FileZilly, ktoré práve robí a ich históriu.

Následne otvoríme v pravom okne pripojeného hostingu zložku public_html/. Ak je v nej nejaký obsah, tak ho odstránime. V ľavom okne si otvoríme obsah zložky s naším webom. Teraz jednoducho myšou pretiahneme všetky súbory webu z ľavého okna do pravého okna. Je potrebné, aby sa vaša hlavná stránka volala index.html. Výsledok po nahratí na server vyzerá vo FileZille takto:

Gratulujem vám, máte teraz pekný a moderný web na kvalitnom webhostingu! Vyťukajte do prehliadača adresu a vyskúšajte si ho!

Kam ďalej

Náš web teraz vyzerá pekne, nie je však prispôsobený na malé obrazovky mobilných zariadení. O tom pojednávajú nadväzujúce kurzy:

• Responzívny webdesign a
• Bootstrap

Pokiaľ sa chcete viac sústrediť na backend, môžete sa zatiaľ uspokojiť len s týmito základmi HTML a prejsť už na webové kurzy najrôznejších programovacích jazykov.

Kompletný web máte opäť v prílohe a ja sa na vás teším pri ďalších kurzoch na ITnetwork 🙂

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.