Weboldal létrehozása

Ez az oldal arról szól, hogy hogyan tudunk mi magunk egy ehhez hasonló weboldalt létrehozni. A weboldalak létrehozásának minden csínját-bínját sajnos én sem ismerem; itt azt írom, le, hogy ezt a weboldalt (és még ehhez hasonló egyet-kettőt) hogyan hoztam létre.

Domain regisztráció

A kiválasztott domain-t (jelen esetben: faragocsaba.hu) le kell foglalni. Ez pénzbe kerül:

  • A .hu végződés nagyságrendileg ezer Ft/év.
  • A népszerű nemzetközi végződések (pl. .com, .org, .eu stb.) pár ezer Ft évente.
  • Más országok domain neveinek lefoglalása Magyarországról tízezer Forintos nagyságrend évente.

Néhány cég, ahol lehet domain-t regisztrálni:

De természetesen másik céget választhatunk. A foglalás menete általában a következő:

  • Rá kell keresni a lefoglalandó domain-re, végződés nélkül. Kidobja, hogy mely végződésekkel szabad. A magyarországi domain név szolgáltatóknál általában a .hu domain van az elején.
  • Ki kell választani, hogy melyiket szeretnénk lefoglalni. A szolgáltatók az árat is megadják. A díjak általában évesek. Itt figyeljünk arra, hogy a gyanúsan olcsó domain esetében az összeg gyakran csak az első évre vonatkozik, utána lehet sokkal drágább is. A .hu végződés ára tisztességes: általában az első 2 évre kb. bruttó 2000-3000 Ft, majd évente kb 1000 Ft.
  • Meg kell adnunk az adatainkat: név, cím, telefonszám, e-mail.
  • Ki kell fizetnünk az árát, általában online.
  • Várni kell valamennyi ideig (akár 1-2 nap), mire "birtokba tudjuk venni".

Tárhely

A másik a domainen kívül a tárhely. A legtöbb szolgáltató domain regisztrációval és tárhely szolgáltatással is foglalkozik egyszerre; "egy piszokkal" el lehet intézni. Függően attól, hogy pontosan mit szeretnénk, az éves díj pár ezertől pár tízezer forintig terjed. De van ingyenes lehetőség is, pl. a faragocsaba.hu is egy ilyen szerveren fut, a http://wikidot.com/ oldalon.

Néhány lehetőség ingyenes kipróbálási lehetőséggel:

Wikidot

A http://faragocsaba.hu mögött a Wikidot áll. Ahogy a nevéből is következik, egyfajta wiki oldalakat lehet létrehozni. A jelölő nyelv sajnos nem egyezik meg teljes egészében a Wikipédiával, de hasonló hozzá.

Előnyei:

  • Nem kell HTML tudás.
  • Offline is szerkeszthető.
  • Közösen szerkeszthető.
  • 20 weboldalat ingyen létre tudunk hozni 300 MB adatmennyiségig.

Hátrányai:

  • Idejétmúlt kinézetet eredményez.
  • Korlátozottak a lehetőségek (pl. nem tudunk közvetlenül HTML-t feltölteni).
  • Nem lehet webalkalmazást készíteni.
  • Nehézkes a használata (pl. képeket csak egyesével lehet feltölteni).
  • Mobilon csúnyán néz ki az eredmény.

Új oldal létrehozása:

  • Nyissuk meg a http://wikidot.com/ oldalt.
  • Regisztráljunk és lépjünk be.
  • My Accounts → Sites fül
  • Alul +Create site nyomógombra kattintva.

Szerkesztés:

Segítség az induláshoz:

Szabad szöveg.

+ Első fejezet

++ Első alfejezet

Paragrafus szöveg.
Új sor. **Vastag**, //dőlt betűs//, __aláhúzott__, --áthúzott--, {{fix karakterszélességű}} szöveg.

++ Második alfejezet

Felsorolás:
* Első elem
* Második elem
* Harmadik elem

+ Második fejezet

Táblázat:

||~ Név    ||~ Darab ||
|| alma    || 5      ||
|| banán   || 3      ||
|| narancs || 6      ||

