Vytváření pro web je vždy vzrušující vyhlídka. Umožňuje vývojářům mít vlastní cestu k vytváření webových aplikací. Mohou si vybrat rámec, technologii, nástroje a filozofii, kterou chtějí používat.
Jednou z takových filozofií je Jamstack. Nabízí flexibilní přístup k řešení problému vývoje webu.
V tomto článku se dozvíte, jak vytvořit svou první aplikaci Jamstack. Začněme.
Co je Jamstack?
Jamstack je jednou z nových webových filozofií pro vytváření věcí pro web. Technicky nabízí vývojářům složitelnou webovou architekturu. K dosažení stejného cíle si můžete vybrat své rámce a nástroje.
Když se podíváte pozorně,
Jam + stack = JAMstack.
Jamstack se skládá ze tří hlavních komponent:
- J pro JavaScript
- A pro aplikační programovací rozhraní (API)
- M pro značky
Tento přístup odděluje obchodní logiku od dat a odděluje vrstvu webové zkušenosti. Mezi výhody patří:
- Rychlejší načítání (téměř okamžité).
- Flexibilní a rychlý vývojový pracovní postup.
- Vylepšená škálovatelnost a udržovatelnost.
Chcete-li si přečíst více o Jamstacku, podívejte se na Jamstack pro nováčky.
Historie Jamstacku
Jamstack je relativně nový. V roce 2016 Matt Biilmann představil Jamstack v prezentaci společnosti a ukázal světu, jak vytvořit web, aniž byste se vydali tradiční cestou.
Řešení odděluje aplikační logiku od závislosti na backendovém serveru. Většina obsahu je tedy poskytována prostřednictvím statických souborů s CDN – dynamické funkce podporované a přístupné prostřednictvím rozhraní API. A pokud server potřebuje zpracovat nějaké dynamické akce, je zkompilován a odeslán do CDN, než k nim přistoupí koncový uživatel.
Abychom lépe porozuměli historii Jamstacku, musíme se podívat na statické a dynamické webové stránky.
- Statický web: Statický web je hostován na serveru, ale nemá žádné dynamické aspekty. Během počáteční éry internetu byla většina webů statickými weby, které poskytovaly HTML, CSS a obrázky uložené na serveru. Přístup je rychlý, protože server nemusí trávit čas zpracováním požadavku uživatele a soubory má vždy připravené. Žádná možnost cokoliv změnit však nevede k žádné interaktivitě.
- Dynamický web: Dynamické weby nabízejí interaktivitu tím, že zpracovávají požadavky uživatelů a generují požadovaný kód HTML, který bude sloužit. Tento přístup je pomalý, ale přidává výhody interaktivity. Většina moderních webů jsou dynamické weby. Nejlepším příkladem by byly weby založené na WordPressu.
A pak tu máme webové stránky Jamstack. Pojďme se dozvědět, jak to vyřešilo problém statických i dynamických stránek.
Webové stránky Jamstack: Jak fungují?
Jamstack řeší dva základní problémy:
- Pomalé načítání dynamického webu
- Interaktivita statických stránek
Web Jamstack poskytuje statické soubory, což je rychlé. Obsahuje však také JavaScript, který může komunikovat s rozhraními API a poskytovat dynamický obsah.
V zákulisí budete potřebovat generátor statických stránek, který udělá těžkou práci při vytváření statických webových stránek.
Tyto generátory statických webových stránek používají Markdown k obsluze statických webových stránek. Generátor statických stránek generuje statické soubory z dostupných souborů HTML, CSS a JavaScript. Po vyvinutí je statický web obsluhován prostřednictvím sítí CDN.
Při poskytování statických souborů se weby načítají téměř okamžitě. Chcete-li však webu přidat dynamický aspekt, musíte se spolehnout na JavaScript. Soubory JavaScriptu se mohou připojit k rozhraním API a přidávat dynamická data prostřednictvím komunikace s databází.
Budování prvního webu Jamstack
Jelikož Jamtack nabízí svobodu, můžete si vybrat jakýkoli Jamstack framework/generátor statických stránek, včetně Hugo, Gatsby, Next.js, Hexo a dalších.
Čtěte také: Nejlepší rámce pro JamStack
A pro nasazení jej můžete nasadit na stránky GitHub, Netlify, Azure Static Web Apps a další.
Použijeme Hugo pro vývoj Jamstack a Netlify k hostování našich stránek pro tento tutoriál.
Výukový program předpokládá, že máte základní znalosti o webu. Musíte vědět, jak web funguje. Kromě toho byste měli také vědět, jak používat Git.
Začněme.
#1. Předpoklady instalace: Go and Git
Chcete-li nainstalovat Hugo, potřebujete dvě věci: Git a Go. Potřebujeme Git, aby zefektivnil náš pracovní postup při sestavování (uvidíte to později s Netlify). Go je vyžadován, protože Hugo je na tom postaven.
Používáme Ubuntu běžící na WSL 2 na Windows 11. K jádru Ubuntu přistupujeme přímo z Windows.
Přečtěte si také: Windows 11 Meets Linux: Hluboký ponor do schopností WSL2
Můžete si vybrat operační systém Windows, Linux nebo Mac.
Instalace Git
V Ubuntu můžete Git nainstalovat spuštěním následujícího příkazu.
$ sudo apt update $ sudo apt install git
V případě Windows si budete muset stáhnout binární instalační programy Windows. Podívejte se na naši kompletní instalační příručku Git.
Chcete-li ověřit, zda je Git nainstalován správně, zadejte následující příkaz.
[email protected]:~$ git --version git version 2.34.1
Instalace Go
Nyní je čas nainstalovat Golang. Chcete-li to provést, musíte v systému Linux spustit několik příkazů. Udělejme to tedy po krocích.
Krok 1: Odeberte předchozí instalaci Go a vytvořte místní strom Go.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Krok 2: Přizpůsobení proměnné prostředí PATH
export PATH=$PATH:/usr/local/go/bi
Krok 3: Nakonec zkontrolujte, zda je Golang správně nainstalován.
$ go version. #output go version go1.18.1 linux/amd64
Skvělé, nyní jsme připraveni nainstalovat Huga!
Instalace Huga
V závislosti na tom, zda používáte Homebrew nebo Chocolately, budete muset použít jeden z následujících příkazů.
Pro homebrew:
$ brew install hugo
Na čokoládu:
$ brew install hugo -confirm
A pokud žádný z nich nepoužíváte, můžete je nainstalovat přímo ze zdroje.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Chcete-li zkontrolovat, zda je Hugo úspěšně nainstalován, spusťte následující příkaz.
$ 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/etechblog.cz/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. Vytvoření webu Hugo
Hugo nabízí snadný způsob, jak vytvořit web. Chcete-li tak učinit, spusťte následující příkaz.
$ hugo new site etechblog.cz-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/etechblog.cz-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. Výběr motivu Hugo
Hugo nabízí přístup k mnoha tématům. Tato témata představují výchozí bod pro váš projekt. A k vytvoření webu Jamstack s Hugem potřebujete téma.
#4. Vytvoření webu pro malé firmy s Jamstackem
Pro tutoriál použijeme téma Hugo Hero. Toto víceúčelové téma nabízí funkce, jako jsou sekce v plné šířce a vytváření portfolia prostřednictvím Markdown.
Chcete-li motiv nainstalovat, zkopírujte odkaz na jeho úložiště a naklonujte jej. Než budete pokračovat, ujistěte se, že jste v kořenovém adresáři.
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.
Kopírování výchozího obsahu
Chcete-li na webu použít výchozí obsah, spusťte následující příkaz.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Zkopíruje obsah ve složce exampleSite do kořenového adresáře vašeho webu.
Aktualizace souboru Config.toml
Dále musíme upravit soubor Config.toml. Ukládá informace o konfiguraci projektu a je nutné jej správně nastavit, aby váš web Jamstack fungoval.
Prozatím je potřeba upravit následující řádek.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Poznámka: Soubor Config.toml musíte průběžně aktualizovat, jak váš projekt postupuje. Protože jste použili výchozí obsah, váš soubor Config.toml se aktualizuje tak, aby vyhovoval ukázkovému obsahu.
Testování našeho webu Jamstack
Pro provoz našeho webu musíme znovu vygenerovat web Hugo pomocí příkazu hugo.
$ hugo
Dále roztočíme server. Chcete-li to provést, spusťte příkaz hugo serve.
$ hugo serve
#output [email protected]:~/etechblog.cz$ 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/etechblog.cz/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/etechblog.cz/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
Poznámka: Váš web je nyní hostován a dostupný na adrese 127.0.0.1. Pokud se z nějakého důvodu neotevírá, zkuste otevřít alternativní adresu uvedenou vedle. V tomto případě je to localhost:42973
Úprava motivů Výchozí obsah
Odtud můžete upravit výchozí obsah. Můžete to udělat tak, že přejdete do složky Obsah. Upravme obsah indexové stránky. Chcete-li tak učinit, přejděte na Obsah > Práce > Index.md
Takhle to vypadá po úpravě.
Vytvoření blogu
Pokud chcete vytvořit pouze blog, musíte si vybrat vhodné téma. Pro tento účel použijme téma Hyde.
Podobně jako jsme nastavili náš nový web, musíte spustit následující příkazy.
$ hugo new site etechblog.cz-jamstack $ cd etechblog.cz-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Dále upravte soubor Config.toml a přidejte hodnotu theme = ‚hyde‘.
Vytvořit nový příspěvek
Chcete-li vytvořit nový příspěvek, musíte spustit příkaz hugo new a poté soubor 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$
Úprava příspěvku
Chcete-li upravit nově vytvořený příspěvek hellogeefklare.md, otevřete soubor hellogeekflare.md ve vašem preferovaném textovém editoru.
Ukáže vám následující obsah.
--- title: "Hello etechblog.cz" date: 2023-05-04T11:39:10+05:30 draft: true ---
Zde můžete přidat jakýkoli obsah v Markdown.
Přidejme do Markdown následující obsah.
### 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*.
Jakmile vložíte výše uvedený obsah do souboru .md, měl by vypadat jako níže (v závislosti na vašem editoru používáme Visual Studio Code).
Při podávání však bude vypadat úplně jinak.
Poznámka: Nezapomeňte změnit hodnotu konceptu z „true“ na „false“
Skvělý! Vytvořili jsme dva weby Jamstack, jeden web pro malé firmy a další blog.
Po úpravě webu můžete vygenerovat soubory spuštěním příkazu hugo. Vytvoří soubor a vloží jej do složky /public.
$ hugo
#5. Nasazení webu Jamstack na Netlify
Když jsou naše stránky vytvořeny, pojďme je nasadit. Pro tento účel použijeme Netlify.
Netlify je služba podporovaná CDN, která uživatelům jako vy nabízí hostování rychlých stránek. Můžete propojit Netlify s Github a automatizovat proces. Jedná se o bezplatnou službu s některými funkcemi za paywallem.
Naším úkolem je poslat kód do Netlify a nechat Netlify, aby vše vyřídilo za nás.
Místní nastavení úložiště Git
Nyní je čas, abychom nastavili úložiště Git.
Chcete-li spustit úložiště Git, spusťte následující příkaz v kořenovém adresáři vašeho projektu.
$ git init
Dále musíme nastavit téma jako submodul. To je důležitý krok. Technicky to vytváří dílčí úložiště ve vašem úložišti. (Pamatujete si, že jste vytvořili klon git na téma Hugo?). Poskytne vám větší kontrolu nad vaším webem Jamstack.
Můžete si například stáhnout aktualizace svého motivu. Musíte to udělat také proto, že Netlify potřebuje témata jako submoduly k jejich hostování.
Chcete-li tedy téma přidat jako submodul, spusťte následující příkaz.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/etechblog.cz-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/etechblog.cz-jamstack$
Vytvoření úložiště na GitHubu
Po dokončení místního nastavení je čas vytvořit nové úložiště GitHub.
Po vytvoření musíte přidat původ do místního úložiště.
$ git remote add origin https://github.com/logan99/etechblog.cz-jamstack-tutorial.git
Teď to vytáhni.
$ git branch -M main $ git pull origin main
Vytvořte nový odevzdání
Nyní je čas vytvořit nové potvrzení. Spusťte následující příkaz a přidejte všechny soubory do hlavní větve.
$ git add .
Nyní spusťte příkaz commit pro potvrzení změn.
$ git commit -m “First commit”
#Output [email protected]:~/etechblog.cz-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
Nakonec změny odešlete na GitHub.
$ git push --set-upstream origin main
Poznámka: Abyste mohli pracovat, musíte zadat své uživatelské jméno a heslo GitHub.
#6. Práce s Netlify
Výborně, naše úložiště je nyní vytvořeno. Nyní se přesuneme na Netlify. Pokud již máte účet, přihlaste se nebo si vytvořte nový účet.
U novějších účtů za vás okamžitě spustí průvodce. V opačném případě se dostanete na hlavní panel svého účtu. Pokud se dostanete na řídicí panel, klikněte na možnost „Přidat nový web“ v části Weby.
V části Přidat nový web vyberte možnost Importovat existující projekt.
Poté vás požádá o výběr poskytovatele Git. Protože používáme GitHub, vybereme si ho. Můžete se také rozhodnout pro Bitbucket, GitLab a Azure DevOps.
Poté se zobrazí seznam všech vašich projektů. Odtud vyberte úložiště GitHub, které jste vytvořili pro tento projekt. Pro nás je to „etechblog.cz-jamstack-tutorial“. Můžete také nahrát jiný projekt, který jsme vytvořili.
Poté vás požádá, abyste vybrali větev, kterou chcete nasadit, a vyberte základní nastavení sestavení. Prozatím můžete vše nastavit na výchozí.
Klikněte na „Depoy Site“ pro nasazení.
Nyní musíte počkat, až Netlify udělá svou věc. Po nasazení se zobrazí zpráva „Váš web je nasazen.
Nyní klikněte na web vlevo nahoře.
Zjistíte však, že se stránka nenačítá správně. Důvodem je, že základní adresa URL v souboru Config.toml není správně nastavena. Protože Netlify vygenerovalo novou adresu URL projektu, musíte ji přidat do souboru Config.toml.
V našem případě je stránka na https://animated-beijinho-2baa8b.netlify.app/
To znamená, že k němu musíme přidat baseURL.
Chcete-li tak učinit, přejděte do místního nastavení a změňte hodnotu.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Chcete-li provést změnu, musíte spustit následující příkaz.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify je chytré. Když detekuje nové potvrzení, automaticky znovu nasadí váš web.
Pokud nyní načtete svůj web, načte se perfektně.
Wooo! Dokázali jste to. Vím, že se mám hodně co učit. Jakmile to však uděláte několikrát, zjistíte, že celý proces je intuitivní.
Závěrečná slova
Jamstack zahákl novou éru vývojářů. Odemyká výkon a také zlepšuje způsob nasazování webů. Jamstack se rozrostl o vynikající členy ekosystému, jako jsou Hugo a Netlify. Nepochybně vyroste jen odtud.
Dále se podívejte, jak nasadit frontendovou aplikaci do Netlify.