O co chodzi z tym wpisem?

Stwierdziłem, że samo założenie bloga itp. może się wydawać czymś trudnym, żmudnym(?) przez co wiele osób rezygnuje już na starcie. Tutaj bardzo spoko są inicjatywy typu “daj się poznać”, ale one też pokazują ile % takich blogów potem zostaje na dłużej. Dodatkowo podejrzewam, że w embedded mniej osób interesuje się web-developmentem - dla innych takie coś może być naturalne, spotykają się z tymi technologiamii codziennie - więc łatwiej wystartować bloga.

W tym wpisie chciałbym umieszczać co się zmienia na blogu pod kątem technicznym. Ogólnie też opisać jak to jest zorganizowane - czego używam przy pisaniu. Plus też co musiałem pomodyfikować, poedytować z czego wtedy korzystałem itp. Początkowa sekcja będzie zawierała jak to wszystko się rozwijało, dlaczego zostały podjęte jakieś decyzje. Zaznaczam, że nie jestem webdeveloperem, więc w razie pytań głównie odsyłałbym do materiałów z zewnątrz.

Może taki zbiór informacji komuś pomoże i go przekona do jakiejś prostej “stronki”.

Czyli ten wpis będzie co jakiś czas odświeżany - nie będę robił do tego osobnych wpisów dotyczących zmian konfiguracji strony - powstanie tutaj swego rodzaju “changelog”.

Markdown

To pojęcie się będzie często pojawiać - to może trochę wyjaśnień.

W skrócie jest to język znaczników przeznaczony do formatowania tekstu. Zapewne każdy widział HTMLa i kojarzy go ze specjalnymi znacznikami - otóż w Markdownie tymi znacznikami jest sposób sformatowania tekstu. Czyli jeśli chcemy dodać listę to używamy myślników itp. W sumie przypomina to zwykłe notatki zapisane w pliku tekstowym, a po uruchomieniu w edytorze markdowna możemy to “ładnie” wyrenderować.

Gdzie się go stosuje? Standardowo pliki readme.md na GitHubie i podobnych platformach są pisane w markdownie.

Takie treści idealnie się nadają do trzymania w kontroli wersji.

Chyba każde IDE ma jakieś pluginy do podświetlania składni markdowna i do renderowania z niego dokumentów.

Spotkałem się z określeniem, że to taki “html lub latex dla ubogich” - coś w tym jest :P

Po więcej odsyłam do innych stronek np. Poznaj Markdown.

Zasady co do nowego bloga

Moje główne kryteria odnośnie wyboru platformy:

  • jakiś bardzo prosty/przejrzysty theme
  • możliwość pisania wszystkiego w markdownie - ponieważ tego używam do swoich notatek /jestem z tym zaznajomiony, więc będzie mniejszy wkład pracy
  • bez jakiś dodatkowych narzędzi - typu edycja przez stronę itp - chcę wypchnąć to komendą na serwer, a źródła mieć lokalnie

Wcześniejszy blog był na platformie blogspot i nie spełniał żadnego z tych punktów. Dodawanie jakiś nowych rzeczy to była dla mnie prawie czarna magia - ot copy-paste do templatki, która miała mega dużo linijek. Wiele blogów jest opartych o WordPressa i to w tym kierunku chciałem iść. Są dostępne pluginy do Markdowna, ale już pisanie tego lokalnie nie było takie proste i znowu dodawanie czegoś nowego to klikanina. Do jednego z projektów w firmie korzystałem z “MkDocs” do generowania dokumentacji - tam też wszystko jest pisane w Markdownie i coraz bardziej się składniałem do oparcia strony o to - chociaż nie jest to przeznaczone typowo do blogów. Jekylla znam od Maćka ze strony ucGosu i to był na ten moment strzał w dziesiątkę. Jest jeszcze masa takich tooli - możecie poszukać pod hasłem “static site generator”.

Postawienie Jekylla, jego podstawy poznałem z tego poradnika na youtube: Jekyll

Dostępne są wersje na wszystkie systemy - ja korzystam z wersji linuxowej uruchamianej w WSL na windowsie 10.

