Vytvoření webové stránky je vážná investice; musíte platit za každý krok budování webu.
Chcete si zdarma vytvořit webové stránky pro osobní nebo profesní růst? Zde je způsob, jak navrhnout svůj další web s vlastním názvem domény, doživotním bezplatným hostingem a šifrováním SSL zcela zdarma. Páni! Co jiného si můžete přát?
Je samozřejmé, že mít webové stránky výrazně zvýší vaše čísla růstu a dnes je to spíše investice než luxus. To platí nejen pro podniky, ale i jednotlivci mohou mít z osobních webových stránek velký prospěch.
Ať už si registrujete název domény, hostujete obsah svých webových stránek, vytváříte webové stránky nebo povolíte šifrování SSL, měli byste být připraveni vyprázdnit si kapsy. Kromě bolesti se některé z těchto výdajů opakují a pokračují navždy.
Co kdybych vám řekl, že byste si mohli vytvořit bezplatnou webovou stránku a přitom provádět všechny výše uvedené zásadní kroky při vytváření webu zdarma? Jakkoli to může znít nadpozemsky, to vše můžete dělat zdarma, pokud jste student.
Pokud znáte GitHub, možná víte o GitHub Pages. Službu, která je součástí každého účtu GitHub, můžete používat zdarma. GitHub Pages umožňuje každému uživateli vytvořit si bezplatnou webovou stránku a hostit ji, ale je tu jedno velké upozornění. Názvy domén těchto bezplatných webů v podstatě končí na github.io, což ničí profesionalitu vašeho webu.
Table of Contents
Co je GitHub Student Developer Pack?
Méně uživatelů bude brát váš web vážně a mít zbytečně dlouhý název domény není nikdy dobrý nápad. Ale ouha! Nejsme zde, abychom mluvili o výhodách nebo upozorněních na stránkách GitHub. Slíbil jsem způsob, jak vám umožnit vytvořit bezplatnou webovou stránku s vlastním názvem domény, a zde je návod, jak to udělat.
GitHub nabízí šanci využít fantastickou sadu plnou praktických online nástrojů pro každého studenta zapsaného do studijního nebo diplomového kurzu, známého jako GitHub Student Developer Pack. Balíček obsahuje profesionální předplatné a neuvěřitelné slevy na oblíbené nástroje jako Canva, Namecheap, Microsoft Azure, Discord, Name.com a StreamYard, mezi miliony dalších.
V tomto článku použijeme Namecheap k registraci bezplatné vlastní domény a použijeme stránky GitHub k hostování našeho webu. Poté se podíváme na způsoby, jak navrhnout a nahrát soubory HTML, CSS a JavaScript na stránky GitHub. Časem povolíme i SSL šifrování pro web, ale v první řadě se musíme zaregistrovat do Student Developer Pack.
Jak požádat o GitHub Student Developer Pack?
Proces registrace do Student Developer Pack spočívá v získání e-mailové adresy studenta udělené univerzitou. E-mailová adresa studenta obvykle končí názvem domény vaší univerzity, např. [email protected] Existují i jiné způsoby registrace do balíčku, ale vyžadují mnohem delší dobu kontroly než použití studentského e-mailu. Pokud máte připravenou svou studentskou e-mailovou adresu, můžete se do balíčku zaregistrovat takto:
Krok 1: Přejděte na Vzdělávání na GitHubu a klikněte na možnost Přihlásit se.
Pokud balíček již máte, můžete se přihlásit pomocí svých přihlašovacích údajů. Jinak můžete postupovat podle kroků níže.
Klikněte na možnost Vytvořit účet v okně Přihlášení.
Krok 2: Dále se zaregistrujte pomocí studentského e-mailu a vytvořte si účet.
Krok 3: Když se zobrazí výzva „Který nejlépe popisuje váš akademický status?“, vyberte možnost Student.
Krok 4: Nyní vyplňte potřebná pole podrobnostmi o názvu vaší školy a účelu použití GitHubu.
Krok 5: Nakonec odešlete svou žádost pomocí možnosti „Odeslat vaše informace“.
Pokud vaši aplikaci schválí GitHub, měli byste obdržet potvrzovací e-mail týkající se vývojářského balíčku. Proces obvykle trvá několik dní, ale během špiček se může doba výrazně lišit.
Jak požádat o GitHub Student Developer Pack bez studentského e-mailu?
GitHub vám také dává možnost požádat o balíček pomocí platného studentského průkazu nebo jakéhokoli jiného dokladu o vašem akademickém stavu. Jedinými výhradami jsou dlouhá čekací doba a vyšší poměr odmítnutí. Každopádně o studentský balíček můžete požádat tímto způsobem:
Krok 1: Podle výše uvedených kroků si vytvořte účet prostřednictvím svého osobního e-mailu.
Krok 2: Nyní nahrajte doklad o svém akademickém stavu pomocí možnosti fotoaparátu nebo nahrajte fotografie přímo na GitHub pomocí tlačítka Nahrát.
Krok 3: Dále vyplňte všechny potřebné údaje, jako je název školy a účel použití GitHubu.
Krok 4: Odešlete žádost.
Jak zaregistrovat svou vlastní doménu pomocí Namecheap?
Předpokládám, že jste svůj účet GitHub Education zprovoznili a zprovoznili. Následující kroky zahrnují použití Namecheap k registraci vaší bezplatné vlastní domény a její hostování prostřednictvím stránek GitHub. Chcete-li zaregistrovat preferovaný název domény, 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 na Virtual Event Kit a přejděte dolů, abyste našli Namecheap.
GitHub nabízí jednoletou registraci názvu domény na TLD .me, ke které se dostanete kliknutím na možnost Získat přístup.
Krok 3: Následující okno vás požádá o autorizaci požadavku na připojení od Namecheap k vašemu účtu GitHub. Autorizujte Namecheap a pokračujte dalším krokem.
Po úspěšné autorizaci byste měli vidět výzvu: „Úspěšně jsme ověřili váš studentský balíček pomocí GitHubu“.
Krok 4: Najděte preferovanou doménu pomocí vyhledávacího pole a klikněte na Najít.
Na další obrazovce byste měli vidět dostupnost názvu domény. Pokud je vaše doménové jméno dostupné, můžete pokračovat v nákupu zdarma.
Krok 5: Zaplaťte pomocí e-mailové adresy GitHub Education a během postupu vyberte stránky GitHub jako způsob hostování.
Po úspěšné registraci vlastního názvu domény a výběru stránek GitHub jako svého hostingu by měl Namecheap automaticky vytvořit úložiště ve vašem účtu GitHub. Toto úložiště je zcela prázdné a obsahuje pouze soubor README.md.
K tomuto úložišti se dostanete tak, že se přihlásíte ke svému účtu GitHub a kliknete na sekci „Vaše úložiště“. GitHub Pages nenabízí vizuální nástroje a předem vytvořená témata pro váš web; musíte nakódovat celý web ručně a nahrát související soubory do nově vytvořeného úložiště GitHub.
Jak vytvořit web zdarma a hostit ho na stránkách GitHub?
Jak je uvedeno výše, budete muset vytvořit všechny soubory HTML, CSS a JavaScript související s vaším webem. Pokud se věnujete Web Dev a víte, jak se kódovat, je dobré nahrát své soubory do svého úložiště GitHub a spustit svůj web. Můžete se posunout do části tohoto článku, která se zabývá nahráváním kódu webu na stránky GitHub.
Ale pokud jste někdo, kdo má málo nebo žádné informace o Web Dev, máme pro vás pokrytí. Můžete použít níže uvedené kroky a navrhnout si vlastní web pomocí některého základního HTML:
Krok 1: Přejděte na HTML5 UP a přejděte na design webu, který se vám líbí. Můžete si vybrat jakýkoli jiný předem připravený motiv z jakékoli platformy. Zde jsem zvolil „Massively“ z HTML5 UP, ale můžete si zdarma stáhnout a upravit jakýkoli design webu podle vašeho výběru.
Krok 2: Extrahujte stažený soubor zip vašeho oblíbeného designu webových stránek.
V extrahované složce byste měli vidět soubory s názvem index.html a generic.html a složky jako aktiva a obrázky.
Krok 3: Nyní otevřete extrahované soubory pomocí kódu Visual Studio a vyberte soubor index.html.
Krok 4: Stáhněte a nainstalujte rozšíření „Live Server“ v kódu Visual Studio, pokud jej ještě nemáte.
Krok 5: Vyberte soubor index.html, klikněte pravým tlačítkem myši a vyberte možnost „Otevřít na živém serveru“. Tato možnost vám umožní vizualizovat změny v souboru HTML ve vašem prohlížeči v reálném čase.
Jak upravit design vašeho webu?
Proces za tímto bodem nebudu nazývat „Kroky“ pro přizpůsobení vašeho webu. Přizpůsobení souborů HTML je zcela na vašich preferencích, ale zde je návod, jak jsem upravil „Masivně“ design z HTML5 UP a převedl jej do portfolia. Můžete si vybrat, zda se zde budete inspirovat, nebo si svůj web přizpůsobíte zcela sami. Volba je na tobě!
Úprava značek Titulek a Odstavec
Na začátku procesu přizpůsobení jsem změnil značku názvu „Masivně“. Tag title vašeho HTML souboru určí jeho název při otevírání na kartě prohlížeče. Výchozí název pro Massively by měl být „Massively by HTML5 UP“ a doporučuji jej změnit na něco, co se podobá vašemu webu.
Změnil jsem název názvu na „Samyak Goswami | Tech Content Writer“, protože to ideálně vyhovovalo mému portfoliu. Dále jsem změnil sekci Úvod na webu, která říkala: „Toto je masivní“ (obsaženo v tagu H1) a ze zřejmých důvodů z ní udělal „Samyakovo portfolio“. Následně jsem změnil text níže ve značkách odstavců na „Představení mých projektů a mých schopností“.
Když jsem přešel do sekce Navigace (Nav) v indexovém souboru, vynechal jsem dvě ze tří navigačních tlačítek obsažených ve značce Seznam. Chtěl jsem vytvořit jednostránkový web se všemi detaily na jediné stránce, ale počet navigačních tlačítek si můžete upravit podle svého výběru.
Později jsem změnil text „Toto je masivní“ na navigačním tlačítku na „Moje články“.
Úprava odkazů a ikon sociálních médií
Musíte také vidět různé ikony sociálních médií na živém serveru, jako je Twitter, Facebook, Instagram a GitHub. Rozhodl jsem se vynechat Twitter a Facebook a nechat si Instagram a LinkedIn pro svůj případ použití.
Ikony sociálních sítí a jejich odkazy můžete upravit tak, že přejdete do části Navigace (Nav) a posouváte se na seznam značek, ve kterých jsou napsány Twitter, Instagram a další.
Všimněte si, že k těmto ikonám sociálních médií nejsou připojeny žádné odkazy, protože značka href je ponechána prázdná. Ke značce href můžete přidat odkazy tak, že nahradíte „#“ preferovaným odkazem.
Úprava obsahu domovské stránky
Nejprve jsem změnil značku H2 a udělal z ní „Jmenuji se Samyak Goswami“ a následně jsem změnil značku odstavce na „Jsem technologický nadšenec…“. Navrhoval bych, abyste změnili značku H2 za něco, co odpovídá obsahu vaší domovské stránky a značku odstavce, která to vysvětluje.
Nyní přicházíme s nejdůležitější částí tohoto přizpůsobení; úprava obsahu dlaždic článku.
Chcete-li to provést, přejděte do sekce Příspěvky v indexovém souboru a měli byste vidět několik úryvků kódu obsažených ve značkách Article. Odkazy na své příběhy můžete přidat úpravou sekce href, jako jsme to udělali při přidávání odkazů na ikony sociálních médií.
Později můžete změnit název článků úpravou obsahu ve značkách H2. Ke svým článkům můžete také přidat popis pomocí značky odstavce.
Opakujte postup pro každý článek přidáním odkazů, změnou názvů a přidáním popisu ke všem svým článkům.
Přidávání obrázků na vaše webové stránky
Určitě jste si všimli, že náhled vypadá velmi odlišně od obrázků přítomných na webu HTML5 UP. To je způsobeno rovinnými a nevýraznými fotografiemi v přizpůsobitelném souboru. Pojďme okořenit náš web tím, že na něj přidáme vlastní obrázky.
Původní obrázky
Chcete-li tak učinit, přejděte do složky, kam jste dříve extrahovali soubor zip „Massively“. Otevřete extrahovanou složku a přejděte do složky Obrázky. Měli byste vidět různé obrázky s názvem bg, pic01, pic02 a tak dále. Toto jsou obrázky spojené s našimi články v tagu Article.
Můžete buď přidat vlastní obrázky a upravit indexový soubor s názvy těchto obrázků, nebo přidat obrázky a pojmenovat je podobně jako výchozí obrázky. Stejné názvy obrázků nám ušetří úpravy kódu a spoustu času následně.
Upravené obrázky
Doporučuji vám zkontrolovat a upravit další části vašeho webu, které nejsou důležité. Zde je portfolio, které jsem vytvořil pomocí výše uvedených kroků: samyakgoswami.me.
Jak nahrát kód svého webu na stránky GitHub?
Po konečném nakódování a návrhu vašeho webu je čas nahrát jej na stránky GitHub a uvést jej do provozu na internetu.
Zde je návod, jak můžete nahrát svůj web na stránky GitHub:
Krok 1: Přihlaste se ke svému účtu GitHub a přejděte do sekce Moje úložiště.
Krok 2: Měli byste vidět úložiště s názvem your_username.github.io. Přejděte do tohoto úložiště.
Krok 3: Měli byste vidět možnost vytvořit si vlastní soubor nebo nahrát soubory do úložiště GitHub.
Krok 4: Vyberte všech pět souborů a složek; aktiva, obrázky, prvky, generické, indexové a přetáhněte je do úložiště.
Po nahrání souborů potvrďte kód a počkejte, až GitHub zpracuje vaše soubory.
Krok 5: Přejděte do Nastavení> Stránky GitHub a podívejte se na stav svého webu. Měla by se zobrazit výzva „Váš web je publikován na adrese your_custom_domain.“
Nyní můžete přejít na svou webovou adresu a sami zkontrolovat web. Mějte na paměti, že spuštění webu může chvíli trvat.
Jak povolit šifrování SSL na stránkách GitHub?
HTTP je nebezpečný způsob správy požadavků uživatelů na vašem webu. Kdokoli se zlými úmysly a dobrými technickými znalostmi může zachytit interakce mezi uživatelem a vaším webem. Na druhou stranu HTTPS poskytuje všem vašim návštěvníkům mnohem bezpečnější relaci prohlížení. Stránky GitHub nabízejí bezplatné šifrování HTTPS a můžete jej využít takto:
Přejděte do sekce Stránky v úložišti.
Na konci okna byste měli vidět možnost „Vynutit HTTPS“. Šifrování SSL by mělo být aktivní, jakmile zaškrtnete políčko Enforce HTTPS.
V případě, že zjistíte, že možnost Vynutit HTTPS není pro vaši doménu k dispozici, můžete povolit šifrování SSL pomocí následujících kroků:
Krok 1: Přihlaste se ke svému účtu Namecheap a přejděte do sekce „Seznam domén“.
Krok 2: Nyní přejděte na Spravovat doménu a následně do sekce „Advanced DNS“.
Měli byste vidět některé existující záznamy CNAME a A.
Přidejte následující záznamy A s hostitelem jako „@“ a IP adresou jako „185.199.108.153“. Další s názvem hostitele „@“ a adresou IP „185.199.109.153“.
Sledujte trend, dokud nebudete mít 4 A záznamy do IP adresy „185.199.111.153“.
Odstraňte všechny předchozí záznamy A.
Krok 3: Dále přidejte záznam CNAME s hostitelem jako „www“ a hodnotou jako uživatelské jméno GitHubu (tečka) github (tečka) io.
Odstraňte předchozí záznamy CNAME. Nakonec by vaše nastavení DNS měla mít 4 záznamy A a 1 záznam CNAME.
Krok 4: Nyní přejděte na stránky GitHub v sekci Nastavení. Pro vaši doménu by nyní měla být k dispozici možnost Vynutit HTTPS.
Shrnutí 👈
GitHub dává každému studentovi fantastickou příležitost vytvořit si bezplatnou webovou stránku a spravovat ji. I když nemůžete stránky GitHub použít k hostování masivního zatížení provozu, u malého statického webu zaškrtne každé políčko. Díky bezplatnému vlastnímu názvu domény, hostingu a šifrování SSL je to ještě úžasnější.
Nyní si můžete přečíst „Jak vybrat webového hostitele pro váš nový web“.
Zde je několik nástrojů pro sledování rychlosti stránek, které vás upozorní, když váš web nefunguje.