Jak zbudować blog z Jekyll

Sep 16, 2025

Jak

(Kredyt obrazu: Net)

Ten samouczek jest dla osób, które słyszeli o generatorach witryn statycznych i zdecydowali, że chcą iść na budowę własnej strony za pomocą jednego. Tutaj będziemy cię pokazać Jak uruchomić blog za pomocą Jekyll.

Podstawowa znajomość terminalu jest dobra, chociaż powinieneś być w stanie śledzić, ponieważ polecenia są sprawiedliwe dość proste. Witryny na stronach Githuba są zasilane przez Jekyll za kulisami, więc gdy używany wraz z stronami Github tworzy sposób na hostowanie i zarządzanie witryną za darmo (zobacz naszą listę najlepszych hosting Usługi dla innych opcji lub zobacz naszą listę, jeśli chcesz inny typ Kreator strony internetowej ).

Ten samouczek zakłada, że jesteś na komputerze Mac; Jako Jekyll jest programem Ruby, możliwe jest uruchomienie go w systemie Windows, ale nie jest oficjalnie obsługiwany. Jeśli podążasz dalej w oknach, Wskocz tutaj Aby pomóc zdobyć Ruby Set Up.

Po zakończeniu tego samouczka utworzysz blog Jekyll i dowiedziałeś się, jak jego funkcje i język szablowania mogą zbudować osobisty blog. Jest to świetny punkt wyjścia do opracowania własnej witryny. I pamiętaj, jeśli masz wiele pomysłów na projekt lub pliki multimedialne, pamiętaj, aby utrzymać je bezpiecznie w najlepszych magazyn w chmurze .

Znajdź pliki do tego samouczka tutaj .

10 najlepszych statycznych generatorów witryn

01. Skonfiguruj

Na komputerze Mac powinieneś mieć ruby domyślnie, ale sprawdźmy, wpisując ruby -v. W terminalu.

Teraz możemy szybko uruchomić Jekyll w witrynie, upewnij się, że jesteś w katalogu, który chcesz zbudować swoją witrynę i po prostu wpisać Gem Zainstaluj Jekyll Bundler ; Twój komputer będzie następnie pójdzie i chwycić wszystkie zależności potrzebne do uruchomienia witryny.

02. Podawać lokalnie lub budować

Istnieją dwa główne polecenia, których będziesz używać z Jekyll - obsługiwać i budować . Aby uruchomić stronę lokalną Jekyll Serve. W wierszu poleceń. Spowoduje to uruchomienie wersji na stronie http://127.0.0.1:4000, które możesz wyświetlić podgląd zmian. Jeśli masz już klejnot i inne zależności zainstalowane na komputerze, to polecenie może zawieść z powodu niedopasowania w wersjach zależności; W takim przypadku spróbuj Pakiet Exec Jekyll Serve zamiast. Bieganie tak samo, ale ze słowem budować po prostu kompiluje stronę.

03. Uzyskaj pliki rozrusznika

Skopiuj pliki dostarczone w tym samouczku w tym momencie, aby dać ci podstawę do pracy. Daje nam główną stronę główną, listę blogów, stroną szczegółową i strukturę aktywów dla witryny. Odśwież stronę pod adresem http://127.0.0.1:4000, a zobaczysz teraz kilka podstawowych stron do budowy. Przeglądajmy szybki przegląd tego, jak działa strona Jekyll.

Strona Jekyll jest ustrużona w sposób łatwy do śledzenia. Wszelkie kolekcje (typy postów) są przechowywane we własnym folderze, podobnie jak układy i obejmuje. Zauważysz folder "_site" - jest to folder, który używa Jekyll podczas prowadzenia Jekyll Build. Komenda.

Generate CSS — Dołącz do nas w Londynie 26 września do generowania CSS - kliknij obraz, aby zarezerwować bilet (Kredyt obrazu: przyszłość)

04. Konfiguracja

Build a blog with Jekyll: Configuration — Jekyll zapewnia doskonałą strukturę do pracy oraz łatwy do zarządzania plikiem konfiguracyjnym (Kredyt obrazu: Net)

