Jak vytvořit webové stránky zdarma s vlastní doménou
Zřízení webové stránky představuje značnou investici, neboť s každým krokem její tvorby se pojí výdaje.
Chtěli byste si založit webové stránky zdarma, ať už pro osobní rozvoj, či profesní účely? Ukážeme vám, jak navrhnout svůj budoucí web s individuálním názvem domény, doživotním hostingem zdarma a zabezpečením SSL, a to vše zcela bez poplatků. To zní skvěle, že? Co víc si přát?
Není pochyb o tom, že webové stránky významně posilují růst a v dnešní době představují spíše investici než pouhý luxus. Neplatí to pouze pro firmy, ale i jednotlivci mohou z osobní webové prezentace mít značný užitek.
Ať už se jedná o registraci doménového jména, hostování obsahu, tvorbu webu nebo aktivaci šifrování SSL, je nutné počítat s nemalými výdaji. Některé z těchto nákladů se navíc pravidelně opakují a neustále vás zatěžují.
Co kdybych vám ale řekl, že je možné vytvořit web zcela zdarma, přičemž všechny zmíněné kroky, které jsou pro vznik webu nezbytné, také provedete bezplatně? Ač to může znít nereálně, pro studenty je toto vše dostupné zcela zdarma.
Pokud je vám známý GitHub, pravděpodobně víte i o GitHub Pages. Tato služba, jež je součástí každého účtu na GitHubu, je k dispozici zcela zdarma. GitHub Pages každému uživateli umožňuje vytvořit a hostovat web, avšak s jedním významným omezením. Doménové názvy takto vzniklých webů končí příponou github.io, což působí neprofesionálně.
Co je GitHub Student Developer Pack?
Webová stránka s takovou doménou nepůsobí důvěryhodně a zbytečně dlouhý název domény není zrovna ideální. Nicméně, nejsme zde od toho, abychom rozebírali výhody a nevýhody GitHub Pages. Slíbil jsem, že vám ukážu, jak si vytvořit web zdarma s vlastním názvem domény, a teď vám ukážu jak na to.
GitHub nabízí studentům zapsaným do jakéhokoliv studijního programu skvělou možnost využít výhodný balíček online nástrojů s názvem GitHub Student Developer Pack. Tento balíček zahrnuje profesionální předplatné a slevy na oblíbené nástroje jako Canva, Namecheap, Microsoft Azure, Discord, Name.com a StreamYard, a to je jen zlomek z nabídky.
V tomto článku se budeme věnovat využití Namecheap pro registraci bezplatné vlastní domény a GitHub Pages pro hostování webu. Dále si ukážeme, jak navrhnout a nahrát HTML, CSS a JavaScript soubory na GitHub Pages. Postupně také aktivujeme šifrování SSL. Nejprve je však třeba se do Student Developer Packu zaregistrovat.
Jak zažádat o GitHub Student Developer Pack?
Registrace do Student Developer Packu vyžaduje získání studentského e-mailu od vaší univerzity. Studentský e-mail obvykle končí doménou vaší univerzity, například [email protected] Existují i jiné způsoby registrace, ale ověření trvá mnohem déle než při použití studentského e-mailu. Pokud máte studentský e-mail, můžete se do balíčku zaregistrovat následovně:
Krok 1: Navštivte GitHub Education a klikněte na možnost Přihlásit se.
Pokud již balíček máte, můžete se přihlásit svými údaji. V opačném případě postupujte podle kroků níže.
V okně Přihlášení klikněte na možnost Vytvořit účet.
Krok 2: Zaregistrujte se pomocí studentského e-mailu a vytvořte si účet.
Krok 3: Na otázku „Jak nejlépe popsat váš akademický status?“ vyberte možnost Student.
Krok 4: Vyplňte požadované údaje o vaší škole a účelu používání GitHubu.
Krok 5: Nakonec odešlete svou žádost kliknutím na „Odeslat vaše informace“.
Pokud GitHub vaši žádost schválí, obdržíte potvrzovací e-mail týkající se balíčku pro vývojáře. Proces obvykle trvá několik dní, ale v období zvýšeného zájmu může trvat i déle.
Jak zažádat o GitHub Student Developer Pack bez studentského e-mailu?
GitHub nabízí možnost zažádat o balíček i bez studentského e-mailu, a to s použitím platného studentského průkazu nebo jiného dokladu o studiu. Nevýhodou je však delší čekací doba a vyšší pravděpodobnost zamítnutí. Přesto můžete o studentský balíček požádat i tímto způsobem:
Krok 1: Vytvořte si účet pomocí svého osobního e-mailu podle výše uvedených kroků.
Krok 2: Nahrajte doklad o studiu pomocí fotoaparátu nebo přímo nahráním fotografie na GitHub pomocí tlačítka Nahrát.
Krok 3: Vyplňte všechny potřebné údaje, jako je název školy a účel používání GitHubu.
Krok 4: Odešlete žádost.
Jak zaregistrovat vlastní doménu pomocí Namecheap?
Předpokládám, že váš účet GitHub Education je již aktivní. Následující kroky se zaměří na registraci bezplatné vlastní domény prostřednictvím Namecheap a její hostování na GitHub Pages. Pro registraci zvoleného doménového jména postupujte takto:
Krok 1: Přihlaste se ke svému účtu GitHub Education a přejděte do sekce Výhody.
Měli byste vidět Web Dev Kit a Virtual Event Kit.
Krok 2: Přejděte do Virtual Event Kit a najděte Namecheap.
GitHub nabízí roční registraci domény s TLD .me. Kliknutím na možnost Získat přístup získáte přístup k registraci.
Krok 3: V následujícím okně budete vyzváni k autorizaci připojení Namecheap k vašemu účtu GitHub. Autorizujte Namecheap a pokračujte dalším krokem.
Po úspěšné autorizaci by se měla zobrazit zpráva: „Váš studentský balíček byl úspěšně ověřen pomocí GitHubu“.
Krok 4: Vyhledejte preferovanou doménu pomocí vyhledávacího pole a klikněte na Najít.
Na další stránce byste měli vidět, zda je doména k dispozici. Pokud je vámi vybrané doménové jméno dostupné, můžete pokračovat v bezplatném nákupu.
Krok 5: Proveďte platbu s použitím e-mailové adresy GitHub Education a během procesu vyberte jako metodu hostování GitHub Pages.
Po úspěšné registraci vlastní domény a zvolení GitHub Pages jako hostitele by měl Namecheap automaticky vytvořit repozitář ve vašem účtu GitHub. Tento repozitář je zcela prázdný a obsahuje pouze soubor README.md.
Do tohoto repozitáře se dostanete přihlášením k účtu GitHub a kliknutím na „Vaše repozitáře“. GitHub Pages neposkytuje vizuální nástroje ani předpřipravená témata pro váš web; musíte celý web sami nakódovat a nahrát všechny související soubory do nově vytvořeného repozitáře na GitHubu.
Jak vytvořit web zdarma a hostovat jej na GitHub Pages?
Jak již bylo zmíněno, budete si muset sami vytvořit veškeré HTML, CSS a JavaScript soubory spojené s webem. Pokud se věnujete webovému vývoji a máte zkušenosti s kódováním, můžete soubory nahrát do repozitáře na GitHubu a spustit svůj web. V tom případě můžete přeskočit k sekci, která pojednává o nahrávání kódu na GitHub Pages.
Pokud však nemáte o webovém vývoji mnoho informací, máme pro vás řešení. Můžete postupovat podle níže uvedených kroků a navrhnout si vlastní web s použitím základního HTML:
Krok 1: Navštivte HTML5 UP a vyberte si webový design, který se vám líbí. Můžete si vybrat jakýkoliv předem připravený motiv z jakékoliv platformy. Já jsem zvolil „Massively“ z HTML5 UP, ale vy si můžete zdarma stáhnout a upravit libovolný design dle svého gusta.
Krok 2: Rozbalte stažený ZIP soubor s vybraným designem webu.
V rozbalené složce byste měli najít soubory index.html a generic.html a složky jako assets a images.
Krok 3: Otevřete rozbalené soubory v editoru Visual Studio Code a vyberte soubor index.html.
Krok 4: Pokud ještě nemáte, stáhněte a nainstalujte si rozšíření „Live Server“ ve Visual Studio Code.
Krok 5: Vyberte soubor index.html, klikněte pravým tlačítkem myši a vyberte možnost „Open with Live Server“. Tato možnost vám umožní sledovat změny v HTML souboru v prohlížeči v reálném čase.
Jak upravit design webu?
Nebudu nazývat úpravu webu následujícími „kroky“. Úprava HTML souborů záleží zcela na vašich preferencích, ale zde vám ukážu, jak jsem upravil design „Massively“ z HTML5 UP a převedl ho na portfolio. Můžete se inspirovat zde, nebo si vytvořit vlastní web. Volba je na vás!
Úprava tagů Nadpis a Odstavec
Úvodem jsem změnil tag nadpisu „Massively“. Tag title HTML souboru určuje jeho název při otevření v kartě prohlížeče. Výchozí název pro Massively je „Massively by HTML5 UP“ a doporučuji ho změnit na něco, co se vztahuje k vašemu webu.
Název nadpisu jsem změnil na „Samyak Goswami | Tech Content Writer“, protože se to ideálně hodilo k mému portfoliu. Dále jsem upravil úvodní text na webu, který zněl „This is Massively“ (obsažený v tagu H1) a logicky jsem ho změnil na „Samyak’s Portfolio“. Následně jsem změnil text pod ním v tagu odstavce na „Showcasing my projects and my abilities“.
Při úpravě sekce Navigace (Nav) v souboru index jsem vynechal dvě ze tří navigačních tlačítek obsažených v tagu Seznam. Chtěl jsem vytvořit jednostránkový web se všemi informacemi na jedné stránce, ale počet navigačních tlačítek si můžete upravit podle sebe.
Později jsem změnil text „This is Massively“ v navigačním tlačítku na „My Articles“.
Úprava odkazů a ikon sociálních médií
Na webu by se vám také měly zobrazit různé ikony sociálních médií, jako je Twitter, Facebook, Instagram a GitHub. Rozhodl jsem se vynechat Twitter a Facebook a ponechal jsem si Instagram a LinkedIn.
Ikony sociálních médií a odkazy na ně můžete upravit tak, že přejdete do sekce Navigace (Nav) a posunete se k seznamu tagů, kde jsou uvedeny ikony Twitteru, Instagramu a dalších.
Všimněte si, že k těmto ikonám nejsou přiřazeny žádné odkazy, protože tag href zůstal prázdný. Můžete k tagu href přidat odkazy, a to tak, že nahradíte symbol „#“ požadovaným odkazem.
Úprava obsahu domovské stránky
Nejprve jsem změnil tag H2 na „My name is Samyak Goswami“ a následně jsem změnil tag odstavce na „I am a tech enthusiast…“. Doporučuji vám změnit tag H2 na něco, co odpovídá obsahu vaší domovské stránky, a tag odstavce, který to vysvětlí.
Nyní se dostáváme k nejdůležitější části této úpravy; úpravě obsahu dlaždic článků.
Provedete to tak, že přejdete do sekce Příspěvky v souboru index a tam najdete několik úryvků kódu obsažených v tazi Article. Odkazy na své články můžete přidat úpravou sekce href, stejně jako jsme to dělali u odkazů na ikony sociálních médií.
Později můžete změnit název článků úpravou obsahu v tagu H2. Můžete přidat i popis k jednotlivým článkům pomocí tagu odstavce.
Tento postup opakujte u všech článků, přidejte odkazy, změňte názvy a popisy.
Přidávání obrázků na webové stránky
Jistě jste si všimli, že náhled vypadá odlišně od obrázků na webu HTML5 UP. Je to z důvodu použitých fotografií v upravitelném souboru. Pojďme si web vylepšit přidáním vlastních obrázků.
Původní obrázky
Chcete-li to provést, přejděte do složky, kam jste dříve rozbalili soubor ZIP „Massively“. Otevřete rozbalenou složku a přejděte do složky Images. Měli byste tam vidět obrázky s názvem bg, pic01, pic02 a tak dále. Tyto obrázky jsou spojené s našimi články v tagu Article.
Můžete buď přidat vlastní obrázky a upravit soubor index názvy těchto obrázků, nebo můžete přidat nové obrázky a pojmenovat je stejně jako původní. Stejné názvy obrázků nám ušetří spoustu času, který by bylo potřeba na úpravu kódu.
Upravené obrázky
Doporučuji vám zkontrolovat a upravit i další části vašeho webu. Tady je portfolio, které jsem vytvořil s použitím výše uvedených kroků: samyakgoswami.me.
Jak nahrát kód webu na GitHub Pages?
Poté, co je váš web navržen a nakódován, je čas nahrát jej na GitHub Pages a zpřístupnit ho na internetu.
Postup, jak nahrát web na GitHub Pages, je následující:
Krok 1: Přihlaste se ke svému účtu GitHub a přejděte do sekce Moje repozitáře.
Krok 2: Měli byste vidět repozitář s názvem your_username.github.io. Přejděte do tohoto repozitáře.
Krok 3: Měli byste vidět možnost vytvořit vlastní soubor nebo nahrát soubory do repozitáře na GitHubu.
Krok 4: Vyberte všech pět souborů a složek; assets, images, elements, generic a index a přetáhněte je do repozitáře.
Po nahrání souborů potvrďte kód a počkejte, až GitHub vaše soubory zpracuje.
Krok 5: Přejděte do Nastavení > GitHub Pages a zkontrolujte stav webu. Měla by se zobrazit zpráva „Your site is published at your_custom_domain”.
Nyní můžete navštívit svůj web a sami si ho prohlédnout. Mějte na paměti, že spuštění webu může nějakou dobu trvat.
Jak aktivovat SSL šifrování na GitHub Pages?
HTTP je nebezpečný způsob komunikace uživatelů s vaším webem. Kdokoli s nekalými úmysly a technickými znalostmi může odposlouchávat interakce mezi uživatelem a vaším webem. HTTPS na druhou stranu poskytuje všem návštěvníkům webu mnohem bezpečnější prohlížení. GitHub Pages nabízí bezplatné HTTPS šifrování a můžete ho aktivovat takto:
Přejděte do sekce Stránky v repozitáři.
V dolní části okna byste měli vidět možnost „Vynutit HTTPS“. SSL šifrování by se mělo aktivovat ihned po zaškrtnutí políčka „Vynutit HTTPS“.
Pokud by možnost „Vynutit HTTPS“ nebyla pro vaši doménu k dispozici, můžete SSL šifrování aktivovat následovně:
Krok 1: Přihlaste se ke svému účtu Namecheap a přejděte do sekce „Seznam domén“.
Krok 2: Přejděte na Spravovat doménu a následně do sekce „Advanced DNS“.
Měli byste vidět stávající záznamy CNAME a A.
Přidejte následující A záznamy s hostitelem „@“ a IP adresou „185.199.108.153“. Další záznam s hostitelem „@“ a IP adresou „185.199.109.153“.
Pokračujte, dokud nebudete mít 4 A záznamy s IP adresou „185.199.111.153“.
Odstraňte všechny předchozí A záznamy.
Krok 3: Dále přidejte CNAME záznam s hostitelem „www“ a hodnotou jako vaše uživatelské jméno GitHubu (tečka) github (tečka) io.
Odstraňte předchozí CNAME záznamy. Nakonec by vaše DNS nastavení měla obsahovat 4 A záznamy a 1 CNAME záznam.
Krok 4: Nyní přejděte na GitHub Pages v sekci Nastavení. Možnost Vynutit HTTPS by měla být nyní dostupná.
Shrnutí
GitHub dává každému studentovi skvělou příležitost vytvořit a spravovat webové stránky zdarma. Ačkoliv se GitHub Pages nehodí pro web s velkým provozem, pro menší statické weby je naprosto ideální. Bezplatná vlastní doména, hosting a SSL šifrování ho dělají ještě atraktivnějším.
Dále si můžete přečíst „Jak si vybrat webhosting pro váš nový web“.
Zde je několik nástrojů pro sledování rychlosti webu, které vás upozorní, pokud váš web nebude fungovat správně.