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

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

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

Nákup domény (.com) vám sprostredkuje daný webhosting a stojí asi 15€ na rok. Ide teda v rámci kurzu samozrejme o dobrovoľný krok. Ak chcete v IT pracovať, odporúčame mať nejaké svoje stránky, ktoré môžete budúcim zamestnávateľom ukázať. Ak vlastný web nechcete, nemusíte si doménu 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ť, ktorá stojí pár eur 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žia reklamu, doména je škaredá a neobsahujú množstvo služieb, ktoré by nám mohli chýbať. Ak sa chceme v oblasti webov rozvíjať a učiť, určite zvoľme platený hosting.

Výber webhostingu

Z medzinárodných hostingov môžeme odporučiť Hostinger. 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 Hostinger.

Prejdeme na web www.hostinger.com a v navigačnom menu zvolíme Hosting > Web hosting:

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

Nám bude stačiť najnižší variant Premium, 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 Choose Plan prejdeme k podrobnostiam objednávky, kde vidíme objednanú službu a vyberieme dĺžku trvania:

Teraz si vytvoríme účet:

Ďalej vidíme prehľad ceny služby a výber spôsobu platby pre zaplatenie objednávky:

V tomto okamihu sa dostávame k správe nášho webhostingu, ktorý nastavíme:

Preskočíme výber spôsobu vytvorenia stránky a ďalších údajov:

Výber domény

Teraz vybavíme doménu. Klikneme na Claim domain:

Teraz si vymyslite adresu pre svoj nový web. Odporúčame voliť čo najkratšiu doménu bez pomlčiek s koncovkou .com, pre osobné portfólio napr. z vášho priezviska. Následne skontrolujeme dostupnosť nami zvolenej domény pomocou tlačidla Check availibility:

V súčasnosti je mnoho domén (.com) už obsadených, a tak môžete zvoliť aj inú, pre osobné portoflio napríklad .me.

Keď je doména voľná, môžeme ju potvrdiť tlačidlom Claim domain:

V ďalšom kroku vyplníme kontaktné údaje potrebné na registráciu domény.

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ť.

Administrácia

Naše administračné rozhranie vyzerá takto:

Tu si môžeme zobraziť všetky služby s potrebnými údajmi. Priestor na internete máme, hurá na nahranie webu!

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ť IP adresu, názov a heslo k FTP účtu webu. Na karte Websites nájdeme priečinok Files a v ňom vidíme FTP Accounts, kde nájdeme prihlasovacie údaje k účtu FTP:

Heslo k účtu FTP nám bude zaslané e-mailom. Ak sa tak nestalo, kliknite na Change FTP password a nastavte nové heslo.

Pripojenie na FTP cez FileZilla

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

Do poľa Host dáme FTP IP, do poľa Username dáme FTP Username, vyplníme heslo a do poľa Port dáme FTP Port a klikneme na tlačidlo Quickconnect.

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ť Always trust this certificate in future session. 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í, znovu skontrolujeme prihlasovacie údaje v administrácii Hostinger.

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 vykonáva a tiež ich históriu.

Následne otvoríme v pravom okne pripojeného hostingu priečinok public_html/. Ak je v ňom nejaký obsah, tak ho odstránime. V ľavom okne si otvoríme obsah priečinka 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.

Ak 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š.