Zerge útmutatója egy majdnem ingyenes statikus weboldal létrehozásához

Az alábbi útmutatóban egy statikus (HTML, CSS és Javascript) futtatására alkalmas weboldal felállítását fogom bemutatni, amit a domain név megvásárlásának kivételével ingyen lehet megoldani.

Tartalom:

  1. Bevezető gondolatok
  2. Amire szükséged lesz:
  3. Domain név
  4. Fiókok létrehozása
  5. GitHub projekt létrehozása, fájlok feltöltése
  6. Netlify beállítása

Bevezető gondolatok

Mielőtt az alábbiakban taglalt módszerrel hoznál létre weboldalt, győződj meg róla, hogy nem szükséges PHP-t és egyéb szerveroldali szkripteket használnod, mivel a GitHub erre nem nyújt lehetőséget. Viszont ha csak egy egyszerű Wordpress honlapot akarsz létrehozni, amit csak bemutatkozásra, vagy esetenként blogolásra használnál, akkor talán ajánlottabb, hogy egy kis plusz idő befektetésével megpróbáld HTML-ben létrehozni a honlapodat.

Ez nem csak azért ajánlott, hogy tanulj, hanem mivel a mai internet egy lassú, túlterhelt szörnyeteg, így fontos, hogy mint hobbiista webnomád, ne ess te is a túltöltött, túlszkriptelt, túlcicomázott, valamint túl sok felesleges funkcióval és maszlaggal ellátott webdizájn csapdájába, mint a rohamosan növekvő számú konszumer horda.

Egy egyszerű HTML+CSS oldal nem csak sokkal könnyebben navigálható, ha rendesen fel van építve, de pofátlanul gyorsan betölt, megspórolva a látogatóidnak azokat az értékes másodperceket, amiket más weblapokon a kismillió szkript, felugró ablak, sütielfogadó gomb és egyéb, neofasiszta gyűlöleteszközök betültésére kell pazarolniuk.

Amire szükséged lesz

Domain név

Mielőtt belekezdünk az oldal felállításába, szükségünk lesz egy domain névre. Sokféle módon van lehetőségünk ezt megszerezni, a legegyszerűbb talán egy névszerveren lefoglalni és megvásárolni a magunknak tetszőt, de léteznek ingyenes megoldások is.

Példának okáért .tk végű domain neveket ingyen is szerezhetünk. Hobbi honlapokhoz tudom ajánlani a .xyz végződésű domain neveket, mivel az első három év csak 1 dollárba kerül, valamint az éves megújítása sem túl drága (kb. 8 dollár). Domain regisztrációt szolgáltató honlapokat különböző okokból nem fogok linkelni ebben a cikkben, de egy egyszerű internetes kereséssel rengeteget találhatsz.

Fiókok létrehozása

GitHub fiók létrehozásához csak nyisd meg az oldalt, és magától értetődően hozz létre egy új fiókot, vagy ha már rendelkezel eggyel, nyugodtan használd azt. Hasonlóan készíts egy ingyenes Netlify fiókot is.

GitHub projekt létrehozása, fájlok feltöltése

Miután bejelentkezel GitHub-ra, a bal oldalon látható zöld színű 'New' gomb megnyomásával hozz létre egy új repositoryt. A következő oldalon adj meg egy projektnevet, célszerű a honlapunk URL-ét ide írni (pl. zerge.xyz). A 'Description' szekcióba írhatsz egy rövid leírást, de nem fontos. A 'Public' opciót hagyjuk bepipálva. A további 3 opciót rád bízom. Ha kész vagy, nyomd meg a 'Create repository' gombot.

Mint láthatod, kész is van a honlap 'tárhelye'. Ide az 'Add file' funkcióval töltheted fel a HTML, CSS és egyéb fáljokat, amit most külön nem magyarázok el. Amennyiben nem tudsz HTML kódot írni, ajánlom Mérei Tamás (Cyrex) videóit.

A GitHub repositoryba töltheted fel a honlapod összes fájlját. Ha valamit meg akarsz változtatni a fájlokban, vagy csak frissítenéd őket, többféleképpen teheted. Vagy a böngészőben megnyitott repository 'Add file' gombjával feltöltöd a módosított fájlt a megfelelő mappába és felülírod az előző verziót. Emellett lehetőséged van vagy a GitHub parancssor programján keresztül, vagy a GitHub Desktop GUI interfészen (mezei program) keresztül klónozni a repót, majd elvégezni a módosításokat és végül a 'Commit to main' gombbal (bal alul) feltölteni a módosult fájlokat, ezzel frissítve a honlapot.

Netlify beállítása

Nyissuk meg a Netlify fiókunkat, majd a 'New site from Git' gombra kattintva kezdjük el a honlap létrehozását. Kattints a 'New site from Git' gombra, majd válaszd a GitHub opciót és kapcsold össze a GitHub fiókoddal. Ha ez megvan, válaszd ki a honlapodnak létrehozott repository-t.

Amint ez kész, a 'Getting started' gomb alatt menj a 'Set up a custom domain' opcióra. Itt add hozzá a domain nevedet, először subdomain nélkül, így: zerge.xyz, majd az 'Options' gombra kattintva válaszd ki a 'Set as primary domain' opciót. Adj hozzá még egy domain alias-t, ez www.-al kezdődjön, így: www.zerge.xyz.

Ezután a hozzáadott domain név mellett megjelenő 'Check DNS configuration' szövegre kattintva megjelenik az 'A record' beállításához szükséges IP cím. A domain szolgáltatód vezérlőpultjában kell hozzáadnod egy A recordot, amibe a szövegbuborékban található számokat (csak a számokat) kell bemásolnod. Miután elmented, egy kis ideig még előfordulhat, hogy nem működik, akár egy napig is eltart, mire frissül a szerver.

Az A record hozzáadása után lehetőséged van beállítani, hogy a domain nevedet a Netlify DNS szervere kezelje. Ezt úgy teheted meg, hogy a Netlify 'Domain settings' menüjében a hozzáadott domain melletti 'Options' gombra kattintás után A 'Set up Netlify DNS' opciót választod. Euzán a 'Verify' gombra menj, majd a megjelenő URL-eket a domain szolgáltatód vezérlőpultjában a névszerverek (name servers) beállítása menüpontban hozzáadod. Érdemes törölni a meglévő értékeket, mielőtt az újakat bemásolod. Mentés után ez a folyamat is eltarthat egy darabig, szóval légy türelemmel. Néhány óra múltán a Netlify 'Domain settings' menüpontjában már mindenféle hibaüzenet nélkül kell, hogy szerepeljenek a domain aliasok, valamint a domain nevek is a honlapodra kell mutassanak.

Ha mindennel készen vagy, de az oldal még nem elérhető a saját domain neveden, a Netlify által biztosított alapértelmezett URL-en már elérhető a weboldal, így nekiláthatsz a szerkesztésének, fejlesztésének és bármi egyébnek.

Jó szórakozást az új weboldaladdal!

Amennyiben kérdésed vagy hozzáfűznivalód van, kérlek a mr.zergeboglar (at) gmail.com e-mail címen keress!