GitHub w połączeniu z Netlify umożliwia szybkie postawienie własnej strony wraz z automatycznymi deployami. Co istotne, jest to całkowicie darmowe rozwiązanie (o ile nie będziesz wykonywał ponad 300 buildów na minutę). Ja akurat zrobiłem sobie spis ebooków. Z założenia miało być prosto i szybko. Zrezygnowałem z części backendowej, gdyż do prostego spisu wystarczy mi plik JSON przechowujący informacje o książkach. Wiem, mało to wygodne, jednakże (tak, wstyd to przyznać) nie czytam jednej książki tygodniowo, więc dodanie kolejnej zakupionej pozycji nie jest zbytnio problematyczne. Właściwie, to wymyśliłem sobie tak, że na przemian w wolnym czasie oglądam jakiś sezon serialu, a po nim robię przerwę i biorę książkę. Póki co się sprawdza. Ale mniejsza z tym. Wracając do tematu, jeśli zajdzie potrzeba rozbudowy, częstszego dodawania (czy edycji) książek, część frontendową łatwo można przerobić, tak by dane pobierała z jakiegoś wystawionego endpointa (wystarczy np. skorzystać z Axiosa). Można też pobawić się autoryzacją i zrobić z tego serwis dla zalogowanych użytkowników, gdzie każdy z nich będzie miał swój własny spis książek. Ale, jak wspomniałem, nie potrzebowałem armaty na muchy, wybrałem powyższe rozwiązanie. Bardziej chodziło mi o sprawdzenie działania Netlify (chociaż znam go nieco z projektu, którym się zajmuję w pracy – ale tam wiadomo – nie będę bawił się „ficzerami”) i przekonanie się, jak wszystko podpiąć „od zera”.
Jako, że od dłuższego czasu sporo pracuję przy projektach wykorzystujących VUE, to na front posłużył mi ten właśnie framework (dokładniej to VUE 3). Sama strona nie jest skomplikowana – prosta lista książek z wyszukiwarką i kategoriami. Kategorie do wyszukiwarki ładowane są z pliku JSON, w którym znajduje się zbiór książek z opisami i dodatkowymi informacjami. JSON był naturalnym wyborem, gdyż listę książek zapisywałem na bieżąco w arkuszu kalkulacyjnym, skąd łatwo było wygenerować plik JSON. Przy okazji, stronę zrobiłem jako aplikację PWA (Progressive Web App), więc na telefonie zawsze mam swój spis książek, nawet jak jestem offline. Po instalacji wygląda to tak:
Widok na desktopie:
Jak to wszystko ma działać i po co to? GitHuba wykorzystuję, żeby trzymać kod pod ręką, ale daje to też możliwość jednoczesnej pracy przy projekcie większej ilości osób, jeśli będzie taka potrzeba. A więc, zakładasz (jeśli jeszcze nie masz) konto na GitHubie, tworzysz nowe repozytorium pod swój projekt. Zmiany wrzucasz do repozytorium, dzięki czemu możesz tworzyć pull requesty, które mogą przejrzeć współpracujące osoby i dopiero gdy przejedzie proces code review, wypuścisz zmiany na głównego brancha.
Gdy zmiany trafią już na głównego brancha (domyślnie jest to main, ale można to zmienić w razie konieczności) do akcji automatycznie (w tle) wkroczy Netlify. Wykona on builda, testy, które zdefiniowałeś w ramach builda i dopiero jak pomyślnie zbuduje paczkę, zmiany trafią na produkcję.
Całość zajmie Ci więc może z 2 minuty (wypchnięcie do repo i wykonanie deploya przez Netlify).
Jeśli nie wiesz co to Netlify – to w skrócie platforma hostingowa umożliwiająca szybkie publikowanie zmian. Wykorzystywany jest głównie przy aplikacjach frontendowych. Więcej informacji znajdziesz na https://www.netlify.com/.
Netlify konfigurujesz w ten sposób, że zakładasz nowy projekt, w sekcji Build & deploy settings wskazujesz na głównego brancha do swojego repozytorium (na GitHubie dajesz ustawiasz zezwolenia)
Na screenie powyżej widać jak to działa – przy buildzie wykonuje się polecenie yarn run build, które kompiluje pliki deweloperskie do folderu dist.
Ja pod ten projekcik podpiąłem zakupioną domenę books.co.pl – koszt około 11zł na rok :), ale zakup domeny nie jest konieczny i możesz skorzystać z darmowej nazwy utrzymywanej w domenie netlify.app (w moim przypadku wybrałem sobie books-co.netlify.app).
Podpięcie zakupionej domeny wymaga ustawienia DNSów kierujących na Netlify i odczekania, aż zmiany rozpropagują się między serwerami DNS. W przypadku posiadania własnej domeny warto wyłączyć duplikat strony utrzymywanej w domenie netlify.app (czyli – w moim przypadku – books-co.netlify.app). Jeśli oczywiście robisz serwis, który powinien być SEO friendly. Ja raczej nie będę pozycjonować books.co.pl 🙂
Aha, Netlify umożliwia także poprzez API wymuszone pobranie repozytorium i zrobienie deploya. To też bywa przydatne.
Repozytorium books.co.pl: https://github.com/arturslab/vue-books-catalog
Strona: https://books.co.pl