Provozování webových stránek na Github

Github je společnost, která poskytuje úložiště pro repozitáře (adresáře) s kódy k projektům. Mnoho kódů je tzv. "open source", to znamená, že jsou veřejně dostupné pro celý svět. Díky tomu se mohou programátoři od sebe navzájem učit a společně pracovat. Khan Academy má také několik open source repozitářů. Tyto repozitáře nemusí obsahovat pouze HTML a CSS kódy, ale i ostatní typy kódů, které jsou u jednotlivých projektů potřeba.

Proč se o nich zmiňujeme? Github totiž umí hostovat webové stránky (Github Pages), takže si můžeme sami založit vlastní webovou stránku na adrese našeuživatelskéjméno.github.io.

Po otevření stránky github.com uvidíme na hlavní stránce přihlašovací formulář. (Pokud ne, již účet máme! Přeskočíme tedy na Krok 2.)

Při vybírání svého uživatelského jména musíme pamatovat na to, že bude veřejně zjistitelné na internetu a bude součástí naší URL adresy: našeuživatelskéjméno.github.io. Někteří lidé místo svých pravých jmen využívají přezdívky nebo různá vtipná jména.

V druhém kroku vybereme "free plan" (účet zdarma). Pro veřejnou webovou stránku není třeba placený účet (pokud budeš později potřebovat některé z pokročilých funkcí, můžeš tuto volbu kdykoli změnit).

V třetím kroku můžeme, ale nemusíme, vyplnit průzkumový dotazník:

Poté, co vyplníme registrační formulář, si zkontrolujeme náš e-mail a klikneme na odkaz pro potvrzení naší e-mailové adresy.

Jakmile potvrdíme naší adresu, uvidíme úvodní stránku. Klikneme na "Start a project".

Na stránce pro vytvoření nového projektu budeme vyzváni, abychom vyplnili jméno projektu. ¨Musíme si dát pozor, abychom pojmenovali projekt přesně "našeuživatelskéjméno.github.io". Tím Githubu říkáme, že tvoříme webovou stránku a aby nahrával naše soubory na veřejné URL, kdykoliv je změníme. Jelikož naše uživatelské jméno bylo "PamelaFoxBot", projekt jsme pojmenovali "PamelaFoxBot.github.io":

Máme nový projekt! Nejsou v něm však žádné soubory. Pro rychlé vytvoření souboru klikneme na odkaz "README":

Nyní se díváme na prostředí Github pro úpravu souboru README.md. Změníme jméno souboru z README.md na index.html. Servery očekávají, že hlavní stránka webové stránky bude v adresáři pojmenována index.html. Z této stránky poté můžeme odkazovat na ostatní stránky.

Nyní smažeme stávající obsah editoru souboru a vložíme HTML kód naší stránky. Můžeme zkopírovat kód z projektu Khan Academy, nebo z našeho vlastního.

Nyní sjedeme dolů po stránce a klikneme na tlačítko "Commit new file". Každou novou verzi souboru takto musíme potvrdit, aby se uložila. Každé potvrzení obsahuje popis změn. Github nám zde navrhuje pojmenování této verze jako "Create index.html", ale tento název můžeme přepsat.

Githubu trvá zpracovat změny v projektu 1-10 minut, musíme proto být trpěliví. Možná budeme muset během načítání držet klávesu Shift, aby se vyprázdnila mezipaměť prohlížeče.

Pokud pracujeme na webových stránkách mimo Khan academy, naše stránka může mít více HTML, CSS, JS a obrázkových souborů.

Na Github naštěstí nemusíme každý soubor nahrávat jednotlivě! To by jistě bylo únavné. Je tu lepší řešení...

Objeví se prostředí pro nahrávání souboru. Pro výběr souborů soubory přetáhneme, nebo použijeme průzkumník souborů:

Obvykle chceme nahrát ty soubory, které jsme změnili. Pokud si nejsme jisti, nahrajeme všechno. Github si sám zkontroluje, které soubory se změnily, a které ne, a nahraje pouze nové verze změněných souborů.

Musíme pamatovat, že to může zabrat až 10 minut. Trpělivost je náš přítel. :)

Nejlepší je proto vytvářet a testovat projekty ve vlastním prostředí v počítači, a na Github (nebo kamkoliv jinam) je nahrát, až když jsme s nimi plně spokojeni.