Jamstack: Sestavte rychlejší, efektivnější webové stránky dnes

Sep 11, 2025
jak
JAMstack main
(Image Credit: Budoucnost / Joseph Ford)

Jamstack je způsob vytváření a obsluhování webových stránek s minimálním zatížením potřebným serverem. Dostane své jméno z technologií používaných v procesu sestavení, JavaScript, API a Markup. Stránky jsou postaveny v označení jazyka dopředu a sloužili jako statické soubory HTML jako uživatel požaduje jejich. Chcete-li vybudovat místo a přinést tyto technologie společně, potřebujete správné nástroje. Ujistěte se, že se podíváte na naše nejlepší editory kódu Post pomoci rozhodnout o nejlepším vývojovém prostředí pro vás.

Tradičně, když uživatel klikne na webovou stránku, probíhá série akcí. Prohlížeč uživatelů odešle požadavek na server webových stránek, běží přes kód backend, generuje správnou stránku a data jsou odeslána zpět do prohlížeče a vykresleny jako webová stránka. Docela hodně, co by se mohlo pokazit, a dokonce i když to jde dobře, je to mírně pomalejší než uživatel je pohodlný v blesku rychlého digitálního světa, ve kterém žijeme.

Ale používání jamstacku znamená rychlejší efektivnější místa a méně pokazit. V tomto tutoriálu demonstrujeme, jak nastavit webové stránky blogu v jamstacku, aby sloužil jako úvod do konceptů. Použité nástroje budou Hugo. jako statický generátor webu, NetLify. jako nástroj sestavení a Github. jako volný hosting pro soubory.

Pro další zlepšení zkušeností s webem se ujistěte, že si vyberete perfektní web hosting Servis a nejlepší Webové stránky Builder. .

01. Stáhněte si požadované nástroje

Stáhněte si kopii Victor Hugo. - To je jeden z několika startovacích sad, aby se věci dostaly z země rychle. Také se ujistěte, že máte uzel nainstalován ve vývojovém prostředí. 

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

02. Vytvořte pracovní adresář a nainstalujte Hugo

Vytvořte adresář a pojmenujte jej Jamstack. . To je místo, kde budeme pracovat na našem vývojovém stroji. Extrahujte stažené soubory pro Hugo do tohoto adresáře a otevřete jej příkazového řádku. Chcete-li nainstalovat všechny závislosti, otevřete příkazový řádek nebo terminál ve složce jamstack a spustit NPM Install. 

npm install

03. Spusťte server

JAMstack03

(Image Credit: Joseph Ford)

Po dokončení závislostí spusťte START NPM. Vývojový server je nyní spuštěn místní kopii Victor Huga, přístupné ve výchozím nastavení v localhost: 3000 - otevření tohoto odkazu by měl ukázat uvítací obrazovku, pokud bylo vše úspěšné. Po testování stiskněte Ctrl. +. C zastavit server.

04. Přidejte stránku a příspěvek

JAMstack04

(Image Credit: Joseph Ford)

Změňte adresář do složky webu a potom pomocí Hugo New. příkaz, přidat page-One.md. a A. Post-one.md. . Vývojáři pracující v systému Windows budou muset stáhnout soubor Hugo.exe a přidat cestu k tomu, aby se do práce, ale snadno sledovat dokumentaci existuje na hugo. webová stránka. 

 Hugo New Page-one.md
Hugo Nový post / post-one.md

05. Přidat obsah na stránku a příspěvek

Pro účely testování musí být některý obsah přidán do nového příspěvku a stránky (má mediální těžký obsah? Zálohujte to s nejlepším cloudové úložiště ). Otevřete adresář projektu v prohlížeči souborů a přejděte na JamStack / Site / Obsah. V rámci této složky soubor page-One.md. nyní existovat. Existuje také složka s názvem pošta který obsahuje. Post-one.md. Otevřete oba tyto soubory a přidejte nějaký obsah v zmenšeném zástupci níže --- (nebo v některých případech +++) 

 # Lorem Ipsum Dolor Sit Amet
## CONSETETUR ADIPCISCING * ELIT *
Sed do eiusmod temuche inccidtunt ut labor
et Dolore Magna Aliqua.

06. Přidejte téma jako dílčí modul

JAMstack06

(Image Credit: Joseph Ford)

Text zadaný v předchozích souborech nelze zobrazit bez motivu. Jako příklad se použije téma Ananke. Odstranit obsah aktuálního místo / rozložení Složka, takže je prázdná. Vytvořte nový adresář ve složce webu témata , pak se na něj změníte a spusťte následující kód pro import motivu jako submodule GIT. Poznámka: Normální klonování není kompatibilní s NetLify. 

 MKDIR Témata
témata CD
git submodule Přidat https: // github
com / rt; themcreator & gt; / & lt; tempo & gt;
https://github.com/budparr/gohugo-theme.
Ananke.Git Témata / Ananke

07. Konfigurace motivu a spustit server

Kopírovat obsah Místo / motivy / gohugo-téma Ananke / ukázky / config.toml na složku webu. V horní části stránky vyměňte základní adresu URL ' / ' a odstranit řádek themesdir = '../ .. . Uložte konfigurační soubor, otevřete terminál a spusťte NPM START. příkaz. Můžete také změnit název webové stránky (pokud chcete) nahrazením titul hodnota. 

 CD
NPM Start

08. Test v prohlížeči

Otevřeno http: // localhost: 3000 / page-one / Chcete-li zobrazit téma vykreslování značení stránky jako plně stylizované stránky. Otevření domovské stránky, první příspěvek bude nyní viditelný. To znamená, že statický generátor webu je nyní funkční.

09. Nakonfigurujte nabídku

JAMstack09

(Image Credit: Joseph Ford)

