A weboldal készítés komoly befektetés; a webhely felépítésének minden lépéséért fizetni kell.
Szeretnél ingyenes weboldalt készíteni személyes vagy szakmai fejlődésed érdekében? Íme egy módja annak, hogy megtervezze következő webhelyét egyéni domain névvel, élethosszig tartó ingyenes tárhelyszolgáltatással és teljesen ingyenes SSL-titkosítással. Tyűha! Mi mást kérhetne?
Nem véletlen, hogy egy weboldal jelentősen felpörgeti növekedési adatait, és ma már inkább befektetés, mint luxus. Ez nem csak a vállalkozásokra igaz, hanem a magánszemélyek is nagy hasznot húzhatnak egy személyes weboldalon keresztül.
Legyen szó domain név regisztrálásáról, webhelye tartalmának tárolásáról, a webhely felépítéséről vagy az SSL-titkosítás engedélyezéséről, készen kell állnia a zsebek kiürítésére. A fájdalmat fokozza, hogy ezeknek a kiadásoknak egy része visszatérő és örökké tart.
Mi lenne, ha azt mondanám, hogy létrehozhat egy ingyenes webhelyet, miközben megteszi a webhelykészítés fent említett kulcsfontosságú lépéseit, azt is ingyen? Bármennyire is világtalanul hangzik, mindezt ingyen megteheti, ha diák vagy.
Ha ismeri a GitHub-ot, ismerheti a GitHub oldalakat. Ingyenesen használható szolgáltatás, amely minden GitHub-fiókhoz tartozik. A GitHub Pages lehetővé teszi minden felhasználó számára, hogy ingyenes webhelyet hozzon létre és tároljon, de van egy hatalmas figyelmeztetés. Ezen ingyenes webhelyek domain nevei lényegében a github.io-val végződnek, ami tönkreteszi webhelye professzionalizmusát.
Tartalomjegyzék
Mi az a GitHub Student Developer Pack?
Kevesebb felhasználó veszi komolyan webhelyét, és a szükségtelenül hosszú domain név soha nem jó ötlet. De hé! Nem azért vagyunk itt, hogy a GitHub Pages előnyeiről vagy figyelmeztetéseiről beszéljünk. Ígértem egy módot arra, hogy ingyenes webhelyet hozzon létre az egyéni domain névvel, és a következőképpen teheti meg.
A GitHub lehetőséget kínál arra, hogy egy fantasztikus, praktikus online eszközökkel teli készletet vegyen igénybe minden hallgató számára, aki beiratkozott a GitHub Student Developer Pack-re. A csomag profi előfizetéseket és döbbenetes kedvezményeket tartalmaz olyan népszerű eszközökre, mint a Canva, a Namecheap, a Microsoft Azure, a Discord, a Name.com és a StreamYard, egyebek mellett.
Ebben a cikkben a Namecheap segítségével regisztrálunk egy ingyenes egyéni domaint, és GitHub oldalakat használunk webhelyünk tárolására. Ezután megvizsgáljuk a HTML-, CSS- és JavaScript-fájlok megtervezésének és GitHub-oldalakra való feltöltésének módjait. Végül az SSL titkosítást is engedélyezni fogjuk a weboldalon, de mindenekelőtt regisztrálnunk kell a Student Developer Pack-re.
Hogyan lehet jelentkezni a GitHub Student Developer Packre?
A Student Developer Pack regisztrációjának folyamata egy egyetemi hallgatói e-mail-címhez kapcsolódik. A hallgatói e-mail cím általában az egyetem domain nevével végződik, például [email protected] Vannak más módok is a csomagra való regisztrációra, de ezek sokkal hosszabb felülvizsgálati időt igényelnek, mint a tanulói e-mail használata. Ha készen van a diák e-mail címe, a következőképpen regisztrálhat a csomagra:
1. lépés: Lépjen ide GitHub oktatás és kattintson a Bejelentkezés lehetőségre.
Ha már rendelkezik a csomaggal, bejelentkezhet a hitelesítő adataival. Ellenkező esetben kövesse az alábbi lépéseket.
Kattintson a Fiók létrehozása lehetőségre a Bejelentkezés ablakban.
2. lépés: Ezután regisztráljon hallgatói e-mail címével, és hozzon létre egy fiókot.
3. lépés: Amikor a „Melyik írja le legjobban az Ön tanulmányi státuszát?” kérdés jelenik meg, feltétlenül válassza a Hallgató lehetőséget.
4. lépés: Most töltse ki a szükséges mezőket iskolája nevével és a GitHub használatának céljával kapcsolatos adatokkal.
5. lépés: Végül küldje el jelentkezését az „Adatok elküldése” opcióval.
Ha a GitHub jóváhagyja az alkalmazást, kap egy megerősítő e-mailt a fejlesztői csomagról. A folyamat általában néhány napig tart, de csúcsidőben az idő jelentősen változhat.
Hogyan lehet jelentkezni a GitHub Student Developer Pack-re hallgatói e-mail nélkül?
A GitHub lehetőséget ad arra is, hogy érvényes diákigazolvánnyal vagy tudományos státuszának más igazolásával igényelje a csomagot. Az egyetlen figyelmeztetés a hosszú várakozási idő és a magasabb elutasítási arány. Mindenesetre a következő módszerrel jelentkezhet a diákcsomagra:
1. lépés: Kövesse a fent említett lépéseket a fiók létrehozásához személyes e-mail címén keresztül.
2. lépés: Most töltse fel tanulmányi státuszának igazolását a kamera opcióval, vagy töltse fel a fényképeket közvetlenül a GitHubba a Feltöltés gombbal.
3. lépés: Ezután töltse ki az összes szükséges adatot, például az iskola nevét és a GitHub használatának célját.
4. lépés: Nyújtsa be jelentkezését.
Hogyan regisztrálhatja egyéni domainjét a Namecheap segítségével?
Feltételezem, hogy a GitHub Education-fiókod be van állítva és futva. A következő lépések során a Namecheap segítségével regisztrálhatja ingyenes egyéni domainjét, és tárolhatja azt a GitHub oldalakon keresztül. Kövesse az alábbi lépéseket a preferált domain név regisztrálásához:
1. lépés: Jelentkezzen be GitHub Education-fiókjába, és lépjen az Előnyök részhez.
Látnia kell egy Web Dev Kit-et és egy Virtual Event Kit-et.
2. lépés: Lépjen a Virtual Event Kithez, és görgessen lefelé a Namecheap megtalálásához.
A GitHub 1 éves domain név regisztrációt kínál a .me TLD-n, amelyet a Get Access opcióra kattintva érhet el.
3. lépés: A következő ablak arra kéri, hogy engedélyezze a Namecheap csatlakozási kérelmét a GitHub-fiókjához. Engedélyezze a Namecheap-et, és folytassa a következő lépéssel.
A sikeres engedélyezés után a következő üzenetet kell látnia: „Sikeresen igazoltuk diákcsomagját a GitHub segítségével”.
4. lépés: Keresse meg a kívánt domaint a keresősávon keresztül, és kattintson a Keresés gombra.
A következő képernyőn látnia kell a domain név elérhetőségét. Ha elérhető a domain neve, akkor ingyenesen megvásárolhatja.
5. lépés: Fizessen a GitHub Education e-mail címével, és a folytatás közben válassza ki a GitHub Pages tárhelyet.
Miután sikeresen regisztrálta egyéni domainnevét, és a GitHub oldalakat választotta tárhelyként, a Namecheapnek automatikusan létre kell hoznia egy adattárat a GitHub-fiókjában. Ez a tárhely teljesen üres, és csak egy README.md fájlt tartalmaz.
Ezt a tárat úgy érheti el, hogy bejelentkezik GitHub-fiókjába, és rákattint a „Saját adattárak” szakaszra. A GitHub Pages nem kínál vizuális eszközöket és előre elkészített témákat a webhelyéhez; manuálisan kell kódolnia a teljes webhelyet, és fel kell töltenie a kapcsolódó fájlokat az újonnan létrehozott GitHub-tárhelyre.
Hogyan készítsünk ingyenes webhelyet és tároljunk a GitHub oldalakon?
Ahogy fentebb említettük, létre kell hoznia a webhelyéhez kapcsolódó összes HTML, CSS és JavaScript fájlt. Ha Ön a Web Dev fejlesztője, és tudja, hogyan kell kódolnia magát, érdemes feltöltenie fájljait a GitHub-tárhelyére, és elindítani a webhelyet. Görgessen a cikk azon részéhez, amely a webhely kódjának GitHub oldalakra való feltöltésével foglalkozik.
De ha Ön olyan személy, akinek alig vagy egyáltalán nincs információja a Web Dev-ről, mi gondoskodunk róla. Használhatja az alábbi lépéseket, és megtervezheti saját webhelyét néhány alapvető HTML használatával:
1. lépés: Lépjen ide HTML5 UP és görgessen a kívánt webhelykialakításhoz. Bármelyik platformról bármilyen más előre elkészített témát választhat. Itt a „Massively”-t választottam a HTML5 UP-ból, de szabadon letölthet és testreszabhat bármilyen weboldalt, amelyet választott.
2. lépés: Csomagolja ki kedvenc webhelyének letöltött zip-fájlját.
A kibontott mappában látnia kell az index.html és generic.html nevű fájlokat, valamint mappákat, például eszközöket és képeket.
3. lépés: Most nyissa meg a kibontott fájlokat a Visual Studio Code segítségével, és válassza ki az index.html fájlt.
4. lépés: Töltse le és telepítse a „Live Server” bővítményt a Visual Studio Code-ban, ha még nem rendelkezik vele.
5. lépés: Válassza ki az index.html fájlt, kattintson a jobb egérgombbal, és válassza a „Megnyitás élő kiszolgálón” lehetőséget. Ezzel az opcióval valós időben jelenítheti meg a HTML-fájl változásait a böngészőben.
Hogyan szabhatod testre a weboldalad dizájnt?
A folyamatot ezen a ponton túl nem fogom a webhely testreszabásának „Lépések”-nek nevezni. A HTML-fájlok testreszabása teljes mértékben az Ön preferenciáitól függ, de a következőképpen szabtam testre a HTML5 UP „Tömegesen” dizájnt, és konvertáltam portfólióvá. Választhat, hogy ihletet merít ebből, vagy teljesen saját maga testreszabhatja webhelyét. Tiéd a választás!
A Cím és Bekezdés címkék módosítása
A testreszabási folyamatom elején megváltoztattam a címcímkét „Tömegesen”. A HTML-fájl címcímkéje határozza meg a nevét, miközben megnyitja a böngésző lapján. A Massively alapértelmezett címe a „Massively by HTML5 UP” legyen, és azt javaslom, hogy változtassa meg olyasmire, amelyre a webhelye hasonlít.
Megváltoztattam a címet a következőre: „Samyak Goswami | Tech Content Writer”, mivel ez ideálisan illett a portfóliómhoz. Következő lépésként megváltoztattam a webhely Intro szakaszát, amely ezt írta: „Ez tömegesen” (a H1 címkében található), és nyilvánvaló okokból „Samyak portfóliójává” tettem. Ezt követően az alábbi szöveget a bekezdéscímkékben a „Projektjeim és képességeim bemutatója”-ra változtattam.
Az indexfájlban a Navigáció (Nav) részhez lépve a Lista címkében található három navigációs gomb közül kettőt kihagytam. Egyoldalas weboldalt szerettem volna létrehozni, ahol minden részlet egyetlen oldalon található, de Ön szabadon módosíthatja a navigációs gombok számát választása szerint.
Később megváltoztattam a navigációs gomb „Ez tömegesen” szövegét „Saját cikkeim”-re.
A közösségi média hivatkozásainak és ikonjainak módosítása
Ezenkívül látnia kell a különféle közösségi média ikonokat az élő szerveren, például a Twitteren, a Facebookon, az Instagramon és a GitHubon. Úgy döntöttem, hogy kihagyom a Twittert és a Facebookot, és megtartom az Instagramot és a LinkedIn-t a használati esetemben.
Módosíthatja a közösségi média ikonjait és linkjeit, ha a Navigáció (Nav) részre lép, és görgessen a Twitter, Instagram és egyéb címkék listája lehetőséghez.
Figyelje meg, hogy ezekhez a közösségi média ikonokhoz nem kapcsolódnak hivatkozások, mivel a href címke üresen marad. A href címkéhez linkeket adhat hozzá, ha a „#” karaktert a kívánt hivatkozásra cseréli.
A kezdőlap tartalmának módosítása
Először megváltoztattam a H2 címkét, és azt tettem, hogy „A nevem Samyak Goswami”, majd ezt követően megváltoztattam a bekezdés címkét a „techn enthusiast…”-ra. Azt javaslom, hogy változtassa meg a H2 címkét olyasvalamire, ami megegyezik a kezdőlapja tartalmával és az azt magyarázó bekezdéscímkével.
Most a testreszabás legfontosabb részével állunk szemben; a cikklapok tartalmának módosítása.
Ehhez nyissa meg az indexfájl Bejegyzések szakaszát, és több kódrészletet kell látnia a cikkcímkékben. Hozzáadhat hivatkozásokat a történeteihez, ha módosítja a href szakaszt, ahogyan mi tettük, miközben a közösségi média ikonjaira mutató linkeket adtunk hozzá.
Később megváltoztathatja a cikkek nevét a H2 címkéken belüli tartalom módosításával. A bekezdéscímkével leírást is hozzáadhat a cikkekhez.
Ismételje meg a folyamatot minden cikknél linkek hozzáadásával, nevek megváltoztatásával és leírással az összes cikkhez.
Képek hozzáadása a webhelyekhez
Bizonyára észrevette, hogy az előnézet nagyon eltér a HTML5 UP webhelyen található képektől. Ennek oka a testreszabható fájlban lévő sík és unalmas fotók. Fűszerezzük weboldalunkat egyedi képekkel.
Eredeti képek
Ehhez navigáljon abba a mappába, ahová korábban kicsomagolta a „Massively” zip fájlt. Nyissa meg a kicsomagolt mappát, és lépjen a Képek mappába. Különböző képeket kell látnia: bg, pic01, pic02 és így tovább. Ezek a cikkeinkhez kapcsolódó képek a Cikk címkében.
Hozzáadhat egyéni képeket, és módosíthatja az indexfájlt ezeknek a képeknek a nevével, vagy hozzáadhatja a képeket, és az alapértelmezett képekhez hasonlóan nevezheti el őket. A képek azonos elnevezése megkímél minket a kód módosításától és sok időtől.
Módosított képek
Azt javaslom, olvassa le és módosítsa webhelye egyéb, nem fontos részeit. Íme a portfólió, amelyet a fent említett lépésekkel hoztam létre: samyakgoswami.me.
Hogyan töltheti fel webhelyének kódját a GitHub oldalakra?
Miután végre kódolta és megtervezte webhelyét, itt az ideje, hogy feltöltse a GitHub oldalakra, és elérhetővé tegye az interneten.
A következőképpen töltheti fel webhelyét a GitHub oldalakra:
1. lépés: Jelentkezzen be GitHub-fiókjába, és lépjen a Saját adattárak szakaszba.
2. lépés: Látnia kell egy your_username.github.io nevű tárolót. Lépjen be ebbe a tárolóba.
3. lépés: Látnia kell egy lehetőséget saját fájl létrehozására vagy fájlok feltöltésére a GitHub tárhelyre.
4. lépés: Válassza ki mind az öt fájlt és mappát; eszközök, képek, elemek, általános, index, és húzza őket a tárba.
A fájlok feltöltése után rögzítse a kódot, és várja meg, amíg a GitHub feldolgozza a fájlokat.
5. lépés: Keresse meg a Beállítások> GitHub oldalakat a webhely állapotának megtekintéséhez. Meg kell jelennie a „Webhelye az Ön_egyéni_domainjén” üzenet.
Most már felkeresheti webcímét, és saját maga is megkeresheti a webhelyet. Ne feledje, hogy a webhely kezdeti megjelenése eltarthat egy ideig.
Hogyan lehet engedélyezni az SSL titkosítást a GitHub oldalakon?
A HTTP egy nem biztonságos módja a felhasználói kérések kezelésének webhelyén. Bárki, aki rosszindulatú szándékkal és megbízható műszaki ismeretekkel rendelkezik, lehallgathatja a felhasználó és az Ön webhelye közötti interakciókat. Másrészt a HTTPS sokkal biztonságosabb böngészési munkamenetet biztosít minden látogatójának. A GitHub Pages ingyenes HTTPS-titkosítást kínál, és a következőképpen veheti igénybe:
Görgessen a tárhely Oldalak részéhez.
Az ablak végén látnia kell a „HTTPS kényszerítése” opciót. Az SSL-titkosításnak azonnal életbe kell lépnie, amint bejelöli a HTTPS kényszerítése jelölőnégyzetet.
Abban az esetben, ha úgy találja, hogy a HTTPS kényszerítése nem elérhető az Ön domainjében, az alábbi lépésekkel engedélyezheti az SSL-titkosítást:
1. lépés: Jelentkezzen be Namecheap fiókjába, és lépjen a „Domain List” szakaszba.
2. lépés: Most keresse meg a Domain kezelése, majd a „Speciális DNS” szakaszt.
Látnia kell néhány meglévő CNAME és A rekordot.
Adja hozzá a következő A rekordokat, amelyekben a gazdagép „@” és az IP-cím „185.199.108.153” lesz. A következő a „@” gazdagépnévvel és „185.199.109.153” IP-címmel.
Kövesse a trendet, amíg nem lesz 4 A rekordja a „185.199.111.153” IP-címig.
Távolítsa el az összes korábbi A rekordot.
3. lépés: Következő lépésként adjon hozzá egy CNAME-rekordot a Host névvel „www”-ként, és a Value értékét GitHub-felhasználónévként (pont) github (pont) ioként.
Távolítsa el a korábbi CNAME rekordokat. Végül a DNS-beállításokban 4 A rekordnak és 1 CNAME rekordnak kell lennie.
4. lépés: Most lépjen a GitHub oldalaira a Beállítások részben. A HTTPS kényszerítése opciónak mostantól elérhetőnek kell lennie az Ön domainjében.
Összegzés 👈
A GitHub fantasztikus lehetőséget ad minden diáknak egy ingyenes webhely létrehozására és kezelésére. Bár a GitHub Pages nem használható hatalmas forgalmi terhelések fogadására, a kisméretű statikus webhelyek minden jelölőnégyzetét bejelöli. Az ingyenes egyéni domain név, tárhely és SSL titkosítás még csodálatosabbá teszi.
Most olvashatja a „Hogyan válasszunk webhosztot új webhelyéhez” című részt.
Íme néhány oldalsebesség-figyelő eszköz, amelyek értesítik Önt, ha webhelye leáll.