Portfolio 1.0 czyli kulisy pisania strony w Jekyllu i co myślę o SSG

Dziś kulisy pisania strony w Jekyllu. Pierwsze moje portfolio jako aspirujący front end dev a generator stron statycznych.

moje_portfolio_na_jekyllu_Kasia_i_kod_blog_o_uczeniu_sie-robienia-ladnego-internetu
moje_portfolio_na_jekyllu_Kasia_i_kod_blog_o_uczeniu_sie-robienia-ladnego-internetu

Dzień dobry, jestem Kasia, za chwilę mamy początek 2019, od 3 miesiący pracuję jako web project coordinator oraz QA w Vancouver. Tak piszę, na wszelki wypadek, jakbyśmy się jeszcze nie znali.

Dziś wspomnienie będzie – kilka uwag o moim pierwszym portfolio. Postanowiłam, że swoją stronę aspirującego front end dewelopera, wersja pierwsza, przygotuję w Jekyllu.

Dlaczego nie napisałam pierwszego portfolio na WordPressie?

Bo chciałam się czegoś nowego nauczyć.

Chciałam wypróbować, jak mi się będzie pisało w Jekyllu, który korzysta z języka Ruby.

Bo ktoś mi kiedyś powiedział, że o Rubym mogę zapomnieć, jeśli nie mam laptopa Maca. Chciałam zobaczyć, czy ten ktoś miał racje.

Zaraz na początku zobaczyłam, że Jekyll oficjalnie nie wspiera Windowsa, więc już wiedziałam, że będzie zabawa.

Chciałam również sprawdzić, jak będzie mi się pracować na “sforkowej” wersji czyjegoś repo z Githuba.

Słowem, musiałam spróbować. No musiałam!

Pierwsze wrażenie po odpaleniu Jekylla? Hmm…., to narzędzie zbudowane dla deweloperów!

Jak nie piszesz kodu, raczej nie użyjesz go do stworzenia własnej strony.

Niestety.

Musisz znać języki HTML oraz Markdown, nie bać się odpalić konsoli, a także wiedzieć, jak te wszystkie wygenerowane pliki przesłać na serwer, podłączyć z domeną i wypuścić w świat.

Tak działają wszystkie SSG (static sites generator, generatory stron statycznych). Kodujesz w edytorze tekstu, więc dobrze, żebyś wiedział, co to jest edytor tekstu.

Zaraz na początku objawiła się moim niedoświadczonym deweloperskim oczętom pierwsza znaczna przewaga CMSa, jakim jest WordPress.

Na WordPressie postawisz stronę, nie będąc deweloperem czy programistą. Na WordPressie każdy, absolutnie każdy jest w stanie zrobić sobie porządnie wyglądającą stronę. Albo z niej skorzystać, używając intuicyjnego kokpitu – panelu klienta. 

Ludzie, którzy stworzyli WordPress, chociaż deweloperzy, napisali narzędzie nie tylko dla deweloperów! Pomyśleli o użytkownikach, którzy tworzą i administrują zawartością strony, a ich stanowisko ma się do IT jak Hawaje do Łodzi.

Jekyll pod tym względem oszołomił mnie informacją i obietnicą, że postawię go sobie w sekundę! Całość zajęła mi tydzień, a i to krótko, zważywszy, że miałam do pomocy starszego programistę.

hehe, swoją drogą ciekawe, że tak wszyscy się tą szybkością chwalą. WordPress też jest słynny z 5 minutowej instalacji…

No to po co te statyczne generatory stron?

Jeśli już teraz czuje, że Jekyll jednak nie jest dla ciebie, to nie ma sprawy – zajrzyj na tę listę, żeby zobaczyć setki innych generatorów stron.

Ja na pewno w 2019 roku wypróbuję Gatsby’iego. Fajnie o nim opowiada Adam aka Roman na swoim kanale – sprawdź!

Największą zaletą generatorów stron statycznych jest szybkość wyświetlania stron w przeglądarce (oczywiście, jak już opanujesz tę deweloperską bestię na początku).

Wyświetlają tylko ten content, który jest w pliku, czyli HTML, CSS, JS czy obrazki. Te strony już istnieją w pliku, więc kiedy tylko serwer otrzymuje zapytanie z przeglądarki, to je wyświetla. Nic się nie generuje “w locie”, nie ma bazy danych.

Strony generują się błyskawicznie i szybko ładują w przeglądarce. Są lekkie i nie mają całego mnóstwa kodu, który czasami dostajesz w pakiecie z WordPressem.

Myślę, że do przygotowania portfolio, SSG są dobrym rozwiązaniem – nie musisz pisać z palca całego kodu HTML, tylko używasz Markdown’a, a pliki htmlowe są generowane na podstawie templatek. Jednocześnie nie korzystasz z gotowego motywu WordPressowego, który, o ile nie jest napisany przez ciebie na podstawie motywu deweloperskiego, nie pokazuje twoich umiejętości jako programisty. A przecież także o to chodzi w tworzeniu swojego portfolio.

Z mojej praktyki w agencji interaktywnej – ostatnio zbudowaliśmy stronę statyczną wykorzystując Gatsby’eg dla kampanii lokalnej policji, przeprowadzonej na Facebooku. Użytkownik nie musiał się logować oraz miało ładować się szybko, zwłaszcza w telefonach. Do takich projektów generatory stron statycznych są świetne!

Ale jeśli planujesz rozbudowaną architekturę oraz wiele powiązań pomiędzy różnymi rodzajami treści, to struktura plików może przytłoczyć. Nie zbudujesz aplikacji webowej w generatorze.

