A statikus webhelyek könnyen létrehozhatók, és rendkívül gyorsan használhatók. Ha megtanulja használni a Hugo-t, létrehozhat témaalapú statikus webhelyeket Linuxon. A weboldalkészítés ismét szórakoztató!
Tartalomjegyzék
A Hugo Weboldal generátor
A statikus webhely olyan webhely, amely nem hoz létre vagy módosít weboldalakat menet közben. Nincs háttéradatbázis, e-kereskedelmi feldolgozás vagy PHP. Az összes weboldal teljesen előre elkészített, és nagyon gyorsan kiszolgálható a látogatók számára.
De ez nem jelenti azt, hogy egy statikus webhelynek unalmasnak kell lennie. Mindent használhatnak, amit a HTML kínál, ráadásul lépcsőzetes stíluslapok (CSS), és JavaScript. Könnyen előfordulhatnak olyan dolgok is, mint a képkörhinta és a weboldalak, amelyek a háttérképek fölé csúsztathatók.
A Hugo webhelygenerátor egy sablonnal és az Ön által létrehozott bármely tartalommal működik egy kész webhely létrehozásához. Ezután elhelyezheti egy tárhelyplatformon, és azonnal létrehozhat egy élő webhelyet.
Hugo használja árleszállítás az Ön által létrehozott oldalakhoz és blogbejegyzésekhez. A Markdown a létező legegyszerűbb jelölőnyelv, amely egyszerűvé teszi a webhely karbantartását.
Hugo konfigurációs fájljai megvannak Tom nyilvánvaló, minimális nyelve (TOML) és A YAML nem jelölőnyelv (YAML), amelyek ugyanolyan egyszerűek. Egy másik bónusz, hogy a Hugo hihetetlenül gyors – egyes oldalak kevesebb mint egy másodperc alatt betöltődnek. Számos sablon közül választhat, és folyamatosan újabbak kerülnek hozzáadásra, így könnyű elkezdeni. Csak válasszon egy sablont, és adjon hozzá olyan tartalmat, amely az Öné teszi.
A Hugo egy apró webszerverként is működik közvetlenül a számítógépén. Megtekintheti webhelyének élő verzióját, miközben megtervezi és létrehozza, valamint amikor új bejegyzést ad hozzá. Ezenkívül automatikusan frissül minden alkalommal, amikor a szerkesztőben „Mentés”, így azonnal láthatja a módosítások hatását a böngészőben.
Webhelyének tárolása
Ha statikus webhelyének tárhelyéről van szó, kényeztetheti magát. A legtöbb cég ingyenes tárhelyet kínál személyes vagy nyílt forráskódú használatra. Természetesen választhat egy normál webtárhely céget is, például az alábbiak bármelyikét:
Műrepülő
Amazon S3
Égszínkék
CloudFront
DreamHost
Firebase
GitHub oldalak
Hajrá apa
Google Cloud Storage
Heroku
GitLab oldalak
Netlify
Rackspace
Túlfeszültség
Hugo telepítése
A Hugo mellett telepíteni kell a Git-et is. A Git már telepítve volt a Fedora 32-re és a Manjaro 20.0.1-re. Az Ubuntu 20.04-en (Focal Fossa) automatikusan hozzáadásra került a Hugo függőjeként.
A Hugo Ubuntu telepítéséhez használja ezt a parancsot:
sudo apt-get install hugo
Fedorán a következőket kell beírnia:
sudo dnf install hugo
A Manjaro parancsa a következő:
sudo pacman -Syu hugo
Weboldal készítés Hugoval
Amikor megkérjük Hugo-t, hogy készítsen egy új oldalt, akkor létrehoz egy sor könyvtárat számunkra. Ezek tartalmazzák majd weboldalunk különböző elemeit. Ez azonban nem az utolsó webhely, amely feltöltésre kerül a tárhely platformjára. Ezek a könyvtárak tartalmazzák a témát, a konfigurációs fájlokat, a tartalmat és a képeket, amelyeket a Hugo bemenetként fog használni, amikor megkérjük a webhely létrehozására.
Ez olyan, mint a különbség a forráskód és a lefordított program között. A forráskód az az anyag, amelyet a fordító a végtermék előállításához használ. Hasonlóképpen, a Hugo átveszi ezeknek a könyvtáraknak a tartalmát, és létrehoz egy működő webhelyet.
A futtatni kívánt parancs létrehoz egy könyvtárat, amelynek neve megegyezik a létrehozni kívánt webhelyével. Ez a könyvtár abban a könyvtárban jön létre, amelyben a parancsot futtatja.
Tehát lépjen abba a könyvtárba, amelyben létre szeretné hozni webhelyét. A saját könyvtárunkat használjuk, ezért a következőket írjuk be:
hugo new site geek-demo
Ez létrehoz egy „geek-demo” könyvtárat. A következőt írjuk be, hogy átváltsunk ebbe a könyvtárba, és futtassuk az ls-t:
cd geek-demo/
ls
Látjuk a „config.toml” konfigurációs fájlt és a létrehozott könyvtárakat. Ezek azonban gyakorlatilag üresek, mivel ez csak az állványzata a webhelynek.
A Git inicializálása és egy téma hozzáadása
Hozzá kell adnunk egy témát, hogy Hugo tudja, milyennek akarjuk kinézni a kész oldalt. Ehhez inicializálnunk kell a Git-et. A webhely gyökérmappájában (amely a „config.toml” fájlt tartalmazza) futtassa ezt a parancsot:
git init
Vannak több száz téma közül választhat, és mindegyikhez tartozik egy weboldal, amely leírja. Futtathat egy témát bemutató bemutatót, és megtudhatja, mi a letöltési parancs. Használjuk az egyik Meghna.
Ahhoz, hogy ezt a témát beépítsük webhelyünkbe, át kell váltanunk a „Témák” mappába, és futtassa a git clone parancsot:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
A Git előrehaladtával megjelenít néhány üzenetet. Ha kész, az ls-t használjuk a témát tartalmazó könyvtár megtekintéséhez:
ls
A Hugo témák közé tartozik egy működő példawebhely is. Az alapértelmezett webhelyet be kell másolnia webhelye könyvtáraiba.
Először térjen vissza webhelye gyökérkönyvtárába. Az -r (rekurzív) cp opciót használjuk az alkönyvtárak felvételére, az -f (force) opciót pedig a meglévő fájlok felülírására:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Webhelyének helyi elindítása
Eleget tettünk egy új webhely helyben történő elindításához. Továbbra is tartalmazni fogja a helyőrző szöveget és képeket, de ezek csupán kozmetikai változtatások. Először ellenőrizzük a műszaki elemek működését.
Azt mondjuk a Hugónak, hogy futtassa a webszerverét, és használja a -D (piszkozat) opciót, hogy megbizonyosodjon arról, hogy a „draft” címkével ellátott fájlok szerepelnek a webhelyen:
hugo server -D
Az alábbi kép a hugo parancs kimenetét mutatja.
Azt mondták, hogy Hugo 142 ezredmásodperc alatt építette fel az oldalt (mi azt mondtuk, hogy gyors, igaz?). Azt is mondja, hogy a Ctrl+C billentyűkombinációt le kell nyomni a szerver leállításához, de egyelőre hagyjuk futni.
Nyissa meg a böngészőt, és lépjen a localhost:1313 oldalra a webhely megtekintéséhez.
Az alapértelmezett webhelytartalom módosítása
Amíg ez így működik, a Hugo memóriából szolgálja ki a weboldalakat. Nem a webhelyet hozta létre a merevlemezen, hanem egy működő másolatot a RAM-ban. Ennek ellenére figyeli a merevlemezen lévő fájlokat és képeket. Ha bármelyik módosul, az frissíti a webhelyet a böngészőben – még csak a Ctrl+F5 billentyűkombinációt sem kell lenyomnia.
Nyisson meg egy másik terminálablakot, és keresse meg webhelye gyökérkönyvtárát. Nyissa meg a „config.toml” fájlt egy szerkesztőben. Módosítsa az „alap URL-t” arra a domainre, amelyen webhelyét tárolni fogja, és módosítsa a „címet” a webhely nevére. Mentse el a változtatásokat, de hagyja nyitva a szerkesztőt.
A Hugo észleli, hogy változások történtek a „config.toml” fájlban, ezért ezeket beolvassa, újraépíti a webhelyet, és frissíti a böngészőt.
Most már látnia kell a webhelyéhez választott nevet a böngésző lapon. Azonnali vizuális visszajelzés a mentett változtatásokról jelentősen felgyorsítja a webhely testreszabásának folyamatát.
Minden téma más, de azt találtuk, hogy azokat, amelyeket régebben nagyon egyszerűen követtünk. A webhely különböző részeinek egyértelmű elnevezése van, csakúgy, mint az egyes szakaszok beállításainak, így mindig nyilvánvaló, hogy mit módosít.
És ismételten, amint elmenti a módosítást, a böngészőjében láthatja, hogy mit módosított. Ha nem tetszik, fordítsa meg a változtatást, és mentse újra.
A webhelyet vezérlő különféle konfigurációs fájlok egy-egy feladathoz vannak dedikálva, és értelmes módon vannak megcímkézve. A nyomon követés nem nehéz, mivel nem túl sok helyen lehetnek a címtárban. Általában az „Adatok” mappában vannak.
Mivel kétnyelvű sablont használunk, az angol konfigurációs fájljaink az „En” alkönyvtárban találhatók.
Ha egy szerkesztőben megnyitja az Adatok > En > banner.yml fájlt, megjelenik a webhely szalaghirdetés-területét szabályozó beállítások gyűjteménye.
Ha módosítja a „Cím” és a „Tartalom” beállítását, módosítja a szöveget a szalaghirdetés oldalon.
Módosítottuk a „Címke” beállítást is, így a gomb szövege a „További információ” feliratot jelzi. A webhelyén valószínűleg a képet is módosítani szeretné.
Amint elmenti a módosításokat, azonnal megjelennek a böngészőjében.
A webhely egyéb elemeinek megváltoztatása
Az összes többi elemet hasonló módon módosíthatja. Csak keresse meg a megfelelő konfigurációs fájlt, és módosítsa a beállításokat és a szöveget az igényeinek megfelelően.
A képeket is módosítani kell. Az alapértelmezett képre hivatkozik a konfigurációs fájl. Könnyedén megtalálhatja és megnézheti az eredeti képet, hogy lássa, mik a méretei.
A képek a „Statikus > Képek” könyvtárba kerülnek, ahol alkönyvtárak találhatók a webhely különböző részeihez. Helyezze el a kedvenc ikonokat és logókat közvetlenül a „Statikus > Képek” könyvtárba.
Új blogtartalom hozzáadása
Eddig arra törekedtünk, hogy megváltoztassuk a már meglévőket. De hogyan adjunk hozzá új blogbejegyzést? Hugo az „Archetípusok” elnevezésű koncepciót használja új tartalom létrehozására. Ha nem hozunk létre archetípust a blogbejegyzéseinkhez, egy alapértelmezett fájl jön létre minden alkalommal, amikor megkérjük Hugót, hogy hozzon létre új blogbejegyzést.
Ez rendben van, de egy archetípussal megspórolhatunk némi erőfeszítést, és gondoskodhatunk arról, hogy az elülső anyagokból a lehető legtöbbet előre beírjuk.
Ebben a témában a blogbejegyzések a Tartalom > Angol > Blog menüpontban találhatók. Ha megnyitunk egy meglévő blogbejegyzést egy szerkesztőben – például a „simple-blog-post-1.md” –, akkor láthatjuk a lényeget.
Másolnunk kell ezt a részt, módosítanunk kell az aktuális bejegyzéseket, hogy archetípussablonként lehessen használni, majd el kell mentenünk az „Archetypes” mappába. Ha „blog.md”-nek nevezzük el, akkor automatikusan az új blogbejegyzések sablonjaként lesz használva.
A geditben ezt a következőképpen tehetjük meg:
gedit content/english/blog/simple-blog-post-1.md
Jelölje ki a felső részt a két szaggatott vonallal, majd nyomja le a Ctrl+C billentyűkombinációt a másolásához. Nyomja meg a Ctrl+N billentyűkombinációt új fájl indításához, majd a Ctrl+V billentyűkombinációt a másolt adatok beillesztéséhez.
Most hajtsa végre a következő módosításokat, és minden sorban hagyjon szóközt a kettőspont (:) után:
Cím: Módosítsa ezt a következőre: „{{ cserélje ki a .Name „-” ” ” | cím }}” (az idézőjelek között). Minden új blogbejegyzés címe automatikusan beszúrásra kerül. A hugo new parancsnak átadott fájlnévből jön létre, amint látni fogjuk.
Dátum: módosítsa ezt a következőre: {{ .Date }}. A blog létrehozásának dátuma és időpontja automatikusan beírásra kerül.
Image_webp: Ez a blog fejlécképének elérési útja webp formátumban. Ha a téma nem talál ilyet, akkor a következő sor képét fogja használni.
kép: Ez a blog fejlécképének elérési útja JPEG formátumban. Hagyja ezeket az alapértelmezett képekre mutatva. Ezután az összes blogbejegyzésen lesz egy stop-gap kép, még azelőtt is, hogy megtalálja, átméretezi vagy elmenti egy egyénit. Ha ezt megtette, könnyen szerkesztheti a fájl nevét, hogy az megfeleljen az egyéni képének.
Szerző: Módosítsa ezt a saját nevére.
Leírás: Ide írja be az egyes bejegyzések rövid leírását. Ha ezt üres karakterláncra („”) módosítja, minden új bloghoz beírhat leírást anélkül, hogy szerkesztenie kellene a régi szöveget.
Mentse ezt az új fájlt „archetypes/blog.md” néven, majd zárja be a gedit-et. Hugo mostantól ezt az új archetípust fogja használni, amikor új blogbejegyzést szeretne létrehozni.
Ne feledje, hogy a fájlunknak „.md” kiterjesztéssel kell rendelkeznie, mert a blogbejegyzés írásához markdownt használunk:
hugo new blog/first-new-blog-post-on-this-site.md
Most egy szerkesztőben szeretnénk megnyitni új blogbejegyzésünket:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Új blogbejegyzésünk a geditben nyílik meg.
Az elülső anyag alábbi részei mindegyike hozzáadásra került számunkra:
Cím: Ez a fájlnévből következett. Ha módosításra van szüksége, itt szerkesztheti.
Idő és dátum: Ezek automatikusan hozzáadódnak.
Alapértelmezett kép: Valószínűleg egy releváns, jogdíjmentes képet szeretne találni. Dobja be a Statikus > Képek > Blogba. Ide kell beírnia a kép tényleges fájlnevét.
Szerző: A rendszer automatikusan hozzáadja a nevét.
Leírás: Ezt szerkesztették.
Írja meg a blogot a markdown használatával, és használja a szabványos jelölést a címsorokhoz, félkövér, dőlt betűhöz, képekhez, hivatkozásokhoz stb. Minden alkalommal, amikor elmenti a fájlt, a Hugo újraépíti a webhelyet, és frissíti a böngészőjében.
Az alábbi képen látható, hogyan jelenik meg új blogbejegyzésünk a kezdőlapon.
Az alábbi képen látható, hogyan néz ki az új blogbejegyzés a saját oldalán.
Miután befejezte a blogbejegyzés megírását, mentse a módosításokat, majd zárja be a szerkesztőt. Be is zárhatja a böngészőt, mert leállítjuk a Hugo szervert.
Abban a terminálablakban, amelyben a Hugo szerver fut, nyomja meg a Ctrl+C billentyűkombinációt.
A Weboldal építése
Webhelye gyökérkönyvtárában adja ki a következő parancsot a webhely létrehozásához:
hugo
A Hugo elkészíti a webhelyet, és felsorolja az általa létrehozott oldalak és egyéb összetevők számát. 134 ezredmásodpercig tartott a miénk létrehozása.
Hugo létrehoz egy új könyvtárat „Public” néven a webhelye gyökérkönyvtárában. A „Public” könyvtárban megtalálja az összes fájlt, amelyet át kell vinnie a tárhely platformjára.
Vegye figyelembe, hogy a „Nyilvános” könyvtárban lévő fájlokat és könyvtárakat kell feltöltenie a tárhely platformra, nem magát a „Public” könyvtárat.
Most már ismeri az alapokat
Mindegyik témához egy kis felfedezés szükséges, hogy kitaláljuk, hogyan lehet úgy kinézni, ahogyan szeretnéd, de ez a szórakoztató rész! Tekintettel arra, hogy Hugo képes a változásokat azonnal megjeleníteni a böngészőablakban, semmi sem tart túl sokáig.
Valószínűleg azt fogja tapasztalni, hogy a szöveg írása, valamint a képek keresése és kivágása a folyamat leghosszabb ideig tartó része.
A Hugo dokumentációs oldal is hasznos, de kiterjedt. Remélhetőleg ez az alapvető áttekintés elegendő lesz a kezdéshez.
Ha a Git és Github, GitLab, vagy BitBucket, ezekhez a platformokhoz is elérhetők integrációk. Figyelik távoli Hugo adattárát, és újjáépítik az élő webhelyet, amikor módosításokat hajt végre rajta.