Hogyan építsünk egy blogot a jekyll-vel

Sep 16, 2025

kézikönyv

(Kép hitel: NET)

Ez a bemutató azoknak az embereknek szól, akik hallottak a statikus helyszínen generátorokról, és úgy döntöttek, hogy meg akarják menni a saját webhelyének építésére. Itt fogunk mutatni A blog elindítása Jekyll használatával.

A terminál alapvető ismerete jó, bár képesnek kell lennie arra, hogy kövesse, miközben a parancsok meglehetősen egyszerűek. A Github oldalakon található webhelyek a Jekyll a jelenetek mögött működnek, így ha a Github oldalakkal együtt használják, akkor létrehoz egy módot a webhelyének ingyen fogadására és kezelésére (lásd a legjobb listát web hosting Szolgáltatások más opciókhoz, vagy nézd meg a listát, ha egy másik típusú lenne weboldal építője ).

Ez a bemutató feltételezi, hogy Mac-en van; Ahogy Jekyll egy rubin program, futtatható az ablakokon, de nem hivatalosan támogatott. Ha követi az ablakokat, hop itt Segítsen a Ruby felállításához.

A bemutató befejezése után létrehozott egy Jekyll blogot, és megtudta, hogy a funkciók és a sablonnyan nyelv képesek létrehozni egy személyes blogot. Ez egy nagyszerű kiindulási pont a saját webhelyének fejlesztéséhez. És ne feledje, ha sok design ötlete vagy médiafájlja van, győződjön meg róla, hogy biztonságosan tartja őket a legjobban felhő tároló .

Keresse meg a tutorial fájlokat itt .

10 legjobb statikus site generátorok

01. Felkészülés

Mac-en az alapértelmezés szerint Ruby kell telepíteni, de ellenőrizze a gépeléssel rubin -v a terminálon.

Most már a webhelyen futó Jekyll-t kaphatjuk, győződjön meg róla, hogy a könyvtárban van, amelyet a webhelyére épít, és egyszerűen írja be Gem Telepítse Jekyll Bundler-t ; A számítógép akkor megy, és megragadja a webhely futtatásához szükséges függőséget.

02. Tálaljuk helyben vagy építsenek

Két fő parancs van, amit Jekyll-vel fog használni - szolgál és épít . A webhely helyben történő futtatásához jekyll szolgálat A parancssorban. Ez a http://127.0.0.1:4000 verziót futtatja, hogy megtekintheti a módosításokat. Ha már rendelkezik drágaköve és más függősége a gépen, akkor ez a parancs nem sikerül a függőségi változatok eltérése miatt; Ebben az esetben próbálja meg Bundle Exec Jekyll szolgálja helyette. Ugyanaz, de a szóval épít csak összeállítja az oldalt.

03. Szerezd meg az indítófájlokat

Másolja az e-mailben megadott fájlokat ezen a ponton, hogy alapot adjon a munkához. Ez honlapot, bloglistát, részletes oldalt és az eszközök szerkezetét adja nekünk. Frissítse oldalát a http://127.0.0.1:4000 címen, és látni fogja, hogy most már van néhány alapvető oldala. Gyors áttekintést kapjunk arról, hogy a Jekyll oldal működik.

A Jekyll oldal könnyen követhető módon strukturálódik. Bármilyen gyűjteményt (típusú hozzászólásokat) saját mappájában tartanak, mint az elrendezések és tartalmazzák. Meg fogja venni a "_site" mappát - ez az a mappa, amelyet a jekyll használ a jekyll épít parancs.

Generate CSS — Csatlakozzon hozzánk Londonban szeptember 26-án CSS generálására - kattintson a kép lefoglalására (Kép hitel: jövő)

04. Konfiguráció

Build a blog with Jekyll: Configuration — Jekyll nagyszerű struktúrát ad a munkához és egy könnyen kezelhető konfigurációs fájlhoz (Kép hitel: NET)

Nyitott _config.yml a szövegszerkesztőben, és adja hozzá saját adatait; Az egyik legfontosabb terület az alap URL-jének beállítása. Ez a mappa, hogy a webhely betöltése. A konfigurációs fájl hasonlít a Global Options kombinálva a wp-config fájlt, ha építettek ki a WordPress téma.

Az alapvető információkat, például a címeket és a meta leírásait, az e-maileket és a szociális fiókokat, majd az összes információt, amelyet a webhelynek össze kell állnia, például gyűjteményeket és bármilyen használt bővítményeket. HTML-t és jelzőlapot használhat az oldalakhoz, attól függően, hogy mit akarsz elérni. Azonban az egyedi oldalak, például a kezdőlap és a lista oldalai általában HTML, míg a beállított sablont használó bejegyzések és egyéb általános oldalak jelek lesznek.