Při prohlížení webové stránky je patrné, že stránka provedená dříve se nezobrazí v navigaci. Vrátí se do obsahu, přidejte řádek v konfiguraci přední záležitostí, abyste mohli říci Hugo, které menu vykreslují stránku. 

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

10. Zatlačte soubory do GitHub

Dále animovat kruh reagovat na kliknutí uživatele. Nyní je statický web nahoru a běží, bude muset být přístupný na vývojovém serveru. Prvním krokem je stisknout kód do GitHub. Vytvořit nové úložiště na GitHub a potom pomocí příkazového řádku stiskněte kód ze složky projektu nebo aplikaci GitHub Desktop. 

 GIT vzdálený Přidat původ https://github.com/[githubusername]/jamstacktutorial.git
git push -u origin mistr

11. Připojení k NetLify

NetLify přinese vše společně, stavět stránky a sloužit ho na dočasnou doménu. Začněte vytvořením účtu na adrese NetLify. a propojte jej s účtem GitHub. Jakmile je vše nastaveno, klepněte na tlačítko Nové stránky od Git .

12. Připojte se k GitHub

Pro nepřetržité nasazení klepněte na tlačítko Github. , pak vyberte repo, který byl proveden dříve v tutoriálu. NetLify by měl automaticky zjistit nejlepší možnosti sestavení projektu. Mělo by to přečíst NPM Run Build. . Pokud je vše v pořádku, klepněte na položku Nasadit.

13. Sestavte stránku a zobrazit odkaz NetLify

JAMstack13

(Image Credit: Joseph Ford)

Jakmile web postaví, zobrazí se zpráva nasazený . NetLify dal webovou stránku dočasný název domény, který nemusí dávat smysl - lze to změnit pouze kliknutím na nastavení webu. Změňte název a klepněte na odkaz a zobrazte stránka načtené prostřednictvím JamStack.

14. Proveďte změnu na nasazení testu

Webové stránky nyní načte přes Jamstack. Je to blesk rychlé a automaticky se aktualizuje, když je potvrzeno do GitHub. Chcete-li to testovat, vraťte se do místního rozvojového prostředí a spusťte Hugo New Page-three.md. z adresáře webu. Poté otevřete vytvořený soubor, přidejte nějaký obsah, klepněte na tlačítko Uložit a spáchat soubor repo. V okamžiku si všimnete aktualizace, která je žije na odkazu NetLify.

15. Přidejte CMS na statické místo

Práce v prostý značení a používání příkazového řádku pro vytváření stránek nebude s většinou klientů dobře sedět. Chcete-li webovou stránku přátelštější, nainstalujte systém správy obsahu. Lesnictví.OO je ideální pro aktuální nastavení. Přejděte na webové stránky a vytvořte si účet pomocí GitHub.

16. Konfigurace lesnictví

Klikněte na Přidat novou stránku a vyberte Hugo jako statický generátor webu, GIT jako poskytovatele a vyplňte informace v následujících formulářích. Klepněte na tlačítko Odeslat a nové CMS bude načíst, připravené ke změnám obsahu. Nyní stránky mohou být jednoduše upraveny z postranního panelu, stejně jako příspěvky a obrovské množství dalších možností.

Chcete se dozvědět více o webovém designu? Pak Přihlásit se k odběru Net. Časopis nejprodávanějšího světa pro webové designéry a vývojáře.

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

Naučte se, jak budovat lepší JavaScript na GenerateJs (Image Credit: Budoucnost / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Připojte se k nám v dubnu 2020 s naším sestavy Superstars JavaScript na Generatejs - konference vám pomůže vybudovat lepší JavaScript. Kniha nyní generateconf.com.

Přečtěte si více:

  • 8 Tagy HTML musíte použít (a 5, abyste se vyhnuli)
  • 25 nejlepších JavaScript API
  • Jak skrýt kód JavaScriptu z pohledu Zobrazit zdroj

jak - Nejoblíbenější články

Sestavte rychlý reaktivní blog se SVELTEM a SAPPER

jak Sep 11, 2025

(Image Credit: Svelte) SAPPER je rámec postavený na vrcholu SVELTE. Zaměřuje se na rychlost z krabice s vykreslov..

Použijte brain.js vybudovat neurální síť

jak Sep 11, 2025

(Image Credit: Getty Images) Brain.js je fantastický způsob, jak vybudovat neuronovou síť. Jednoduše řečeno, n..

Jak změnit velikost obrázku ve Photoshopu

jak Sep 11, 2025

Vědět, jak změnit velikost obrázku ve Photoshopu je základní dovedností pro projektanty. Ať už nahráváte obrázek na w..

Vytvořte jednoduchý barevný graf

jak Sep 11, 2025

Svítit se s Barevná teorie se může zdát trochu příliš jako učení matematiky nebo vědy. Můžete cítit, že chcete být kreativní a vyjádřit se, nefungují výpo�..

Mistr vědy o optimalizaci rychlosti konverze

jak Sep 11, 2025

Optimalizace rychlosti konverze (CRO) je proces maximalizace konverzí ze stávajícího provozu. Pokud například dostanete 100..

Módní flexibilní rozložení s CSS Grid

jak Sep 11, 2025

CSS Grid je ideální pro vytváření dvouosé rozložení řádků a sloupců. Syntaxe je jednoduchá a vytváří rozložení ..

Jak přidat drama do pastelových uměleckých děl

jak Sep 11, 2025

Skvělé umělci, jako je Rembrandt a Caravaggio injekce jejich umělecká díla s trochou dramatu a intenzity, vytváří kusy p..

Vytvořit senzační západy slunce ve Photoshopu

jak Sep 11, 2025

Krásný západ slunce je taková věc zázrak, že někdo s kamerou cítí téměř povinnost ho zachytit. Pokud ..

Kategorie