Google Analytics használata:

  • Regisztráljunk a https://analytics.google.com/ oldalon.
  • Bal oldalon alul kattintsunk az Adminisztrálás linkre. Középen megjelenik a nevünk, és zárójelben egy kód. Azt jegyezzük fel.
  • A Wikidot admin oldalán (http://oldalam.wikidot.com/_admin) General Settings → Google Analytics
  • Profile key: az imént elmentett kulcs
  • Use Google Analytics: ez legyen bekapcsolva.
  • Az https://analytics.google.com/ oldalon megjelenik a látogatási statisztika.

Heroku

Előnyei:

  • Webalkalmazásokat tudunk feltölteni.
  • PHP-t, Java-t is tudunk használni.
  • Spring alkalmazást is tudunk segítségével indítani.
  • Adatbázishoz is tudunk kapcsolódni.

Hátrányai:

  • Bonyolultabb a használata.
  • Alap html-t önmagában nem tudunk használni, legalább PHP kell.

Használata:

heroku login
  • Itt megnyílik egy weboldal; gyakorlatilag csak jóvá kell hagyni.
  • A https://dashboard.heroku.com/apps oldalon hozzunk létre egy új alkalmazást a jobb felső sarokban ezt kiválasztva: New → Create new app, majd értelemszerűen kitöltve. Adjunk neki nevet (a példában ez oldalam lesz), majd Create app.
  • Hozzunk létre egy könyvtárat lokálisan valahol a források számára.
  • Inicializáljunk egy git reporitory-t:
git init
  • Kapcsoljuk össze a lokális változatot a távolival:
heroku git:remote -a oldalam
  • Az előző két lépést egyszerre is végrehajthatjuk:
heroku git:clone -a oldalam
cd oldalam
  • Hozzunk létre valamilyen tartalmat. Közvetlenül index.html-t nem tudunk, "legalább" PHP-nak kell lennie. Pl. home.html
<html>
<head>
<title>My Test Page</title>
</head>
<body>
Helló, világ!
</body>
</html>
  • Kell egy PHP oldal is, pl. index.php:
<?php include_once("home.html"); ?>
  • A szokásos got parancsokkal adjuk hozzá a repóhoz a tartalmat:
git add .
git commit -m "Hello world commit"
  • Töltsük fel a szerverre:
git push heroku master

GitHub

Alapvetően forráskódok tárolására lett kitalálva, git verziókövető rendszerben. Viszont a Markdown fájlokat rendesen megjeleníti, így gyakorlatilag alkalmas egyszerűbb weboldalak létrehozására is. Ezen kívül a github.io valódi hosztolásra is alkalmas.

  • Hajtsuk létre a szükséges lépéseket, mint ahogy az a Verziókövető rendszerek → Git → GitHub részben le van írva.
  • Hozzunk létre egy új reporitory-t. A neve elvileg bármi lehet, viszont ha weboldalt szeretnénk gyártani, akkor kötelezően felhasználónév.github.io, pl. az esetemben faragocsaba.github.io.

További lépések:

  • Hozzunk létre egy fájlt a klónozott könyvtárban index.html néven, minimalista tartalommal (ez lesz a weboldalunk magja), pl.:
<html>
<body>
<h1>Title</h1>
Hello, world!
</body>
</html>
  • Hozzunk létre egy minimalista README.md fájlt ugyanitt:
# Test MD file

This is a test MD file
  • Adjuk hozzá a repository-hoz, commitoljuk és pusholjuk:
git add .
git commit -m "Initial commit"
git push
  • Itt fel fog dobni egy ablakot. Ott hiába írnunk be bármit, hibát fog jelezni, ezt kétszer. Harmadjára lehetőségünk van beírni az azonosítónkat és a jelszavunkat parancssorban.
  • Az azonosító legyen a rendes azonosítónk, tehát ne próbálkozzunk az e-mail címmel (az én esetemben faragocsaba).
  • A jelszó viszont ne a jelszavunk legyen, hanem a generált token.

Ha ezt sikeresen végrehajtottuk, többé nem fogja kérni a jelszót pusholáskor.

Az eredmény ellenőrzése:

000webhost

Az eddigiek közül talán ez hasonlít leginkább a klasszikus webfejlesztéshez szükséges szerverhez:

  • Normál HTML-t (és kapcsolódó dolgokat) kell feltölteni.
  • FTP klienssel lehet feltölteni a fájlokat.
  • Biztosít a webfejlesztéshez szükséges olyan dolgokat, mint pl. adatbázis, WordPress stb. (nem próbáltam).

Hátrányai:

  • Szakmai ártalom: úgy félnek a DDoS támadástól, mint ördög a tömjénfüsttől, így az oldal megnyitása lassú.
  • Egyébként is gyakran tapasztalok belassulást.
  • Ingyenesen csak egy weboldalt lehet készíteni.
  • A weboldal neve generált, nem mi adjuk.
  • Inaktivitás esetén archiválják a weboldalt.

Lépések:

  • Regisztráljunk a https://www.000webhost.com/ oldalon.
  • Hozzunk létre egy oldalt a jobb felső sarok környékén található + Create New Site gombra kattintva.
  • A létrejött weboldal ikonja megjelenik a főoldalon. Ha fölé megyünk az egérrel, megjelenik rajta egy Manage Website gomb (ami alapból nem látszik). Arra kattintsunk.
  • Itt számos beállítási lehetőség van, melyekben nekem is el kellene merülnöm a tisztánlátás érdekében.
  • Egy fontos rész: Website Settings → General: itt találjuk az ftp feltöltéshez szükséges információt.
    • Szerver: files.000webhost.com
    • Port: 21
    • Felhasználó név: a generált weboldal neve; az én esetemben burman-dictionaries
    • Jelszó: megegyezik a weboldalon használt jelszóval
  • FTP kliensként használhatjuk pl. a Total Commandert: a főmenü alatti ikonsor sor közepén található egy FTP ikon.
  • A weboldalt a public_html könyvtárba kell feltölteni. Ott hozhatjuk létre az index.html oldalt. A .htaccess fájlt hagyjuk ott.

Neocities

Előnyei:

  • A használata rendkívül egyszerű.
  • 1 GB-os statikus tárterületet biztosít ingyen. (A fizetős 50 GB tárhelyet biztosít.)
  • Reklám nincs rajta.

Hátrányai:

  • Adatbázis, PHP, web konténer itt nincs.
  • Saját domaint csak a fizetős változatban tudunk használni (ami egyébként 5$ havonta).
  • Az alap HTML-en túlmutató tartalmat (zene, videó, tömörített fájl, futtatható stb.) szintén csak a fizetősben tudunk feltölteni.
  • A távoli mountolást ugyancsak a fizetős változatban tudjuk használni.

Lépések:

  • Regisztráljunk a https://neocities.org/ oldalon.
  • Automatikusan létrejön a username.neocities.org oldal, amely egy egyszerű oldalt is tartalmaz, pl. https://faragocsaba.neocities.org/.
  • Szerkesztés: a jobb felső sarokban a nevünk mellett kattintsunk a kis háromszögre → Edit Site → itt tudjuk vagy helyben szerkeszteni, vagy a lokálisan szerkesztettet feltölteni.

Saját domain

Ha már meg van a domain és a tárhely is, a kettőt össze kell kapcsolni. Ezt az DNS megfelelő beállításával kell. A leírást a http://community.wikidot.com/howto:set-up-a-custom-domain alapján készítettem.

Domain oldal

  • A Silihost ezt kérésre elvégezte.
  • A Rackhost webes felületet biztosít ahhoz, hogy mi magunk elvégezzük a beállítást.

Rackhost-ban a következő lépéseket kellett megtenni:

  • Lépjünk be: https://www.rackhost.hu/.
  • Felül kattintsunk a Felhasználói fiókra.
  • Bal oldalon a Szolgáltatások alatt válasszuk ki a DNS zónákat.
  • Középen a domain név sorában kattintsunk a Rekordok szerkesztése nyomógombra.
  • Az A, CNAME, TXT rekordok részben állítsuk be a rekordokat az alábbi módon:
Hosztnév Típus Érték TTL
www.oldalam.hu A 107.20.139.170 3600
oldalam.hu A 107.20.139.170 3600
*.oldalam.hu CNAME 107.20.139.170 3600

Azt, hogy ez mit jelent, fogalmam sincs. A 107.20.139.170 a szolgáltató IP címe. Lekérdezése parancssorból Wikidot esetén:

ping www.wikidot.com

Pinging www.wikidot.com [107.20.139.170] with 32 bytes of data:

A ping timeoutol, de az IP címet kiírja. (A többi hoszt esetén is ezt "pingetni".)

Itt várni kell valamennyi ideig, mire "elterjed" a világban.

Wikidot

  • Az adott oldal admin felületén (http://oldalam.wikidot.com/_admin) General Setting → Egyedi domain-név: ide írjuk be a saját domainünket, pl. oldalam.hu.
  • A "Use the custom domain as the only domain for this site." maradjon kipipálatlanul, hogy el tudjuk érni az oldalt Wikidot-on keresztül is (egyébként nem tudnánk szerkeszteni).
  • A 301-es átirányítást is beállíthatjuk, de az nem lényeges. Kattintsunk a Változtatások mentése gombra.

Heroku

Ez az oldal írja le a szükséges lépéseket: https://devcenter.heroku.com/articles/custom-domains. Ez bonyolultabb.

heroku domains:add www.oldalam.hu
  • Az oldalhoz tartozó DNS szerverhez adjuk ki a következő parancsot:
heroku domains
  • Az eredmény egy táblázat lesz, melynek a DNS Target oszlopában egy fantázianévből és egy hosszú kódból álló valami található, herokudns.com végződéssel. Ennek az IP címét kérdezzük le:
ping ….herokudns.com
  • A szolgáltatói oldalon az így megkapott IP-t állítsuk be az A és CNAME értékéül.
  • Domain törlése:
heroku domains:remove www.oldalam.hu

GitHub

Ez az oldal írja le: https://docs.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site

  • Nyissuk meg a repónkat, pl. https://github.com/faragocsaba/faragocsaba.github.io
  • A sok link között keressük meg a Settings-et, és kattintsunk rá (itt a repó Settings-ére van szükség).
  • A lap alja környékén keressük meg a Custom domain-t; oda írjuk be az URL-t: www.oldalam.hu
  • A domain oldali beállításhoz "pingessük" meg a webdolalunkat, pl.
ping faragocsaba.github.io

000webhost

Leírás: https://www.000webhost.com/forum/t/how-to-point-domain-name-to-000webhost-com/

Az "easy" itt is hozza a "formáját" az oldalon ötször fordul elő a szó, és ez volt a legproblémásabb. Számos próbálkozás volt sikertelen. Végül a sikeres beállítás a következő (nem tudom, ez-e a legegyszerűbb).

  • Manage Website → Website Settings → General
  • A Website Name alatti mondat utolsó szavára, a "here"-re kattintsunk.
  • + Add domain → Point domain
  • Én beállítottam az oldalam.hu oldalra és a www.oldalam.hu oldalra is a beállítást.

A DNS szolgáltató oldalán az alábbi beállítás lett a nyerő:

Hosztnév Típus Érték TTL
www.oldalam.hu A 145.14.144.40 3600
*.oldalam.hu CNAME burman-dictionaries.000webhostapp.com 3600

A burman-dictionaries helyett természetesen a saját oldalunkat kell megadni.

SEO

Áttekintés

A SEO a Search Engine Optimization (keresőmotor optimalizálás) rövidítése. Általánosságban azt jelenti, hogy a weboldalunkat megtalálják a keresőmotorok, és a találati lista előkelő helyére kerüljön. A gyakorlatban ez mondhatni kizárólag a Google keresőmotorra történő optimalizálást jelenti. Miért van erre szükség? A weboldalra kattintások legnagyobb része keresésből adódik (a nem Google keresési találatok kerekítési hiba a Google-hoz képest). További lehetőségek: külső linkről történő kattintás (emiatt jó, ha megjelenik a weboldalunk linkje egy nagy látogatottságú oldalon), ill. az URL begépelése (emiatt célszerű könnyen megjegyezhető URL-t használni).

De miért fontos ez? A weboldalakat a nagyközönségnek készítjük, fontos tehát, hogy minél több emberhez eljusson a "hírünk". Ha valaki számára a weboldala bevételi forrás, akkor a szó legszorosabb értelmében létkérdés. Az én weboldalam nem tartozik ebbe a kategóriába, mégis, valamennyire odafigyelek erre, mert azt gondolom, hogy értékes és hasznos tartalom található az oldalon, de ennek csak akkor van értelme, ha mások is rátalálnak.

Együttműködés a Google-lal

A Google abszolút piacvezető a webes keresés (és számos egyéb webes szolgáltatás) területén, amit úgy ért el, hogy igyekszik a legrelevánsabb találatokat adni. Számára ennek a hosszú távú fenntartása kulcskérdés. Emiatt egyetlen módja van annak, hogy bekerüljünk a találati lista élvonalába: az általunk nyújtott tartalomnak az egyik legrelevánsabbnak kell lennie adott témában.

Az alábbiakban arról lesz szó, hogy hogyan tudjuk elmozdítani weboldalunkat ebbe az irányba.

Google Analytics

Ennek segítségével a Google ingyenes elemzést hajt végre a weboldalunkon. Részletes látogatási statisztikákat ad:

  • összesen hányan látogatták a weboldalt,
  • mely oldalainkat nyitották meg legtöbbször,
  • mely időszakban (nap, napszak) hányan látogatták,
  • mely országokból keresték,
  • milyen életkorúak nézték,
  • hányan tértek vissza,
  • hányan kattintottak belső linkre,
  • mennyi időt töltöttek a weboldalon,
  • stb.

Mindezeket kombinálni is lehet.

Ehhez a http://analytics.google.com/ oldalra kell belépni a Google azonosítónkkal. Az adminisztrálásra (bal alsó sarok, fogaskerék) kattintva középen megjelenik egy UA- kezdetű kód; ez az ún. Profile Key. Ezt kell beregisztrálni az oldalainkra. Pl. a Wikidot oldalon így: My Account → Sites → Admin panel az adott weboldalon → General Settings → Google Anaytics. Ezt követően elemezhetjük a látogatási statisztikákat a http://analytics.google.com/ oldalon.

Fontos tudni, hogy ez nemcsak a Google keresés találatait elemzi, hanem általános elemzést nyújt.

Google Search Console

A https://search.google.com/search-console oldalon láthatunk kifejezetten a Google keresésekkel kapcsolatos információkat. Első lépésben meg kell győznünk a Google-t arról, hogy valóban mi vagyunk az adott oldal tulajdonosai. Ezt többféleképpen megtehetjük; a legegyszerűbb talán az, hogy a weboldalunkra beszúrunk egy generált google-site-verification kulcshoz tartozó értéket. Majd fel kell töltenünk a webhelytérképet, bal oldalon, a Webhelytérképekre kattintva. Ennek adott, nem túl bonyolult formátuma van: vagy sima txt fájlban felsoroljuk, vagy XML formátumban hozzuk létre. Célszerű generáltatni, pl. a https://www.xml-sitemaps.com/ oldal segítségével ezt ingyen megtehetjük. Majd az eredményt (sitemap.txt) a fenti megadott helyre feltöltjük.

Néhány nap elteltével ilyen statisztikákat láthatunk:

  • Milyen keresési kulcsszavakra hányszor jelent meg az oldalunk?
  • Ebből hányan kattintottak?
  • Mely oldalaink jelentek meg legtöbbször a keresések során és hányszor kattintottak?
  • Hanyadik helyen jelent meg az oldalunk a találati listában?

Google találati lista

Érdemes megnézni a következőket:

  • Adott kulcsú kereséseknél hanyadik helyre kerül a mi oldalunk? Hanyadik oldalon jelenik meg? Itt minimum standard az, hogy megfelelő kulcsszavak esetén felkerüljünk az első oldalra, különben ismeretlen marad az oldalunk. Például ha fénymásoló szalonunk van mondjuk Kiskunfélegyházán, akkor a "fénymásoló szalon Kiskunfélegyháza" keresésre az első oldalra kell kerülnünk.
  • Nézzük meg, hogy hogyan jelenik meg az oldalunk a találatkor. Változtassunk rajta, ha nem vagyunk elégedettek. Tipp: ha nem találjuk, akkor írjunk be egy olyan keresőkifejezést, amit relevánsnak gondolunk, majd tegyük utána ezt: site:, majd a mi weboldalunk.

Tippek és trükkök

Az alábbi módszerek segítenek abban, hogy előrébb kerüljön az oldalunk a találati listában:

  • A <title> tag a fejlécben legyen beállítva; az az, amit a Google kattintható linkként megjelenít. Így lényegében ez a legfontosabb.
  • A HTML fejlécben a description meta információban azt adhatjuk meg, hogy mit jelenítsen meg a link alatt. Enélkül leggyakrabban egy random részletet jelenít meg az oldalunkról, ami esetleg nem releváns, és nem generál kattintásokat.
  • A HTML fejlécben kerüljön be egy keywords meta információ, megfelelő tartalommal. Tehát melyek azok a keresőkifejezések, amire azt szeretnénk, hogy ez az oldal előre kerüljön.
  • Javítsuk a hibás linkeket. Néhány weboldal, ami ingyenesen segít felderíteni: https://www.brokenlinkcheck.com/, https://www.deadlinkchecker.com/, https://ahrefs.com/broken-link-checker.

TODO:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License