05. Első anyag

Az elülső anyag egy fájl tetején YAML. Jekyll használja a változók tartására. Nézd meg az About.md fájlt, és láthatjuk, hogy beállítottuk a címet, amely az elrendezést használja, a szerző és a kapcsolódó képek.

06. folyékony címkék

Build a blog with Jekyll: Liquid tags — A folyékony címkék egyszerű módja a sablonokkal való munkához, és a vásárlási témákban is használják (Kép hitel: NET)

A Jekyll folyadékot használ - olyan sablonnyan, amely objektumokat, címkéket és szűrőket használ. A tárgy kettős zárójelekkel körülvéve {{}} Az elülső anyagváltozók és a zárójel és a logika százalékos jele {%%} .

07. Építsd meg a navigációt

A statikus navigáció helyett a Config fájlok erejét használjuk a tartalom elválasztásához a sablonból. A "Data" mappában lévő navigációs elemeket konfigurációs fájlként fogjuk tartani, majd a navigáción keresztül hurok. Csak beírhatjuk, hogy bármilyen oldalt és linkeket szeretnénk előre haladni anélkül, hogy visszatérünk a sablonhoz. Győződjön meg róla, hogy igazán óvatos a szóköz, amikor szerkeszti a konfigurációs fájlokat, például a navigációt.iml vagy az elülső anyag egy bejegyzés elején, mert a kóbor tér hibát okoz.

A Config fájl már be van állítva, így adja meg a következő kódot a "Navigation.html" fájlban:

 {% az elem a site.data.Navigation%}
     & lt; egy href = "{{site.baseurl}} / {{item.link}}" {% if page.url == item.link%} osztály = "aktuális" {% endif%} & gt; {{elem .name}}} & lt; / a & gt;
   {% endfor%}

Folyékony logikai címkéket használunk, hogy megnézzük a navigációs konfigurációs fájlt, és hurokozzon ki egy linket és nevet minden bejegyzéshez, alapvetően csak egy szabvány a hurok számára.

08. Hozzon létre egy kezdőlapot

A honlapunkon felsoroljuk a legújabb blogbejegyzést, mint hősünket, majd van egy részlet a mi oldalról az oldalról egy linkre. Kezdjük a hősblokkgal. Nyissa meg az index.html, majd adja hozzá a következő kódot:

 {% hozzárendelés post = site.posts.first%}
& lt; div osztály = "C-hős" style = "Háttér: URL ({poszt.thumbnail_image.large | relative_URL}}) alsó középpont / borító nem ismétlés;" & gt;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | Markdowny}}}
   & lt; egy href = "{{Post.url}}" osztály = "btn - hős" & gt; Olvassa el a teljes bejegyzést & lt; / a & gt;
& lt; / div & gt;

Látni fogja, hogy először hozzárendeljük a legújabb bejegyzést, majd hivatkozunk a hozzászólás elülső pillanatában beállított miniatűrképre. A Post Intro folyadékszűrőt használ jelez A jeldown átalakítása HTML-re.

Ezzel a helyén, adjunk hozzá egy teaseret az oldalról is. Adja hozzá a következőket:

 & lt; div osztály = "C-funkció" & gt;
   {% for site.pages%}
       {%, ha oldal.url == '/About.html'%}
           & lt; img src = "{{page.profile_image.small}}" alt = "profie kép" class = "c-feature__image" / & gt;
           & lt; div osztály = "C-feature__Text" & gt;
               & lt; h2 & gt; egy href = "{{oldal.url}}" & gt; {{page.title}} & lt; / a & gt; / h2 & gt;
               & lt; p & gt; {{Page.Intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% endif%}
   {% endfor%}
& lt; / div & gt;

Ezúttal a -ért hurok, hogy ellenőrizze az oldalakon található oldalakat. Használjuk oldal.url Az oldal kiszűrése, majd hasonló sablonos stílust használunk a hősnek az oldalak információinak kiutalásához.

09. Bloglista

Build a blog with Jekyll: Blog list — Egy egyszerű kártya elrendezés a helyszíni bejegyzések többi részében, amely CSS-rácsot és flexboxot használ (Kép hitel: NET)

A honlap létrehozásával mozoghatunk a bloglista oldalra. A lista oldal létrehozásához ismét folyadékcímkéket használunk, hogy a logikát a "postai" mappában található összes fájlon keresztül hurkot adjunk.

A hős azért történik, mert ugyanazt a folyamatot követi, mint a honlap. A hős alatt a "blog.html", adja hozzá a következőket:

& lt; div osztály = "Korlátozás" & gt;
   & lt; h1 & gt; a legjobb a többi közül & lt; / h1 & gt;
   & lt; szekció osztály = "kártya-lista" & gt;
           {% post a site.posts offset: 1%}
           & lt; div osztály = "kártya" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div osztály = "kártya-részletek" & gt;
                   & lt; h3 & gt; {{Post.Date | Dátum: "% D% B"}} - {{post.title}} & lt; / h3 & gt;
               & lt; egy href = "{{poszt.url}}" osztály = "btn" & gt; Olvass tovább & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endfor%}
          
   & lt; / szekció & gt;
& lt; / div & gt;

Ismét használjuk a -ért hurok, hogy átmegy a bejegyzések gyűjteményén. De mivel már hódítottunk ki a hősök legújabbak, ellensúlyoztuk ezt a hurkot, hogy elkezdhessük a kettőt. A folyadékszűrőt a dátum konvertálására használják a választásunk formátumára.

10. Blog Detail oldal

Nem sokáig megy most: Majdnem minden alapvető elemünk együtt van. Az egyik fontos szempont a címre a navigáció. Amikor egy blogot olvasol, szükség van egy módja annak, hogy kerékpározzon, és többet olvasson. Adhatunk hozzá néhány szép pagolást webhelyünkhöz egy oldalváltozó segítségével. Nyissa meg a Post.html-t az Elrendezések mappában, és adja hozzá a következőket:

 & lt; div osztály = "C-pagination" & gt;
   {%, ha az oldal.PRevious%}
   & lt; div & gt;
       & lt; h3 & gt; előző & lt; / h3 & gt;
       & lt; p & gt; {{page.previous.title}}} & lt; / p & gt;
       & lt; p & gt; egy osztály = "btn" href = "{{site.baseurl}} {{page.previous.url}}" & gt; Olvassa el a hozzászólást, & lt; / a & gt; / p & gt;
   & lt; / div & gt;
   {% endif%}
   {%, ha oldal.Next%}
   & lt; div & gt;
       & lt; h3 & gt; fel a következő & lt; / h3 & gt;
       & lt; p & gt; {{page.next.title}}} & lt; / p & gt;
       & lt; p & gt; egy osztály = "btn" href = "{{site.baseurl}} {{page.next.url}}" & gt; Olvassa el a bejegyzést & lt; / a & gt; & lt; / p & gt;
   & lt; / div & gt;
   {% endif%}
& lt; / div & gt;

A Oldal.Previous és oldal.Next Változók ellenőrizni, hogy van-e hozzászólás, hogy kattintson a. Ha van, akkor adhatunk ki egy blokkot, és tartalmazhatunk a cím címét és linkjét.

11. Építsen és tegye közzé

A Github oldalak a SASS fájlokat adják nekünk, így amikor futsz jekyll épít Az összeállított fájlok a _SITE mappában jönnek létre. Nincsenek Gulp fájlok vagy webepack itt, csak szép sovány stílusok! A SASS kimenetet akár a webhely fő config.yml fájljába is bocsáthatja. A könyvtár tartalma átvihető a kiválasztott tárhelyre. Az egyik dolog, hogy tisztában legyen azzal, hogy a Github oldalak valójában támogatják a jekyll-et, így a forrásként építhetnek és fogadhatnak egy webhelyet a forrásként. További információt talál erről itt .

Ezt a cikket eredetileg a 320. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon 320 kérdést itt vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

Építsen egy blogot a rács és a flexbox segítségével
A legjobb ingyenes blogoló platformok
Hogyan építsünk egy blogolási helyet a Gatsby-vel

Hogyan építsünk egy blogot a jekyll-vel

01. Felkészülés

02. Tálaljuk helyben vagy építsenek

03. Szerezd meg az indítófájlokat

04. Konfiguráció

05. Első anyag

06. folyékony címkék

07. Építsd meg a navigációt

08. Hozzon létre egy kezdőlapot

09. Bloglista

10. Blog Detail oldal

11. Építsen és tegye közzé

kézikönyv - Most Popular Articles

Hogyan lehet egyszerűsíteni a keverék alakzatát Mayában

Terep építése Houdini 17

SVG sokszögek létrehozása és animálása

Hogyan készítsünk üvegeket az akvarellal

Hogyan kell felhívni az Affinity Photo az iPad

Hozzon létre egy portálhatást Maya-ban

Hogyan tervezzen egy könyvborítót az InDesign-ben

Hogyan hozzunk létre egy élénk tündér királynőt

Kategóriák