Tworzenie stron internetowych to zawsze ekscytująca perspektywa. Pozwala programistom mieć swoją ścieżkę do tworzenia aplikacji internetowych. Mogą wybrać ramy, technologię, narzędzia i filozofię, z których chcą korzystać.
Jedną z takich filozofii jest Jamstack. Oferuje elastyczne podejście do rozwiązywania problemów związanych z tworzeniem stron internetowych.
Z tego artykułu dowiesz się, jak zbudować swoją pierwszą aplikację Jamstack. Zacznijmy.
Spis treści:
Co to jest Jamstack?
Jamstack to jedna z nowych filozofii tworzenia sieci. Technicznie rzecz biorąc, oferuje programistom komponowalną architekturę internetową. Możesz wybrać swoje ramy i narzędzia, aby osiągnąć ten sam cel.
Jeśli się przyjrzysz,
Dżem + stos = JAMstos.
Jamstack składa się z trzech głównych komponentów:
- J dla JavaScriptu
- A dla interfejsu programowania aplikacji (API)
- M jak znaczniki
Takie podejście oddziela logikę biznesową od danych, oddzielając warstwę obsługi sieci. Korzyści obejmują:
- Szybszy czas ładowania (prawie natychmiastowy).
- Elastyczny i szybki przepływ pracy programistycznej.
- Poprawiona skalowalność i łatwość konserwacji.
Aby dowiedzieć się więcej o Jamstack, sprawdź Jamstack dla początkujących.
Historia Jamstacka
Jamstack jest stosunkowo nowy. W 2016 roku Matt Biilmann przedstawił Jamstack w prezentacji firmy, pokazując światu, jak zbudować stronę internetową bez podążania tradycyjną drogą.
Rozwiązanie oddziela logikę aplikacji od zależności od serwera zaplecza. Tak więc większość treści jest udostępniana za pośrednictwem plików statycznych z sieciami CDN — funkcjami dynamicznymi obsługiwanymi i dostępnymi za pośrednictwem interfejsów API. A jeśli jakiekolwiek działania dynamiczne muszą zostać przetworzone przez serwer, są one kompilowane i przesyłane do sieci CDN, zanim użytkownik końcowy uzyska do nich dostęp.
Aby lepiej zrozumieć historię Jamstack, musimy przyjrzeć się statycznym i dynamicznym stronom internetowym.
- Statyczna witryna internetowa: statyczna witryna internetowa jest hostowana na serwerze, ale nie ma aspektów dynamicznych. W początkowej erze Internetu większość witryn była witrynami statycznymi, obsługującymi HTML, CSS i obrazy przechowywane na serwerze. Podejście jest szybkie, ponieważ serwer nie musi tracić czasu na przetwarzanie żądania użytkownika i zawsze ma gotowe pliki. Jednak brak możliwości zmiany czegokolwiek prowadzi do braku interaktywności.
- Witryna dynamiczna: Witryny dynamiczne oferują interaktywność, przetwarzając żądania użytkowników i generując wymagany kod HTML do wyświetlenia. Podejście jest powolne, ale dodaje korzyści z interaktywności. Większość nowoczesnych witryn to witryny dynamiczne. Najlepszym przykładem mogą być strony oparte na WordPressie.
A potem mamy strony internetowe Jamstack. Dowiedzmy się, jak rozwiązał problem witryn statycznych i dynamicznych.
Strony internetowe Jamstack: jak działają?
Jamstack rozwiązuje dwa podstawowe problemy:
- Wolny czas ładowania witryny dynamicznej
- Interaktywność witryn statycznych
Witryna Jamstack obsługuje pliki statyczne, co jest szybkie. Ale zawiera również JavaScript, który może wchodzić w interakcje z interfejsami API w celu udostępniania treści dynamicznych.
Za kulisami będziesz potrzebować statycznego generatora witryn, aby wykonać ciężkie prace związane z tworzeniem statycznych stron internetowych.
Te statyczne generatory stron internetowych używają Markdown do obsługi statycznych stron internetowych. Generator witryn statycznych generuje pliki statyczne z dostępnych plików HTML, CSS i JavaScript. Po opracowaniu witryna statyczna jest następnie obsługiwana przez sieci CDN.
Gdy udostępniasz pliki statyczne, strony ładują się niemal natychmiast. Aby jednak dodać dynamiczny aspekt do witryny, musisz polegać na JavaScript. Pliki JavaScript mogą łączyć się z interfejsami API i dodawać dynamiczne dane, komunikując się z bazą danych.
Tworzenie pierwszej witryny Jamstack
Ponieważ Jamtack oferuje swobodę, możesz wybrać dowolny framework Jamstack/generator witryn statycznych, w tym Hugo, Gatsby, Next.js, Hexo i inne.
Przeczytaj także: Najlepsze frameworki dla JamStack
A w celu wdrożenia możesz wdrożyć go w GitHub Pages, Netlify, Azure Static Web Apps i innych.
Użyjemy Hugo do programowania Jamstack i Netlify do hostowania naszej witryny na potrzeby tego samouczka.
W samouczku założono, że masz podstawową wiedzę na temat sieci Web. Musisz wiedzieć, jak działa sieć. Ponadto powinieneś również wiedzieć, jak korzystać z Git.
Zacznijmy.
# 1. Instalacja Wymagania wstępne: Go i Git
Aby zainstalować Hugo, potrzebujesz dwóch rzeczy: Git i Go. Potrzebujemy Git, aby usprawnić nasz przepływ pracy nad kompilacją (zobaczysz to później w Netlify). Go jest wymagane, ponieważ Hugo jest na nim zbudowany.
Używamy systemu Ubuntu działającego na WSL 2 w systemie Windows 11. Dostęp do jądra Ubuntu uzyskujemy bezpośrednio z systemu Windows.
Przeczytaj także: Windows 11 spotyka Linuksa: szczegółowe omówienie możliwości WSL2
Możesz wybrać system operacyjny, Windows, Linux lub Mac.
Instalowanie Gita
W Ubuntu możesz zainstalować Git, uruchamiając następujące polecenie.
$ sudo apt update $ sudo apt install git
W przypadku systemu Windows konieczne będzie pobranie binarnych instalatorów systemu Windows. Sprawdź nasz kompletny przewodnik instalacji Git.
Aby sprawdzić, czy Git jest poprawnie zainstalowany, wpisz następujące polecenie.
[email protected]:~$ git --version git version 2.34.1
Instalowanie Go
Teraz nadszedł czas, aby zainstalować Golang. Aby to zrobić, musisz uruchomić kilka poleceń w systemie Linux. Więc zróbmy to etapami.
Krok 1: Usuń poprzednią instalację Go i utwórz lokalne drzewo Go.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Krok 2: Dostosowywanie zmiennej środowiskowej PATH
export PATH=$PATH:/usr/local/go/bi
Krok 3: Na koniec sprawdź, czy Golang jest poprawnie zainstalowany.
$ go version. #output go version go1.18.1 linux/amd64
Świetnie, teraz jesteśmy gotowi do zainstalowania Hugo!
Instalowanie Hugo
W zależności od tego, czy używasz Homebrew czy Chocolately, musisz użyć jednego z poniższych poleceń.
Dla Homebrew:
$ brew install hugo
Dla czekolady:
$ brew install hugo -confirm
A jeśli nie używasz żadnego z nich, możesz zainstalować je bezpośrednio ze źródła.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Aby sprawdzić, czy Hugo został pomyślnie zainstalowany, uruchom następujące polecenie.
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/newsblog.pl/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. Tworzenie witryny Hugo
Hugo oferuje łatwy sposób tworzenia witryny. Aby to zrobić, uruchom następujące polecenie.
$ hugo new site newsblog.pl-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/newsblog.pl-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. Wybór motywu Hugo
Hugo oferuje dostęp do mnóstwa motywów. Motywy te stanowią punkt wyjścia dla Twojego projektu. Aby zbudować witrynę Jamstack z Hugo, potrzebujesz motywu.
#4. Tworzenie witryny małej firmy za pomocą Jamstack
W samouczku użyjemy motywu Hugo Hero. Ten uniwersalny motyw oferuje takie funkcje, jak sekcje o pełnej szerokości i tworzenie portfolio za pośrednictwem Markdown.
Aby zainstalować motyw, skopiuj jego link do repozytorium i sklonuj go. Przed kontynuowaniem upewnij się, że znajdujesz się w katalogu głównym.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Kopiowanie zawartości domyślnej
Aby użyć zawartości domyślnej w witrynie, uruchom następujące polecenie.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Kopiuje zawartość folderu exampleSite do katalogu głównego Twojej witryny.
Aktualizowanie pliku Config.toml
Następnie musimy edytować plik Config.toml. Przechowuje informacje o konfiguracji projektu i konieczne jest jego prawidłowe skonfigurowanie, aby witryna Jamstack działała.
Na razie musisz edytować następujący wiersz.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Uwaga: Musisz aktualizować plik Config.toml w miarę postępu projektu. Ponadto, ponieważ korzystasz z treści domyślnej, plik Config.toml jest aktualizowany w celu uwzględnienia zawartości przykładowej.
Testowanie naszej witryny Jamstack
Aby uruchomić naszą witrynę, musimy ponownie wygenerować witrynę Hugo za pomocą polecenia hugo.
$ hugo
Następnie rozkręcamy serwer. Aby to zrobić, uruchom komendę hugo serve.
$ hugo serve
#output [email protected]:~/newsblog.pl$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/newsblog.pl/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/newsblog.pl/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Uwaga: Twoja witryna jest teraz hostowana i dostępna pod adresem 127.0.0.1. Jeśli z jakiegoś powodu nie otwiera się, spróbuj otworzyć alternatywny adres podany obok. W tym przypadku jest to localhost:42973
Edytowanie motywów Domyślna zawartość
Od tego momentu możesz edytować domyślną zawartość. Możesz to zrobić, przechodząc do folderu Zawartość. Edytujmy zawartość strony indeksu. Aby to zrobić, przejdź do Treść > Praca > Index.md
Tak to wygląda po edycji.
Tworzenie witryny blogowej
Musisz wybrać odpowiedni motyw, jeśli chcesz tylko stworzyć bloga. W tym celu użyjmy motywu Hyde.
Podobnie jak w przypadku konfiguracji naszej nowej witryny, musisz uruchomić następujące polecenia.
$ hugo new site newsblog.pl-jamstack $ cd newsblog.pl-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Następnie edytuj plik Config.toml, aby dodać wartość theme = „hyde”.
Utwórz nowy post
Musisz uruchomić polecenie hugo new, aby utworzyć nowy post, a następnie plik Markdown.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Edycja postu
Aby edytować nowo utworzony post hellogeefklare.md, otwórz plik hellogeekflare.md w preferowanym edytorze tekstu.
Pokaże ci następującą zawartość.
--- title: "Hello newsblog.pl" date: 2023-05-04T11:39:10+05:30 draft: true ---
Tutaj możesz dodać dowolną treść w Markdown.
Dodajmy następującą zawartość w Markdown.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Po umieszczeniu powyższej treści w pliku .md powinien on wyglądać jak poniżej (w zależności od edytora używamy Visual Studio Code).
Jednak będzie wyglądać zupełnie inaczej, gdy go podamy.
Uwaga: Pamiętaj, aby zmienić wartość wersji roboczej z „true” na „false”
Wspaniały! Stworzyliśmy dwie witryny Jamstack, jedną witrynę dla małych firm i jeszcze jednego bloga.
Po edycji witryny możesz wygenerować pliki, uruchamiając polecenie hugo. Utworzy plik i umieści go w folderze /public.
$ hugo
#5. Wdrażanie witryny Jamstack w Netlify
Po utworzeniu naszych witryn, wdróżmy je. W tym celu użyjemy Netlify.
Netlify to usługa wspierana przez CDN, która oferuje użytkownikom takim jak Ty hostowanie szybkich witryn. Możesz połączyć Netlify z Githubem i zautomatyzować ten proces. Jest to bezpłatna usługa z niektórymi funkcjami za paywallem.
Naszym zadaniem jest przekazanie kodu do Netlify i pozwolenie Netlify zająć się wszystkim za nas.
Lokalne konfigurowanie repozytorium Git
Nadszedł czas, abyśmy skonfigurowali repozytorium Git.
Aby zainicjować repozytorium Git, uruchom następujące polecenie w katalogu głównym projektu.
$ git init
Następnie musimy skonfigurować motyw jako moduł podrzędny. To ważny krok. Technicznie rzecz biorąc, tworzy podrepozytoria w twoim repozytorium. (Pamiętasz, zrobiłeś klona Gita do motywu Hugo?). Zapewni ci to większą kontrolę nad witryną Jamstack.
Możesz na przykład pobrać aktualizacje swojego motywu. Musisz to również zrobić, ponieważ Netlify potrzebuje motywów jako submodułów do ich hostowania.
Aby więc dodać motyw jako moduł podrzędny, uruchom następujące polecenie.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/newsblog.pl-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/newsblog.pl-jamstack$
Tworzenie repozytorium na GitHub
Po zakończeniu konfiguracji lokalnej czas na utworzenie nowego repozytorium GitHub.
Po utworzeniu musisz dodać pochodzenie do lokalnego repozytorium.
$ git remote add origin https://github.com/logan99/newsblog.pl-jamstack-tutorial.git
Teraz, pociągnij to.
$ git branch -M main $ git pull origin main
Utwórz nowe zatwierdzenie
Teraz nadszedł czas na utworzenie nowego zatwierdzenia. Uruchom następujące polecenie, aby dodać wszystkie pliki do głównej gałęzi.
$ git add .
Teraz uruchom polecenie zatwierdzenia, aby zatwierdzić zmiany.
$ git commit -m “First commit”
#Output [email protected]:~/newsblog.pl-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Na koniec wypchnij zmiany do GitHub.
$ git push --set-upstream origin main
Uwaga: Aby działać, musisz wprowadzić swoją nazwę użytkownika i hasło GitHub.
#6. Praca z Netlify
Świetnie, nasze repozytorium zostało utworzone. Teraz przechodzimy do Netlify. Jeśli masz już konto, zaloguj się lub utwórz nowe konto.
W przypadku nowszych kont natychmiast uruchomi kreatora. W przeciwnym razie wylądujesz na pulpicie nawigacyjnym swojego konta. Jeśli wylądujesz na pulpicie nawigacyjnym, kliknij opcję „Dodaj nową witrynę” w sekcji Witryny.
W sekcji Dodaj nową witrynę wybierz „Importuj istniejący projekt”.
Następnie poprosi Cię o wybranie dostawcy Git. Ponieważ używamy GitHub, wybierzemy go. Możesz także wybrać Bitbucket, GitLab i Azure DevOps.
Następnie wyświetli listę wszystkich twoich projektów. W tym miejscu wybierz repozytorium GitHub utworzone dla tego projektu. Dla nas jest to „newsblog.pl-jamstack-tutorial”. Możesz także przesłać inny projekt, który stworzyliśmy.
Następnie poprosi Cię o wybranie gałęzi do wdrożenia i wybranie podstawowych ustawień kompilacji. Na razie możesz ustawić wszystko na domyślne.
Kliknij „Depoy Site”, aby ją wdrożyć.
Teraz musisz poczekać, aż Netlify zrobi swoje. Po wdrożeniu komunikat będzie brzmiał: „Twoja witryna została wdrożona”.
Teraz kliknij witrynę w lewym górnym rogu.
Zauważysz jednak, że witryna nie ładuje się poprawnie. Dzieje się tak, ponieważ podstawowy adres URL w pliku Config.toml nie jest ustawiony poprawnie. Ponieważ Netlify wygenerował adres URL nowego projektu, należy go dodać do pliku Config.toml.
W naszym przypadku strona znajduje się pod adresem https://animated-beijinho-2baa8b.netlify.app/
Oznacza to, że musimy dodać do niego baseURL.
Aby to zrobić, przejdź do lokalnej konfiguracji i zmień wartość.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Aby wypchnąć zmianę, musisz uruchomić następujące polecenie.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify jest inteligentny. Gdy wykryje nowe zatwierdzenie, automatycznie ponownie wdroży Twoją witrynę.
Jeśli teraz załadujesz swoją witrynę, załaduje się idealnie.
Woo! Zrobiłeś to. Wiem, że jest dużo do nauczenia się. Jednak przekonasz się, że cały proces jest intuicyjny, gdy zrobisz to kilka razy.
Ostatnie słowa
Jamstack zahaczył o nową erę programistów. Odblokowuje wydajność, a także poprawia sposób wdrażania witryn. Jamstack rozwinął się dzięki doskonałym członkom ekosystemu, takim jak Hugo i Netlify. Bez wątpienia będzie się tu tylko rozrastać.
Następnie sprawdź, jak wdrożyć aplikację frontendową do Netlify.