Otwórz _Config.yml w edytorze tekstu i dodaj własne szczegóły; Jeden kluczowy obszar do sprawdzenia jest ustawienie adresu URL podstawowego. Jest to folder, w którym witryna jest ładowana. Plik konfiguracyjny jest podobny do korzystania z opcji globalnych w połączeniu z plikiem WP-CONFIG, jeśli wyluzowałeś motyw WordPress.

Możesz kontrolować podstawowe informacje, takie jak tytuły i opisy meta, Twoje dane e-mail i konta społeczne, a następnie wszystkie informacje, których strona musi skompilować takie jak kolekcje i używane wtyczki. Możesz użyć mieszanki HTML i Markdown dla stron, w zależności od tego, co chcesz osiągnąć. Jednak niestandardowe strony, takie jak strony główna i stron, na ogół znajdują się HTML, podczas gdy posty i inne strony ogólne, które korzystają z zestawu szablonu.

05. Przednia materia

Przednia materia jest fragmentem YAML na górze pliku. Jekyll używa go do trzymania zmiennych. Spójrz na plik About.md i widać, że ustawiamy tytuł, który układ używa, autora i wszelkie powiązane obrazy.

06. Tagi płynne.

Build a blog with Jekyll: Liquid tags — Tagi płynne oferują łatwy sposób na pracę z szablonami i są również używane w motywach Shopify (Kredyt obrazu: Net)

Jekyll używa płynu - język szablowania, który korzysta z obiektów, znaczników i filtrów. Używamy obiekt Tag otoczony podwójnymi szelkami {{}} Aby wyjść zmiennych z przodu i klamry i znak procentowy dla logiki {%%} .

07. Zbuduj nawigację

Zamiast nawigacji statycznej, używamy mocy plików konfiguracyjnych, aby oddzielić zawartość z szablonu. Trzymamy elementy nawigacyjne w folderze "Data" jako plik konfiguracyjny, a następnie pętla przez nich w nawigacji.html. Możemy wystarczyć dowolne strony i linki, które chcemy, aby przejść do przodu bez powrotu do szablonu. Upewnij się, że jesteś naprawdę ostrożny z białymi znakami podczas edycji plików konfiguracyjnych, takich jak nawigacja

Plik konfiguracyjny jest już ustawiony, więc wprowadź następujący kod w "nawigacja.html", obejmują plik:

 {% dla pozycji w miejscu.data.navigation%}
     & lt; a href = "{{strona .name}} & LT; / A & GT;
   {% ENDOR%}

Używamy płynnych tagów logicznych, aby spojrzeć w pliku konfiguracyjnego nawigacji i zapętlić łącze i nazwę każdego wpisu, w zasadzie tylko standardowy dla pętli.

08. Utwórz stronę główną

Na naszej stronie głównej zamierzamy wymienić nasz najnowszy post na blogu jako bohater, a następnie mieć fragment z naszej strony z linkiem. Zacznijmy od bloku bohatera. Otwórz index.html, a następnie dodaj następujący kod:

 {% przypisać post = site.posts.first%}
& LT; Div Class = "C-Hero" Style = "Tło: URL ({{post.thumbnail_IMAGE.LARGE | Religive_url}}) Dolny środek / okładka NO-REPEAT;" & GT;
   & lt; H1 Class = "C-Hero__title" & GT; {{post.title}}} & LT; / H1 & GT;
   {{post.Intro | Markdownify}}
   & lt; a href = "{{post.url}}" Class = "BTN - Hero" & GT; przeczytaj pełny post & lt; / A & GT;
& lt; / div & gt;

Zobaczysz, że po raz pierwszy przypisujemy najnowszy post, a następnie odwołujemy się do miniaturowego obrazu ustawionego w przedniej materii stanowiska. Post Intro używa płynnego filtra Markdownify. Aby przekonwertować markdown do HTML.

Z tym na miejscu, dodajmy także zwiastuję ze strony O Informacje. Dodaj następujące czynności:

Tym razem używamy dla pętla, aby sprawdzić strony w witrynie. Używamy Strona URL Aby odfiltrować stronę o stronie, a następnie używamy podobnego stylu szablonowania do bohatera, aby wyprowadzić informacje o stronach.

