Jekyll
#artykuły #człowiek40
Nazwa tego bloga wzięła się z ogłaszanej w ostatnich czasach czwartej rewolucji przemysłowej. Nazwa zobowiązuje i nie mógłbym po prostu zrobić bloga ucząc się tego na piechotę, no absolutnie! Do tego jestem programistą, znam te wszystkie przeinżynierowane systemy dla technologicznych laików (tak będę tutaj uprawiał słowotwórstwo bazujące na informatycznej korpomowie i mi nic nie zrobicie). Nie będę używał jakiejś platformy dla humanistów, która zrobiłaby wszystko za mnie. Co więc zrobiłem? Zapytałem AI o możliwe rozwiązania do prowadzenia bloga i przejrzałem opcje. Poszło standardowo:
- WordPress - absolutnie, nie będę prowadził notesu na przemyślenia w takim kombajnie!
- Wix, Blogger, Squarespace - no niby może lepiej, ale czy na pewno?
- Clickup, Narrato, bla bla bla - no dużo tych narzędzi, ale wszystko to giganty a ja po prostu chcę pisać i publikować bez zobowiązań
Zmieniłem zapytanie. “Podpowiedz mi, jak zautomatyzować tworzenie bloga w prostych technologiach, vanilla, pregenerowane strony, bez zaplecza, bazy danych, backendu, ale też bez rozrośniętego frontendu”. No i wtedy odkryłem jego, Jekylla.
Wszedłem na stronę rozwiązania i czytam.
- No more databases, comment moderation, or pesky updates to install—just your content.`
- Markdown, Liquid, HTML & CSS go in. Static sites come out ready for deployment.
- Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.
Ok, nie mów nic więcej. Już mnie masz.
I mnie miał, ale i tak przecież nie będę na piechotę czytał dokumentacji i rozgryzał wszystkiego od zera jak zwierzę. Kilka kolejnych zapytań, incremental prompting, rafinowanie wymagań i powstała pierwsza wersja (której prawdopodobnie już nie widzicie, ale dla mnie była wystarczająca):
flowchart TD
Start([Start Build])
subgraph Config["⚙️ Konfiguracja"]
C1[_config.yml]
C2[Gemfile]
end
subgraph Content["📝 Źródła Treści"]
P1[_posts/*.md]
P2[pages/*.md]
P3[index.html]
end
subgraph Templates["🎨 System Szablonów"]
direction LR
L1[default.html] --> L2[post.html]
L1 --> L3[page.html]
end
subgraph Components["🧩 Komponenty"]
direction LR
I1[header.html]
I2[sidebar.html]
I3[footer.html]
I4[mobile-menu.html]
end
subgraph Assets["💎 Zasoby"]
direction LR
A1[style.css]
A2[scroll-effects.js]
A3[mobile-menu.js]
A4[images/*]
end
subgraph Engine["⚡ Silnik Jekyll"]
J1[Kramdown<br/>Markdown→HTML]
J2[Liquid<br/>Template Engine]
J3[Pluginy<br/>Feed, SEO, Paginate]
end
subgraph Output["📦 Wyjście"]
O1[_site/]
O2[*.html]
O3[assets/*]
O4[feed.xml]
end
Start --> Config
Start --> Content
Config --> Engine
Content --> J1
Templates --> J2
Components --> J2
J1 --> J2
J2 --> J3
Assets --> O3
J3 --> O1
O1 --> O2
O1 --> O3
O1 --> O4
End([Gotowa Strona])
O1 --> End
style Engine fill:#8e4e28,color:#fdf7ee,stroke:#544D0F,stroke-width:3px
style Output fill:#6B7D3C,color:#fdf7ee,stroke:#544D0F,stroke-width:3px
style Config fill:#DEC08F,color:#544D0F,stroke:#544D0F,stroke-width:2px
style Content fill:#f4e8cf,color:#544D0F,stroke:#544D0F,stroke-width:2px
style Templates fill:#ECD8B1,color:#544D0F,stroke:#544D0F,stroke-width:2px
style Components fill:#F2E2C4,color:#544D0F,stroke:#544D0F,stroke-width:2px
style Assets fill:#fdf7ee,color:#544D0F,stroke:#6B7D3C,stroke-width:2px
style Start fill:#DEC08F,color:#544D0F,stroke:#544D0F,stroke-width:2px
style End fill:#6B7D3C,color:#fdf7ee,stroke:#544D0F,stroke-width:2px
Cztery proste komponenty - header, sidebar, footer i specjalnie dla mobilek mobile-menu. Do tego szablon strony i posta plus kilka podstawowych zasobów. Oczywiście było troszkę zabawy z dostosowaniem CSS ale na szczęście Claude Sonnet 4.0 radzi sobie z takimi rzeczami w zupełności wystarczająco dobrze, aby spełnić moje niezbyt wygórowane zachcianki.
Sam Jekyll ma dedykowany kontener Dockerowy, także trudność z konfigurowaniem środowiska “developerskiego” jest praktycznie żadna. Wystarczy zainstalować Dockera.
docker run --rm -v ${PWD}:/srv/jekyll jekyll/jekyll:4.2.2 bundle install
docker run --rm -v ${PWD}:/srv/jekyll jekyll/jekyll:4.2.2 jekyll build
docker run --rm -p 4000:4000 -v ${PWD}:/srv/jekyll jekyll/jekyll:4.2.2 jekyll serve --config _config.yml,_config_dev.yml --force_polling --host 0.0.0.0
Co dokładnie się dzieje? Każdą komendą uruchamiamy nowy czysty kontener Dockerowy z obrazu Jekyll:4.2.2 z katalogiem roboczym ustalonym na domyślny dla Jekylla. Pliki projektu są widoczne w kontenerze a modyfikacje zapisują się na hoscie.
bundle installuruchamiane wewnątrz kontenera:- Czyta Gemfile w /srv/jekyll.
- Pobiera i instaluje gemy wymagane przez projekt.
- W obrazie jekyll/jekyll Bundler jest skonfigurowany tak, by instalować do vendor/bundle w projekcie - dzięki mountowi zależności zostają na hoście (mamy cache między uruchomieniami)
jekyll buildgeneruje stronę jako pliki statyczne:- Czyta _config.yml (domyślnie).
- Przetwarza zawartość (_posts/, strony, layouty, includes, SASS itp.).
- Wypisuje statyczną witrynę do katalogu _site/ (na hoście, dzięki mountowi).
jekyll serve- uruchamia serwer deweloperski Jekylla (z obserwacją zmian i przebudową).--config _config.yml,_config_dev.yml- Ładuje kilka plików konfiguracyjnych kolejno. Klucze z drugiego pliku nadpisują wartości z pierwszego (częsty wzorzec „prod + dev-overrides”).
Same posty napisane w formacie MD bardzo sprawnie konwertowane są w trakcie tego procesu do ostylowanych dokumentów HTML. A całą zawartość folderu _site po prostu wrzucamy do roota wybranego hostingu i cytując klasyka “it just works”!
Jest tu oczywiście duże pole do poprawy (która już po części się zadziała, o czym napiszę w kolejnych postach) ale - jak mówiłem - chciałem aby było to przede wszystkim niezobowiązujące. Zaczynam bez żadnych rozwiązań interakcyjnych z czytelnikami, z deployem ręcznym przez WinSCP. Oczywiście w głowie już widzę tę synchronizację w chmurze z Obsidianem, Githubem, Github Actions, komentarzami do wpisów i powiadomieniami o nich, ale narazie, po prostu przejdę przez ten mostek kroczek po kroczku jak całkiem dorosły.