Jest też książka poświęcona temu wszystkiemu: “Creating Blogs with Jekyll”.

Posty to zwykłe pliki markdown i można je sobie układać jak się chce w katalogach, a Jekyll i tak je ogarnie i “opublikuje” w kolejności po wpisanej dacie (chociaż oczywiście to można zmieniać jeśli potrzeba). Do edycji plików można wykorzystać cokolwiek - warto sobie dograć do edytora pluginy od składni Markdownowej. Ja np używam eclipse z pluginem FluentMarkdown i stronkę mam jako osobny projekt w workspace z notatkami w markdownie.

Pierwszy “problem”

Pojawił się dość szybko i też szybko został rozwiązany - chciałem mieć obrazki oraz pliki dla każdego postu w jego katalogu. Domyślnie podaje się linki do katalogu typu “assets” co psuje ten układ, albo dokłada roboty, żeby go pilnować.

Rozwiązanie - jeden plugin, który to ogarnia -> jedna linijka w pliku konfiguracyjnym.

Z tego skorzystałem -> instrukcja.

I generalnie chodzi o dodanie takiej linijki w “Gemfile”:

gem 'jekyll-postfiles'

I potem dopisaniu “jekyll-postfiles” w pluginach w _config.

Obrazki przy postach/theme próba 1

Trochę się naszukałem jak pododawać obrazki na stronie głównej do postów ponieważ domyślny theme tego nie ma - ale mnie jakoś po czasie natchnęło “czy serio tego potrzebuję na start?” odpowiedziałem sobie, że nie i skupiłem się na pisaniu postów na zapas, a taką kwestię przełożyłem na później - tak samo nie chciałem bawić się w motywy - ten domyślny jest dla mnie bardzo spoko. Podsumowując - na bajery przyjdzie czas później. Ale już widzę, że nie będzie to wymagało żadnych dodatkowych zmian w textach - jedynie może jakieś dodatkowe parametry w nagłówku i tu znowu przewaga Jekylla - mogę to sobie pododawać łatwo w eclipsie, a nie przeklikując się przez dziwne menusy.

Hosting

Do tej pory nie myślałem jeszcze o hostingu dla tej stronki. Zaletą statycznej strony jest to, że możemy ją wrzucić praktycznie gdziekolwiek. Możemy też zahostować ją łatwo np. w GitHubPages, jednak to wymaga:

  • albo tego, żeby repo ze źródłami było publiczne
  • albo płatnego konta (i wtedy repo możemy zachować prywatne) na marzec 2020 opłaty to 7dolarów miesięcznie lub 84rocznie (czyli nie ma promocji żadnej :( ).

Ja jakoś wolałbym trzymać źródła prywatnie + zapewne będą tam też drafty (czyli posty jakby w kolejce do wypuszczenia w wersji bardzo roboczej). Więc zrezygnowałem z opcji z GitHubPages.

Inna opcja - to praktycznie dowolny hosting i do tego domena. Nie robiłem jakiegoś mega researchu w tej kwestii - wszystko zrobiłem na stronie hostinger.pl czyli:

  • wykupienie domeny 12,5zł za rok
  • wykupienie hostingu 25 za rok

warto zaznaczyć, że potem przy przedłużeniach te ceny się zwiększają - potem domena to 50zł na rok. Zobaczymy jak to wszystko wyjdzie.

Dostęp do stronki mam przez ftp - mogę skryptem, który trzymam na repo podmienić wszystkie pliki - ponownie powtarzam - żadnych dodatkowych klikaczy na stronie :) Ten skrypt nawet mogę podpiąć do eclipse jako buildTarget i przez niego uruchamiać lokalne hosty lub właśnie uploadować wszystko.

Budowanie lokalnie i na serwer

Kiedy chcemy sobie odpalić serwer lokalnie robimy to np. tak:

jekyll serve -p 4000 --no-watch --trace --drafts

I wynik będzie w katalogu _site. Te pliki jednak nie nadają się do wrzucenia na zewnętrzny serwer.

Musimy je zbudować komendą build, ale także dodatkowe pluginy wymagają ustawienia zmiennej środowiskowej mówiącej, że aktualny build jest “produkcyjny”. Np dopiero wtedy uruchomią się RSSy, Disqus itp. Przykład takiej komendy:

JEKYLL_ENV=production jekyll build

I wtedy zbudowana zawartość z katalogu _site może wylądować na zewnętrznym serwerze.

Emoji?

Pomyślałem, że czasem się przydadzą - więc tutaj z pomocą przychodzi kojejny plugin: Jemoji

Tu był mały problem z instalacją i wcześniej musiałem zrobić:

sudo apt-get install build-essential patch ruby-dev zlib1g-dev liblzma-dev
sudo gem install nokogiri

I mały test:

:+1: :ghost: :man_dancing:

Czyli działa :smile:

Statystyki odwiedzin?

Niestety/stety skoro strona jest wygenerowana statycznie to dla statystyk musimy posiłkować się zewnętrznym serwisem - niech to będzie google analytics.

Opisy:

  • opis1 - swoją drogą to też jest blog w Jekyll/minima z kilkoma postami
  • opis2

W skrócie w domyślnym motywie już są rzeczy od google Analytics - trzeba do pliku _config dodać ID analyticsa. Czyli tego typu linijkę:

google_analytics: UA-XXXXXXXX-X

Sekcja komentarzy

Myślałem, że to będzie mega problem i nawet miałem całkiem odpuścic w początkowym okresie istnienia bloga, ale okazało się, że to też 2 linijki + założenie konta na Disqus (które już miałem wcześniej) i utworzenie tam “topicu”, który będziemy linkować.

Do pliku _config dodajemy:

disqus:
  shortname: <site-shortname-from-disqus>

Ale też warto zaznaczyć - że nie jest to za darmo - w polu z komentarzami mogą się pojawiać reklamy od disqus - nie mamy na nie wpływu. Jeśli przejdziemy na płatną wersję to jest to koszt jakiś 40zł miesięcznie. Ogólnie nie zdawałem sobie sprawy ile takie utrzymanie bloga może kosztować w przypadku płatnych wersji takich narzędzi. Tu mi wystarczy darmowa wersja.

Reklamy?

Można wykorzystać AdSense - do uruchomienia reklam na blogu. Przykładowe opisy: Ten bardzo fajny:

I te też:

Aktualnie nie uruchamiam tego - może kiedyś - raczej to nie jest targetem bloga, wystarczą już reklamy z komentarzy z DISQUS, które są wymagane do używania jego darmowej wersji.

Mała zmiana koncepcji

W założeniu miałem tu też umieścić jakiś poradnik jak zacząć itp - ale jest taki wysyp świetnych materiałów na ten temat - zaczynając od oficjalnej strony, że totalnie się to mija z celem - dlatego zostaną tylko opisy zmian na stronie, jakiś pluginów itp.

Na oficjalnej stronie jest umieszczony opis jak zrobić totalnie wszystko od zera - bez bazowania na defaultowym theme “minima” - jak przesłaniać layouty itp - polecam.

Dark theme?

Przeglądając różne blogi oparte na Jekyllu znalazłem ten: Made Mistakes i tam jest przełącznik motywu na czarny! Mega spoko to wygląda. Nie zagłębiałem się jeszcze w te przełączniki itp.

Znalazłem jedynie czarną wersję “minima” tutaj dark-minima instalacja opisana w readme - zobaczę, którą wersję finalnie tu dodam.

Front Matter - ustalenia pól, linki

Z tym się każdy musiał zetknąć - są to “parametry” danej strony/postu umieszczone na górze. Potem można je wykorzystywać na różne sposoby. Warto to sobie przemyśleć i się tego trzymać potem, ale też edycja tego nie byłaby potem jakoś skomplikowana.

Ponieważ Jekyll domyślnie generuje linki na podstawie daty itp - w przypadku jakiejś modyfikacji linki ulegną zmianie - a tego bym nie chciał - stąd zawsze będę przypisywał konkretny adres dla strony. Wstępna koncepcja, żeby to było jakieś hasło związane z tematem postu, ale stwierdziłem, że będę je sobie numerował - jak Maciej Aniserowicz w devTalk - materiały do podcastów są w mega prostym linku i tak to przyjmę. Więc dla postów konwenjca url-i będzie taka:

permalink: "/posts/<numer>.html"

Dla stron nie będzie tego dodatkowego “/posts”. Strony zapewne też mi się przydadzą. Podstawową jest stronka typu “about” czy też “o mnie”/”kontakt”.

Dlaczego jeszcze to jest ważne - jak mamy komentarze na disqus - to są one są powiązane z linkami. Co prawda można je potem podmieniać, ale po co sobie robić dodatkową robotę.

Mój szablon

Teraz notka dla mnie - jakie sekcje będę chciał dodawać - jako szablon do utrzymywania na wszystkich postach - na przykładzie tego posta:

layout: post
title: "#001 - Blog - historia i modyfikacje"
short: "Historia konfiguracji tego bloga"
image: "/files/posts_images/001.png"
permalink: "/posts/001.html"
date: 2020-04-12
categories: [general]
tags: [blog, general]

I we wszystkich postach trzeba o to dbać. I to potem jedyny wymóg, żeby stronka działała bez problemów - w sensie bez problemów z konfiguracją.

Obrazki przy postach - cd

Jak już trochę doczytałem o Jekyllu to dodanie obrazków do strony głównej nie jest już takie straszne. Trzeba było dodać sekcję do templatki “home” i wsio - to zostawiam do rozkminienia każdemu.

Moje założenie - obrazki w takiej proporcji jak standardowe rozdziałki ekranów - powiedzmy jak fullHD - czyli 1920x1080 czyli 16:9.

Podział na podstrony na stronie głównej

W pewnym momencie pomyślałem, że posty na stronie głównej zawsze będą “wszystkie” i jakoś się z tym pogodziłem, ale robi się to mega prosto według tego opisu paginator.

I na dole strony głównej możemy się przemieszczać.

Moje podejście do draftów

Mały problem z tym, ze jak mamy pliki w katalogach z postami to nie da się tak samo w katalogu z draftami - dlatego przeniosłem ten katalog do _posts i przed wypchnięciem na serwer “releasowym” zmieniam mu nazwę na “_drafts” - Jekyll pominie wtedy ten katalog.

Struktura i nazwy plików źródłowych

Takie moje wstępne założenia:

  • nazwy katalogów -> _jakiś text
  • nazwy plików -> <jekyll format - date>__jakiś_text.md

Dodatkowo tam zawsze umieszczam katalog “files” - to wiadomo - nie będzie problemów z przenoszeniem ewentualnym.

Wyszukiwanie w google

Widocznie blogspotowe blogi są z automatu uwzględniane w wyszukiwaniach google, bo nie musiałem nic robić na wcześniejszej stronie - w przypadku customowych - trzeba zrobić kilka rzeczy.

W google.com wpisujemy we frazę wyszukiwania naszą stronę - w tym przykładzie “site:embedownik.pl”. Nie znajdziemy wyników, ale zobaczymy link do webmasters - jest to portal do podglądu skuteczności wyszukiwań itp - należy tam dodać naszą domenę i żeby mieć dostęp do pełnych statystyk należy potwierdzić własność - poprzez dodanie “taga” - nie wiem jaka jest fachowa nazwa tego - do damych z DNSa naszego hostingu.

Dodatkowo warto dodać plugin “sitemap” do Jekylla - ale też fajną rzeczą z tego co czytam jest to, że ludzie uważają, że w przypadku tego typu blogów nie trzeba się przejmować indexowaniem, mapami itp - trzeba skupić się na dobrym contencie.

Formatowanie “loga” wpisu

Przy kilku wpisach okazało się, że trzeba dbać o obrazki z logiem dla wpisu - nie tyle o konkretną rozdzielczość co o proporcje - więc przyjęte zostały proportcje ~1.75 - np. 1880x1080px.

Wtedy ładnie się układają - pewnie da się to też CSSami dostosować, ale to jest “good enough”.