Jamstack: Buduj szybsze, bardziej wydajne strony internetowe

Sep 11, 2025
Jak
JAMstack main
(Kredyt obrazu: Future / Joseph Ford)

Jamstack jest metodą tworzenia i serwowania stron internetowych z minimalnym obciążeniem wymaganym przez serwer. Dostaje swoją nazwę z technologii używanych w procesie budowania, JavaScript, API i Markup. Strony są zbudowane w języku znacznika z wyprzedzeniem i serwowane jako statyczne pliki HTML jako użytkownik żąda ich. Aby zbudować witrynę i przynieść te technologie, potrzebujesz odpowiednich narzędzi. Upewnij się, że sprawdziłeś nasze Najlepszy edytorów kodów Post, aby pomóc Ci zdecydować o najlepszym środowisku programistycznym dla Ciebie.

Tradycyjnie, gdy użytkownik kliknie na stronie internetowej odbywa się seria działań. Przeglądarka użytkowników wysyła żądanie do serwera witryny, działa przez kod Backend, generuje poprawną stronę, a dane są wysyłane do przeglądarki i renderowane jako strona internetowa. Dość dużo, co mogłoby pójść źle, a nawet wtedy, gdy pójdzie dobrze, jest nieco wolniejszy niż użytkownik jest wygodny w Błyskawicy Szybki Świat Cyfrowy, w którym teraz mieszkamy.

Ale korzystanie z jamstack oznacza szybsze bardziej wydajne witryny i mniejsze, aby pójść źle. W tym samouczku demonstrujemy, jak utworzyć stronę internetową blogu w jamstack, aby służyć jako wprowadzenie do koncepcji. Użyte narzędzia będą Hugo. Jako statyczny generator witryny, Netlify. jako narzędzie budowy i Github jako bezpłatny hosting plików.

Aby jeszcze bardziej poprawić swoje doświadczenie witryny, upewnij się, że wybierzesz idealny hosting Obsługa i najlepsza Kreator strony internetowej .

01. Pobierz wymagane narzędzia

Pobierz kopię Wiktor Hugo - Jest to jeden z kilku zestawów startowych, aby szybko uzyskać rzeczy z ziemi. Również upewnij się, że masz węzeł zainstalowany w środowisku programistycznym. 

https://github.com/netlify-templates/victor-hugo

02. Utwórz katalog roboczy i zainstaluj Hugo

Utwórz katalog i nazwij go Jamstack. . Tutaj będziemy pracować nad naszym maszyną do programowania. Wyodrębnij pobrane pliki dla Hugo do tego katalogu i otwórz go w wierszu polecenia. Aby zainstalować wszystkie zależności, otwarty wiersz polecenia lub terminal w folderze jamstack i uruchom NPM Install. 

npm install

03. Uruchom serwer

JAMstack03

(Kredyt obrazu: Joseph Ford)

Po zakończeniu zależności uruchom NPM Start. Serwer programistyczny prowadzi teraz lokalną kopię Victor Hugo, domyślnie dostępny w LocalHost: 3000 - Otwieranie, że link powinien pokazać ekran powitalny, jeśli wszystko się powiedzie. Po przetestowaniu naciśnij Ctrl. +. do Aby zatrzymać serwer.

04. Dodaj stronę i post

JAMstack04

(Kredyt obrazu: Joseph Ford)

Zmień katalog do folderu Witryny, a następnie za pomocą Hugo Nowy polecenie, dodaj Page-ON.md. i A. Post-one.md. . Deweloperzy pracujący w systemie Windows będą musieli pobrać plik Hugo.exe i dodać ścieżkę, aby uzyskać do pracy, ale łatwa do śledzenia dokumentacji istnieje na hugo. stronie internetowej. 

 Hugo New Page-one.md
Hugo New Post / Post-one.md

05. Dodaj treści do strony i post

Do celów testowych niektóre treści należy dodać do nowego postu i strony (dostałem ciężkie treści multimedialne? Powrót z najlepszymi magazyn w chmurze ). Otwórz katalog dla projektu w przeglądarce plików i przejdź do jamstack / witryny / treści. W tym folderze plik Page-ON.md. powinien teraz istnieć. Istnieje również folder nazwany Poczta który zawiera Post-one.md. Otwórz obie te pliki i dodaj pewne treści w Markdownie poniżej --- (lub w niektórych przypadkach +++) 

 # Lorem Ipsum Dolor Siedzieć Amet
