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:
- http://www.silihost.hu/ - a faragocsaba.hu oldal itt van regisztrálva. A beállítás kérésre történt.
- https://www.rackhost.hu/ - itt webes felületen kell magunknak beállítani a dolgokat. Ez a leírás ezt a szolgáltatót veszi alapul.
- https://ionos.hu/ - egy nagyon jó kereső a nemzetközi domain foglaltsággal kapcsolatban.
- https://www.webonic.hu/
- https://www.forpsi.hu/
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:
- Az egyes oldalakon alul a Szerkesztésre kattintva.
- Ha beírunk egy nem létező oldalt, akkor felkínálja, hogy létrehozzuk.
- Felső menü szerkesztése: http://oldalam.wikidot.com/nav:top
- Admin oldal: http://oldalam.wikidot.com/_admin
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:
- Ha még nincs git-ünk, telepítsük fel: https://git-scm.com/.
- Regisztráljunk a https://www.heroku.com/ oldalon és lépjünk be.
- A https://devcenter.heroku.com/articles/heroku-cli oldalról töltsük le a Heroku CLI-t, telepítsük.
- Indítsunk egy parancssort, és lépjünk be:
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:
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
- Ha nem írt ki hibát, ellenőrizzük az eredményt: https://oldalam.herokuapp.com/
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:
- Böngészővel nyissuk meg a repónkat a github.com-on. Az én esetemben ez https://github.com/faragocsaba/faragocsaba.github.io. Lent láthatjuk az MD fájlunk eredményét.
- Böngészővel nyissuk meg a github.io oldalunkat; az én esetemben ez: https://faragocsaba.github.io/. Itt a html oldalunkat látjuk.
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.
- A https://devcenter.heroku.com/articles/account-verification oldal alapján végre kell hajtanunk a verifikációt. Ehhez meg kell adnunk egy hitelkártyát, melyről megpróbál levonni 1 dollárt, majd visszateszi. Valamint meg kell adnunk a címünket is. Közvetlen link az oldalra: https://dashboard.heroku.com/account → Billing.
- Adjuk hozzá az oldalunkat a Heroku CLI segítségével (www is kell):
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:
- Google Ads (https://ads.google.com/)
- Google Trends (https://trends.google.com/)
- Google My Business (https://www.google.com/business/)
- Google AdSense (https://www.google.com/intl/hu_hu/adsense/start/)
- Ubersuggest (https://app.neilpatel.com/ubersuggest/)