09. Lista blogów.

Build a blog with Jekyll: Blog list — Prosty układ karty do pozostałych postów w witrynie, który wykorzystuje CSS Grid i Flexbox (Kredyt obrazu: Net)

Dzięki utworzonej stronie głównej możemy przejść do strony listy blogów. Aby utworzyć stronę listy, ponownie używamy tagów płynnych, aby dać nam logikę do pętli przez wszystkie pliki w folderze "Posts".

Bohater odbywa się dla ciebie, ponieważ następuje ten sam proces, co strona główna. Pod bohaterem w "blog.html", dodaj następujące czynności:

& lt; div class = "construal" & gt;
   & lt; h1 & gt; najlepszy z reszty & lt; / h1 & gt;
   & LT; sekcja Class = "Card-List" & GT;
           {% za post w witrynie.posts offset: 1%}
           & lt; div Class = "Card" & GT;
                   & lt; img src = "{{post.thumbnail_Image.small}}" / & gt;
                   & lt; div Class = "Szczegóły karty" & GT;
                   & lt; h3 & gt; {{post.date | Data: "% d% b"}} - {{post.title}} & LT; / H3 & GT;
               & lt; a href = "{{post.url}}" Class = "BTN" & GT; Czytaj więcej i LT; / A & GT;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% ENDOR%}
          
   & LT; / SEKCJA & GT;
& lt; / div & gt;

Znowu używamy dla pętla, aby przejść przez kolekcję postów. Ale jak już zapętlimy się najnowsze w bohaterze, zrekompensujemy tę pętlę, aby rozpocząć od dwóch. Płynny filtr służy do konwertowania daty do formatu naszego wyboru.

10. Strona szczegółów blogów

Niedługo pójdzie teraz: prawie mają wszystkie podstawowe elementy razem. Jednym z ważnych aspektów pozostały do adresu jest nawigacja. Kiedy czytasz na blogu, potrzebujesz sposobu na przejazd i czytaj więcej. Możemy dodać kilka fajnych paginacji naszej stronie za pomocą zmiennej strony. Otwórz post.html w folderze układów i dodaj następujące elementy:

Używamy strona.previous. i strona.Next. Zmienne, aby sprawdzić, czy zostanie wysłany do kliknięcia. Jeśli jest wtedy, możemy wyjść z blokiem i zawierać tytuł i link poczty.

11. Buduj i publikuj

Strony Github sprawia, że pliki Sass dla nas, więc po uruchomieniu Jekyll Build. Skompilowane pliki są tworzone w folderze _site. Brak plików Gulp ani Webpack tutaj, po prostu ładne chude style! Można nawet monitorować wyjście SASS jako ustawienie w pliku głównym Config.yml dla witryny. Zawartość tego katalogu może zostać przeniesiona do wybranego hostingu. Jedną rzeczą, o której należy pamiętać, że strony Github faktycznie obsługuje Jekyll, dzięki czemu można zbudować i hostować witrynę za pomocą oddziału głównego jako źródła. Więcej informacji na ten temat można znaleźć tutaj .

Ten artykuł został pierwotnie opublikowany w wydaniu 320 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 320 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

Zbuduj blog z siatką i flexbox
Najlepsze darmowe platformy blogów
Jak zbudować miejsce blogowania z Gatsby

Jak zbudować blog z Jekyll

01. Skonfiguruj

02. Podawać lokalnie lub budować

03. Uzyskaj pliki rozrusznika

04. Konfiguracja

05. Przednia materia

06. Tagi płynne.

07. Zbuduj nawigację

08. Utwórz stronę główną

09. Lista blogów.

10. Strona szczegółów blogów

11. Buduj i publikuj

Jak - Najpopularniejsze artykuły

Jak narysować głowę: kompletny przewodnik

Jak tworzyć symulacje wody

Utwórz krajobraz 3D w 6 prostych krokach

Jak zaprojektować idealną okładkę książki

10 Złote zasady reagowania SVG

Utwórz efekt wody wlewając w realflow

Najlepszy przewodnik po kompozycji obrazów w Photoshopie

Jak wykonać elastyczną platformę wstążki

Kategorie