Post

Jak zbudować blog taki jak ten

Opublikowano Zaktualizowano
Autor Marcin Szewczyk
2 min czytania
Jak zbudować blog taki jak ten

Zrobiłem bloga, więc powstała kwestia, co napisać, żeby blog miał jakiś wpis. Naturalny pomysł to opisać, jak zrobić bloga. Poniżej opisuję, jak to można zrobić.

Jak to uruchomić

Repo na GitHubie

Blog zbudowany jest na Jekyll, z motywem Chirpy (można potem zmienić), opublikowany na GitHub Pages.

Czego potrzebujemy na początek i jak to wygląda u mnie:

Mając konto na GitHubie tworzymy tam repo blog, potem wgrywamy do niego szablon startowy Chirpy.

Jak to zrobić:

  • na GitHubie tworzymy repo blog
  • otwieramy repo szablonu Chirpy Starter: https://github.com/cotes2020/chirpy-starter
  • klikamy Use this template → Create a new repository
  • ustawiamy Owner: marcin-szewczyk-code, Repository name: blog, Public → Create repository```

Wchodzimy następnie w ustawienia repo blog i ustawiamy: Settings repo → Pages → Build and deployment: GitHub Actions.

Mamy teraz repo blog na GitHubie, a w nim zawartość chirpy-starter. Repo jest tutaj: https://github.com/marcin-szewczyk-code/blog, a gotowy blog jest tutaj: https://marcin-szewczyk-code.github.io/blog. Gotowy blog to wynik tego, co GitHub Pages buduje i publikuje na podstawie zawartości repo.

Folder lokalny

Ściągamy (klonujemy) repo do lokalnego folderu blog i pracujemy dalej lokalnie w tym folderze:

1
2

git clone https://github.com/marcin-szewczyk-code/blog.git blog
cd blog

Pozostaje konfiguracja szablonu Chirpy, stworzenie pierwszego wpisu i wypchnięcie na Gita.

Konfiguracja

Podstawowa konfiguracja zapisana jest w pliku _config.yml.

Na początek ustawiamy podstawowe rzeczy, potem możemy zrobić resztę:

  • url: "https://marcin-szewczyk-code.github.io" – domena GitHub Pages dla konta marcin-szewczyk-code na GitHubie.
  • baseurl: "/blog" – szczegół, ale ważny.
  • timezone: "Europe/Warsaw" – wiadomo.
  • lang: "pl" – żeby Chirpy brał język interfejsu tam, gdzie ma tłumaczenia, resztę zrobimy ręcznie.

Tworzenie pierwszego wpisu

Bazujemy na markdownie, więc wpis jest plikiem .md. Hello world Jekylla zrobię w osobnym wpisie. Co ciekawe, jest to ten sam markdown co w dokumentacji na GitHubie i w Jupyterze.

Uruchomienie serwera lokalnego

Jekyll jest napisany w Ruby, tak jak cały GitHub. Potrzebuje więc Ruby i gemów.

Instaluję zależności:

1

bundle install

Uruchamiam Jekylla:

1

bundle exec jekyll serve --baseurl ""

Blog działa teraz lokalnie pod adresem: https://127.0.0.1:4000/blog.

Zmiany w plikach są widoczne na bieżąco (nie wszystkich, ale kluczowych).

Opcja --baseurl "" pozwala nie wpisywać /blog w URL.

Wypchnięcie na Gita

Pozostaje commit i wypchnięcie push na GitHuba:

1
2
3
4

git status
git add .
git commit -m "Initial Chirpy blog setup"
git push

W jednej, wygodnej linii:

1

git add . && git commit -m "Update local changes" && git push

Dodatkowe automatyzacje workflow

Czyszczenie cache i restart Jekylla:

1
2

Ctrl-C
rmdir /s /q .jekyll-cache & rmdir /s /q _site & bundle exec jekyll serve --baseurl ""

Podsumowanie

Robię → działa → jest fajnie.

Blog
blog jekyll setup