Konfiguracja statycznego bloga w Hugo i Cloudflare

Pewnego dnia zdecydowałem, że chcę prowadzić techniczego bloga. Odnośnie tego co robię, zapisywać swoje przemyślenia, notatki i doświadczenia. A mając już doświadczenie w stawianiu stron internetowych w różny spsób, wiedziałem również, że nie chcę płacić za hosting, skoro nie muszę.

Moim podstawowym edytorem tekstu wszelakiego jest Neovim. Przyzwyczaiłem się do niego, mam swoją konfigurację, i nie chcę musić z niej rezygnować żeby móć używać np edytora WYSWIG (ang. What You See is What You Get) w przeglądarce - z tym kojarzy mi się Wordpress.

Czego nie chciałem

Wordpress wymaga hostingu, bazy danych, i jest zbyt skomplikowany jak na moje potrzeby. Również, każda dynamiczna strona internetowa długo się ładuje, i stanowi dodatkową powierzchnię ataku dla potencjalnego hackera. Nie mam ochoty się tym zajmować.

Publikowanie na gotowej platformie jak Medium czy dev.to brzmi spoko, ale lubię mieć kontrolę nad swoimi tekstami. Jako mirror - spoko. Jak główne źródło - odpada. Napisałem w życiu parę tekstów na medium, i używany przez nich edytor jest okropny.

Workflow

Chodzi o to, że standardowe narzędzia w mojej pracy to:

• Terminal linuksowy
• Neovim
• Git

A taki zestaw jest w zupełności wystarczający, żeby można było tworzyć i publikować wpisy na bloga.

Założenie jest takie:

• Mam pomysł na wpis
• Chcę go jak najszybciej zapisać
• git commit + git push
• Wpis jest opublikowany

Generator statycznych stron

Kiedyś miałem trochę do czynienia z Pelican (napisny w Pythonie), ale ostatecznie wybrałem Hugo (Golang), ponieważ jest szybszy. I spodobał mi się jeden z szablonów (może kiedyś napiszę własny).

Hugo pozwala pisać wpisy w Markdown, a następnie generuje z nich statyczne strony HTML. Idealne rozwiązanie.

Hosting

Hostowanie statycznyhc stron nie jest wielką filozfią. Najbardziej znane usługi tego typu to GithubPages, Netlify czy Cloudflare Pages. Zdecydowałem się na to ostatnie.

Kilka przemyśleń technicznych

• Hugo ma zbudowany serwer deweloperski, więc można loklanie podglądać jak strona wygląda. To bardzo ułatwia pracę.
• Hugo posiada też moduł obsługujący CDN, więc loklanie może pracować na plikach graficznych z dysku, a na stronie będzie to właśnie CDN.
• Cloudflare pages oferuje bardzo dużo za darmo, a dodatkowo ma wbudowaną obsługę SSL, CDN i DDoS protection.
• Cloudflare R2 (Object Storage S3-like) może być używany do przechowywania plików statycznych (obrazki, pdfy itp) i oferuje darmowy transfer wychodzący ( w dużym zakresie)

Jak to wszystko spiąć?

Architektura:

• Lokalnie piszę wpisy w Markdown, przechowując je w repozytorium Git
• W oddzielnym repo, mam konfigurację Hugo - szablon, ustawienia, itp.
• Cloudflare Pages jest połączony z repozytorium Hugo, i przy każdym git push do niego, buduje stronę i publikuje ją
• Pliki statyczne (obrazki, pdfy itp) są przechowywane w Cloudflare R2, a Hugo jest skonfigurowany do korzystania z nich jako CDN

Architektura wydaje się idealna, ale niestety ma pewne wady:

• Użycie submodułów w Gicie często bywa kłopotliwe
• Konieczność klonowania dwóch repozytoriów trakcie budowania - problem w kwestii autoryzacji (konieczność użycia https zamiast ssh), i który commit ma być użyty (wiadomo, że najnowszy, ale to bywa upierdliwe)

Szybkie uproszczenie - monorepo. Posty znajdują się w konkretnym katalogu w strukturze, a każdy push = budowanie i publikacja. Dzięki temu, praktycznie od razu buildy zaczęły działać.

Podsumowanie

Blog działa, ja mogę publikować wpisy tak jak chcę, i nie kosztuje mnie to więcej czasu, zachodu i pieniędzy. Rozwiązanie idealne? Oczywiście, że mogłoby być lepsze. ALe na tą chwilę wystarcza.

Jeżeli czas mi na to pozwoli, to mam jeszcze pewne plany na rozbudowę, ale na tą chwilę nie są one priorytetowe. Zdradzać też nie planuję :)