Ok, to wracając do mojego projektu:

Jak projektowałam wygląd mojego portfolio na Jekyllu?

Nie będę ci ściemniać – podejrzałam, jakie inni mają portfolio (ucząc się przy tym, jak robić ładny internet) i wybrałam sobie gotowy temat.

Celem pracy nad porftolio nie była nauka CSS czy Sassa, a za to zależało mi na estetycznym gotowym szablonie, który podrasuję trochę, żeby odpowiadał mojemu charakterowi. I był w miarę spójny z kasiaikod.pl

Dlatego wybrałam szablon z html5up, zintegrowany z Jekyllem. To znaczy, temat jest przygotowany do integracji, ale tę implementację trzeba zrobić samemu.

Nie jest to proste załadowanie motywu, jak w przypadku WordPressa.

Ta integracja szła mi dość opornie, bo struktura plików w motywie była inna, niż w standardowej wersji Jekylla. Mój temat miał więcej plików, templates (templatek?) i całkiem sporo kodu CSS, a właściwie SCSS. A także jquery i javascriptowy plugin dla formularzy.

Ogarnęłam bestię, wybrałam odpowiednie zdjęcia na Unsplash, dodałam projekty i tekst, nawet tabelę mam na jednej stronie (ale nie responsywną, więc nie ma się co chwalić).

Zdjęcia załadowałam jako png – nie popełnij mojego błędu! Dla sieci lepsze są jpg’i zoptymalizowane na przykład na stronie tinyPNG. (nazwa myli, wiem!)

Główny cel portfolio? Informacja o mnie i umożliwienie kontaktu.

No a jak dodać formularz kontaktowy, skoro to strona statyczna?

Tutaj z pomocą przyszedł mi plugin Formspree.

Ludzie listy piszą, czyli ustawienie na Jekyllu emaila

Plugin jest fajny, chociaż z punktu widzenia użytkownika niespecjalnie wygodny, bo wymaga podwójnej autoryzacji wysyłki. Przetestowane na moim bracie – jego zdaniem za dużo kliknięć, żeby wysłać email.

Poza tym mam hosting na Github Pages, więc dostęp do konfiguracji emaila miałam utrudniony. Musiałam ustawić przekierowania w lh.pl, gdzie mam domenę katejeziorska.com. Nie mam gdzie trzymać emaili w lh.pl, więc przekierowałam wszystkie emaile, które przychodzą na pocztę z domeny na moje konto gmailowe. I teraz działa – pracuję na katecode@gmail.com, wszystko pod adresem  hi@katejeziorska.com.

Coś czuję, że to rozwiązanie nie jest cudowne, więc w przyszłości do zmiany.

Aby ułatwić kontakt ze mną, dodałam jeszcze mały chatbox – darmowy skrypt z Drift. Można go stylować, ustawiać godziny, kiedy jestem dostępna. Ogólnie taki fajny dodatek, przyjazny komunikacji z klientem.

Miej swój styl, czyli jak zmieniałam wygląd tego szablonu

Bardzo lubię pisać w Sassie, i planuję nauczyć się wykorzystywać go intensywniej.  Dlatego ucieszyłam się, że w ustawieniach projektu jest Sass.

Brakuje mi go, pisząc w wordpressowych plikach, bo nie każdy motyw go ma, a ja często pracuję na motywach potomnych. Może kiedyś Sass będzie standardem dla WordPressa.

Po wypuszczeniu strony na produkcję, okazało się jednak, że nie sprawdziłam wszystkiego w Sassie – stąd takie kwiatki, jak wspomaganie fontów dla języka wietnamskiego.

Dużo się muszę nauczyć w temacie dobrych praktyk i ogarniania złożonych projektów.

SEO i GA – magia liczb, ale jak się do nich dobrać?

Kolejna niezbędna rzecz w każdym produkcie webowym to pozycjonowanie w internecie i analiza użytkowników. Ustawienie tych modułów w WP jest super proste, bo wszystko załatwia wtyczka.

A jak to jest w Jekyllu? Szukanie po repozytoriach i instalowanie paczek było wyzwaniem. Wiele rzeczy jest dla mnie niejasnych, pewnie także dlatego, że całą wiedzę o analityce strony mam przyswojoną trochę “po łebkach”.

Niestety Google Analytics pokazują mi też różne błędy – na przykład to, że linki mają dziwny format. Ale nie winę za to Jekylla – to raczej moja nieznajomość GA sprawia, że nie wykorzystuję w pełni rozwiązań Googla.

Mocno ucieszyłam się, widząc raport z GA – w listopadzie moje portfolio odwiedziło 77 osób. Dziękuję!

I oczywiście zapraszam Cię na moją stronę-portfolio, która z założenia miała pokazywać moje projekty z Githuba w ładnej formie, a okazała się być sama w sobie fajnym koderskim zadaniem. Wszystkie pliki źródłowe są w repozytorium: https://github.com/pinaska/kateandcode

A jeśli korzystasz z generatora stron statycznych, daj znać! Chętnie dowiem się więcej.

Serdeczności!

Ps. Szybciej zrobiłabym portfolio na WordPressie. Skąd wiem? Bo właśnie jedno kończę i jest całkiem ładne, i nowoczesne w wyglądzie, i szybkie, i klientka sobie będzie je mogła sama edytować.

Ps2. Niedawno na moim ulubionym portalu do nauki web developmentu pojawił się tutorial, a w proces stworzenia strony na Jekyllu. Jeśli temat cię interesuje, zajrzyj tam (trzeba mieć konto, ale pierwszy miesiąc jest bezpłatny)!