## Consetetur Adipiscing * Elit *
Sed do eiusmod tempor incididunt ut laut
et Dolore Magna Alicda.

06. Dodaj motyw jako moduł

JAMstack06

(Kredyt obrazu: Joseph Ford)

Tekst wprowadzony w poprzednich plikach nie można oglądać bez motywu. Jako przykład zostanie użyty motyw Ananke. Usuń zawartość bieżącego strona / układy Folder, pozostawiając go pusty. Zrób nowy katalog w folderze witryny tematy , a następnie zmień go i uruchom następujący kod, aby zaimportować motyw jako podmodułu GIT. Uwaga: Normalne klonowanie nie jest kompatybilne z Netlify. 

 MKDIR
Tematy CD.
git submodule Dodaj HTTPS: // GitHub
Com / & LT; ThemeName & GT;
https://github.com/budparr/gohugo-Theme.
Ananke.Git Themes / Ananke

07. Skonfiguruj motyw i uruchom serwer

Skopiuj zawartość Strona / Themes / Gohugo-Theme Ananke / ExampyiTeTe / Config.toml do drugiego w folderze witryny. Na górze strony zastąp podstawowy adres URL " / ' i usuń linię Themesdir = '.. . Zapisz plik konfiguracyjny, otwórz terminal i uruchom NPM Start. Komenda. Możesz także zmienić nazwę strony internetowej (jeśli chcesz), zastępując tytuł wartość. 

 Witryna CD
NPM Start

08. Testuj w przeglądarce

otwarty http: // localhost: 3000 / Page-One / Aby zobaczyć tematu renderowania marki strony jako w pełni stylizowanej strony. Otwieranie strony głównej, pierwszy post będzie teraz widoczny. Oznacza to, że statyczny generator witryny jest teraz funkcjonalny.

09. Skonfiguruj menu

JAMstack09

(Kredyt obrazu: Joseph Ford)

Podczas przeglądania witryny jest zauważalny, że strona dokonana wcześniej nie jest wyświetlana w nawigacji. Wracając do treści, dodaj linię w konfiguracji masy przednia, aby powiedzieć Hugo, które menu, aby sprawić, że strona. 

 Toml
+++.
Menu = "Main"
+++.
Yaml.
---
Menu: "Main"
---

10. Naciśnij pliki do githuba

Następnie, animuj koło, aby odpowiedzieć na kliknięcia użytkownika. Teraz strona statyczna jest gotowa, musi być dostępna na serwerze rozwoju. Pierwszym krokiem jest naciśnięcie kodu do Githuba. Utwórz nowe repozytorium na GitHub, a następnie użyj wiersza poleceń, aby nacisnąć kod z folderu projektu lub aplikacji Desktop Github. 

 Git Remote Add Origin https://github.com/[githubusername]/jamstactutorial.git
Git Push -u Origin Master

11. Połącz się z netlify

Netlify przyniesie wszystko razem, zbudować witrynę i służyć go w domenie tymczasowej. Zacznij od tworzenia konta w Netlify. i linkuj go z kontem Github. Gdy wszystko zostanie skonfigurowane kliknięcie Nowa strona z Git .

12. Połącz się z GitHub

W przypadku ciągłego wdrożenia kliknij Github Następnie wybierz repo, które zostało zrobione wcześniej w samouczku. Netlify powinien automatycznie wykryć najlepsze opcje budowy projektu. Powinien być czytany NPM Run Build. . Jeśli wszystko jest dobrze, kliknij opcję Wdrażaj.

13. Buduj witrynę i widok na link Netlify

JAMstack13

(Kredyt obrazu: Joseph Ford)

Po zbudowaniu witryny pojawi się komunikat rozmieszczony . Netlify dała witrynę tymczasową nazwę domeny, która może nie mieć sensu - można go zmienić po prostu, klikając ustawienia witryny. Zmień nazwę, a następnie kliknij link, aby zobaczyć witrynę załadowaną przez jamstack.

