:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

Jak założyć bloga korzystając z Jekyll?


Plan jest prosty. Mamy pomysł na aplikację, która będzie w formie bloga. Będzie można zakładać kolejne posty oraz dawać komentarze po nimi. Warto jeszcze wspierać tagi, aby filtrować listę postów.

Baner reklamujący artykuł

Moje zadanie będzie dotyczyło platformy www.ecmascript6.pl. Chciałbym, aby na niej znalazły się informacje nt najnowszego standardu ECMAScript 6. Ze względu na końcówkę w domenie, chciałbym, aby artykuły były w niej po polsku. Mam też plan, aby zrobić oddzielną sekcję na angielskojęzyczne artykuły.

Zaczynamy od wyboru systemu na którym będziemy się opierali. Ze względu na łatwość zarządzania wybór padł na bibliotekę (gem) Jekyll. Więcej na jego temat można przeczytać pod tym adresem.

Zaczynamy tworząc katalog pod nasz portal:

mkdir www.ecmascript6.pl
cd www.ecmascript6.pl

Krok 1: Stworzenie środowiska

Zaczynamy od stworzenia tzw. gemset-a, czyli środowiska pod nasz portal. Musimy mieć zainstalowany program rvm. Zainstalować go można na wiele różnych sposobów. Na pewno warto zajrzeć na jego stronę domową https://rvm.io/rvm/install.

rvm gemset create www.ecmascript6.pl

Stworzyliśmy nowe środowisko dla gemów! W moim przypadku NAZWA_PORTALU będzie domena pod którą będzie dostępny serwis.

Po wydaniu polecenia rvm list gemsets widzimy, że jeszcze musimy się przełączyć na ten nowo stworzony gemset. Wydajemy polecenie:

rvm use [email protected]

Jesteśmy już w nowym środowisku!

Krok 2: Instalacja Jekyll-a

Na stronie domowej jekyllrb.com/ jest widoczna lista 3 poleceń aby wykonać, do uruchomienia pierwszej wersji aplikacji.

Wykonujemy polecenie gem install jekyll która zainstaluje nam gem (paczkę, program), dzięki której będziemy mogli stworzyć strukturą plików i katalogów dla naszego projektu.
Tak wygląda podsumowanie polecenia, które zostanie wyświetlone w terminalu.

jekyll after 45 seconds
31 gems installed

Gdy już mamy zainstalowany program, wykorzystajmy go!

jekyll new .

Tym samym w katalog www.ecmascript6.pl stworzy się nowa struktura:

.
├── _config.yml
├── _includes
│   ├── footer-tag.html
│   ├── head-tag.html
│   └── header.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   └── 2015-06-28-welcome-to-jekyll.markdown
├── _sass
│   ├── _base.scss
│   ├── _layout.scss
│   └── _syntax-highlighting.scss
├── about.md
├── css
│   └── main.scss
├── feed.xml
└── index.html

5 directories, 15 files
HINT

Dobrym pomysłem, jest teraz stworzenie repozytorium w tym katalogu. Dzięki git-extras wystarczy wydać polecenie git setup.

Krok 3: Uruchomienie

Gdy już mamy strukturę projektu możemy już uruchomić nasz projekt w przeglądarce. Wystarczy uruchomić:

jekyll serve

W terminalu dostaniemy informację na jaki adres trzeba wejść aby wyświetlić stronę. W moim przypadku jest to Server address: 127.0.0.1:4000/.

I naszym oczom ukazuje się nasza pierwsza strona.

Jekyll: Default page

Zwróć uwagę na port który trzeba dopisać do adresu IP maszyny. Można go (port) łatwo zmienić dodając parametr jekyll serve --port 4001.

Krok 4: Konfiguracja

Plik: _config.yml

Gdy już mamy uruchomioną aplikację czas na dostosowanie jej pod nasze potrzeby. Warto zacząć od głównego pliku konfiguracyjnego _config.yml znajdujący się w głównym katalog projektu. Zawiera on takie pola jak: tytuł strony, opis, kontakt do autora no i URL.

Katalog: _includes

Następne warto przyjrzeć się katalogowi _includes, w którym jest lista partiali (plików, które zostaną użyte w innym miejscu). Plik head-tag.html zawiera definicję całego znacznika <head>. Polecam dodać w nim wygenerowany snippet kodu z Google Analytics. Dodatkowo może jakieś pliku CSS. Jeśli ktoś używa Bootstrap-a to znacznika head jest najlepszym miejscem na dołączenie plików *.css.

Katalog: _posts

Kolejny katalog warty uwagi (chyba najważniejszy) to katalog _posts, w który znajduje się lista plików z naszymi postami. Jekyll przyjmuje konwencję, że jeden plik = jeden post. To w nim umieszczamy pliku wg schematu YYYY-MM-DD-name-of-post.ext. Mamy kilka typów rozszerzeń do wyboru, m.in. markdown, md, html. W każdym plik post istnieje specjalna sekcja na początku tego pliku w której to definiujemy taki informacje jak: layout (w jakim dany post ma być wyświetlony), tytuł posta oraz czas. W późniejszym etapie powiem o tagach. Ze swojej strony polecam zwykły html, ze względu na nieograniczone możliwości edycyjny. Pierwotnie używałem Markdown-a, ale przy bardziej skomplikowanych elementach nie radził on sobie najlepiej.

Katalog: pages

Ostatnią rzeczą na która warto zwrócić uwagę są zwykłe strony. W katalogu głównym istnieje plik about.md. W zawartości takiego pliku (podobnie jak w postach) poza layoutem i tytułem jest jeszcze parametr: permalink. Oznacza on URL pod jakim strona ma byc dostępna. I tak proponuję stworzyć katalog pages, który będzie przechowywał strony. Jekyll sam znajdzie pliki w takim katalogu. Ważne jest aby nazwa nie zaczynała się od znaku podkreślenia, gdyś katalogi z prefiksem "_" są traktowane przez Jekyll-a specjalnie. Ten plik (about.md) proponuje zmienić na autor.md.

Plik: Gemfile

Ostatnim krokiem będzie stworzenie pliku Gemfile w katalogu głównym, wraz z zawartością:

source 'https://rubygems.org'

ruby '2.2.1'
#ruby-gemset=www.ecmascript6.pl

gem 'jekyll'

Aby w kiedy będziemy pracowali nad projektem ustawić odpowiednie środowisko (gemset). Dodatkowo, kiedy będziemy instalowali ponownie aplikację, to wystarczy już tylko stworzyć gemset, zainstalować gem bundler który po poleceniu bundle install zainstaluje nam Jekyll-a.

Podsumowanie

Przejście opisanego tutoriala nie zajmuje wiele czasu. Daje tym samym spory efekt - w pełni praktyczną aplikację ze stronami i postami. W dzisiejszych czasach postawienie bloga to nie jest jakiś rocket science.

Jeśli masz doświadczenie z językami programowania to na pewno chciałbyś mieć nieograniczony wpływ na Twoją aplikację webową, tym samym stworzenie takie aplikacji dzięki Jekyll-owi jest efektywne, szybkie i łatwe! :smile: