website-preview

Skill do testowania wyglądu witryny Jekyll bez opuszczania edytora. Renderuj stronę lokalnie, rób zrzuty ekranu w trybie jasnym, ciemnym i mobilnym, a następnie weryfikuj jak wyglądają Twoje zmiany CSS, SCSS i HTML. Automatyzacja przeglądarki za pomocą ChromeDriver pozwala szybko sprawdzić efekt każdej edycji layoutu lub stylów. Idealne dla front-endowców pracujących nad projektami Jekyll.

1. Upewnij się, że serwer Jekyll działa na porcie 4000. Sprawdź komendą curl do http://localhost:4000/ – powinna zwrócić kod 200. Jeśli serwer nie działa, uruchom go w tle poleceniem bundle exec jekyll serve --host 0.0.0.0 i czekaj kilka sekund na zbudowanie strony.

2. Sprawdź, czy ChromeDriver jest uruchomiony – szukaj pliku /tmp/chromedriver_port. Jeśli go nie ma, uruchom ChromeDriver skryptem ./browser.sh chromedriver, który automatycznie znajdzie Chrome i uruchomi sterownik na wolnym porcie.

3. Zacznij sesję przeglądarki poleceniem ./browser.sh start http://localhost:4000/ – otwiera to lokalną witrynę w automatyzowanej przeglądarce.

4. Wybierz tryb wyświetlania – użyj ./browser.sh dark dla trybu ciemnego, ./browser.sh light dla jasnego, ./browser.sh mobile dla widoku mobilnego lub ./browser.sh desktop dla pulpitu. Tryb pozostaje aktywny do zmiany.

5. Zrób zrzut ekranu poleceniem ./browser.sh screenshot /tmp/preview.png – plik zapisze się w /tmp. Możesz robić wiele zrzutów w różnych trybach bez restartowania sesji.

6. Zamknij sesję poleceniem ./browser.sh stop. Po każdej zmianie CSS, SCSS lub HTML w edytorze powtórz kroki 4–5, aby zweryfikować efekt wizualnie.