14. Zmień zmianę do wdrożenia

Witryna ładuje się teraz przez jamstack. Jest szybki błyskawiczny i automatycznie aktualizuje się, gdy wykonany jest zobowiązanie do Githuba. Aby to przetestować, wróć do lokalnego środowiska programistycznego i uruchom Hugo Nowa strona-Three.md. z katalogu witryny. Następnie otwórz utworzony plik, dodaj kilka treści, kliknij Zapisz i popełnij plik do repo. W ciągu chwil zauważysz, że aktualizacja jest na żywo na łączu Netlify.

15. Dodaj CMS do swojej strony statycznej

Praca w zwykłym znaczniku i za pomocą wiersza poleceń do tworzenia stron nie będzie dobrze usiąść z większością klientów. Aby strona była bardziej przyjazna, zainstaluj system zarządzania treścią. Leśnictwo.io. jest idealnym dopasowaniem do bieżącej konfiguracji. Przejdź na stronę i utwórz konto za pomocą GitHub.

16. Skonfiguruj leśnictwo

Kliknij Dodaj nową stronę, a następnie wybierz Hugo jako statyczny generator witryny, Git jako dostawcę i wypełnij informacje w następujących formularzach. Kliknij Wyślij, a nowy CMS obciąży, gotowy do zmian treści. Teraz strony mogą być po prostu edytowane z paska bocznego, a także posty i ogromna tablica innych opcji.

Chcesz dowiedzieć się więcej o projektowaniu stron internetowych? Następnie Subskrybuj netto. , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

Dowiedz się, jak zbudować lepiej JavaScript w Generracce (Kredyt obrazu: Future / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Nieodpłatne)

Dołącz do nas w kwietniu 2020 r. Z naszym składem Superstars JavaScript w GenerractJs - konferencja pomaga zbudować lepiej JavaScript. Zarezerwuj teraz generatEConf.com.

Czytaj więcej:

  • 8 Tagi HTML Musisz użyć (i 5, aby uniknąć)
  • 25 najlepszych API JavaScript
  • Jak ukryć swój kod JavaScript z View Source

Jak - Najpopularniejsze artykuły

Jak pobrać zdjęcia Instagram: wszystko, co musisz wiedzieć

Jak Sep 11, 2025

(Kredyt obrazu: Joseph Foley na Instagramie) Pobierz obrazy Instagram. - Pobierz z..

Fotografia portretowa: jak zrobić idealne portrety

Jak Sep 11, 2025

Fotografia portretowa to działanie bilansującego - jest tak wiele rzeczy, które należy pamiętać. Komunikowanie się z tematem i upewniając się, że czują się swobodnie, jest ważne...

Użyj brain.js do zbudowania sieci neuronowej

Jak Sep 11, 2025

(Kredyt obrazu: Getty Images) Brain.js to fantastyczny sposób na zbudowanie sieci neuronowej. Wystarczy umieścić, ..

Jak obrócić WordPress w konstruktor wizualny

Jak Sep 11, 2025

(Kredyt obrazu: Elementor / Joseph Ford) Budowniczych wizualnych istniejących przez długi czas na WordPress, ale za..

7 najlepszych wskazówek na rozpoczęcie własnego biznesu

Jak Sep 11, 2025

Jeśli czułeś się utknął w kreatywnej koleinie, warto mieć chwilę, aby wziąć udział w swojej karierze i zdecydować, gd..

Jak strukturować zapytania medialne w Sass

Jak Sep 11, 2025

Praktycznie każda strona jest teraz zbudowana z przynajmniej skinieniem do reagującym do projektowania stron internetowych. Spo..

Dodaj animacje UI na witrynę

Jak Sep 11, 2025

Większość ludzi widzi wielokrotnie interfejsy użytkownika, niezależnie od tego, czy jest w środku aplikacji mobilnej, czy n..

Zbuduj prosty odtwarzacz muzyczny z reakcją

Jak Sep 11, 2025

Reagować Jest popularną biblioteką JavaScript dla interfejsów użytkownika budynku, aw tym samouczku pokażę Ci,..

Kategorie