Construirea pentru web este întotdeauna o perspectivă interesantă. Le permite dezvoltatorilor să aibă calea lor pentru a construi aplicații web. Ei pot alege cadrul, tehnologia, instrumentele și filosofia pe care doresc să le folosească.
O astfel de filozofie este Jamstack. Oferă o abordare flexibilă pentru rezolvarea problemei dezvoltării web.
În acest articol, veți învăța cum să vă creați prima aplicație Jamstack. Să începem.
Cuprins
Ce este Jamstack?
Jamstack este una dintre noile filozofii web pentru a construi lucruri pentru web. Din punct de vedere tehnic, oferă dezvoltatorilor o arhitectură web componabilă. Vă puteți alege cadrele și instrumentele pentru a realiza același obiectiv.
Dacă te uiți cu atenție,
Jam + stivă = JAMstack.
Jamstack este format din trei componente principale:
- J pentru JavaScript
- A pentru interfața de programare a aplicațiilor (API)
- M pentru Markup
Această abordare separă logica afacerii de date, decuplând nivelul de experiență web. Beneficiile includ:
- Timp de încărcare mai rapid (aproape instantaneu).
- Un flux de lucru de dezvoltare flexibil și rapid.
- Scalabilitate și întreținere îmbunătățite.
Pentru a citi mai multe despre Jamstack, consultați Jamstack pentru începători.
Istoria Jamstack
Jamstack este relativ nou. În 2016, Matt Biilmann a introdus Jamstack în prezentarea companiei, arătând lumii cum să construiască un site web fără a merge pe calea tradițională.
Soluția separă logica aplicației de dependența de serverul backend. Deci, majoritatea conținutului este difuzat prin fișiere statice cu CDN-uri – caracteristici dinamice acceptate și accesate prin intermediul API-urilor. Și, dacă orice acțiune dinamică trebuie procesată de către server, aceasta este compilată și trimisă către CDN-uri, înainte de a fi accesată de utilizatorul final.
Pentru a înțelege mai bine istoria Jamstack, trebuie să ne uităm la site-urile web statice și dinamice.
- Site static: Un site web static este găzduit pe server, dar nu are aspecte dinamice. În timpul erei inițiale a Internetului, majoritatea site-urilor erau site-uri web statice care au servit HTML, CSS și imagini stocate pe un server. Abordarea este rapidă, deoarece serverul nu trebuie să petreacă timp procesând cererea utilizatorului și are întotdeauna fișierele pregătite. Cu toate acestea, nicio capacitate de a schimba ceva nu duce la interactivitate.
- Site web dinamic: site-urile dinamice oferă interactivitate prin procesarea solicitărilor utilizatorilor și generând codul HTML necesar pentru a fi difuzat. Abordarea este lentă, dar adaugă beneficiile interactivității. Cele mai multe site-uri moderne sunt site-uri dinamice. Cel mai bun exemplu ar fi site-urile web bazate pe WordPress.
Și, apoi, avem site-uri web Jamstack. Să aflăm cum a rezolvat problema atât a site-urilor statice, cât și a celor dinamice.
Site-uri web Jamstack: Cum funcționează?
Jamstack rezolvă două probleme de bază:
- Timpul de încărcare lent al site-ului dinamic
- Interactivitatea site-urilor statice
Un site Jamstack servește fișiere statice, ceea ce este rapid. Dar conține și JavaScript, care poate interacționa cu API-urile pentru a difuza conținut dinamic.
În culise, veți avea nevoie de un generator de site-uri static pentru a face munca grea de a crea pagini web statice.
Acești generatori de site-uri statice folosesc Markdown pentru a servi site-uri web statice. Generatorul de site-uri static generează fișiere statice din fișierele HTML, CSS și JavaScript disponibile. Odată dezvoltat, site-ul static este apoi servit prin CDN-uri.
Pe măsură ce difuzați fișiere statice, site-urile sunt încărcate aproape instantaneu. Cu toate acestea, pentru a adăuga un aspect dinamic site-ului, trebuie să vă bazați pe JavaScript. Fișierele JavaScript se pot conecta la API-uri și pot adăuga date dinamice comunicând cu o bază de date.
Construirea primului site web Jamstack
Deoarece Jamtack oferă libertate, puteți alege orice cadru Jamstack/generator de site static, inclusiv Hugo, Gatsby, Next.js, Hexo și alții.
Citește și: Cele mai bune cadre pentru JamStack
Și pentru implementare, îl puteți implementa în GitHub Pages, Netlify, Azure Static Web Apps și altele.
Vom folosi Hugo pentru dezvoltarea Jamstack și Netlify pentru a găzdui site-ul nostru pentru acest tutorial.
Tutorialul presupune că aveți o înțelegere de bază a web-ului. Trebuie să știi cum funcționează web-ul. În plus, ar trebui să știi și cum să folosești Git.
Să începem.
#1. Instalarea Cerințe preliminare: Go și Git
Pentru a instala Hugo, aveți nevoie de două lucruri: Git și Go. Avem nevoie de Git pentru a ne simplifica fluxul de lucru (veți vedea mai târziu cu Netlify). Go este necesar, deoarece Hugo este construit pe el.
Folosim Ubuntu care rulează pe WSL 2 pe Windows 11. Accesăm nucleul Ubuntu direct din Windows.
Citește și: Windows 11 întâlnește Linux: o scufundare profundă în capabilitățile WSL2
Puteți alege un sistem de operare, Windows, Linux sau Mac.
Instalarea Git
În Ubuntu, puteți instala Git rulând următoarea comandă.
$ sudo apt update $ sudo apt install git
În cazul Windows, va trebui să descărcați programe de instalare binare Windows. Consultați ghidul nostru complet de instalare Git.
Pentru a verifica dacă Git este instalat corect, tastați următoarea comandă.
[email protected]:~$ git --version git version 2.34.1
Instalarea Go
Acum, este timpul să instalați Golang. Pentru a face acest lucru, trebuie să rulați câteva comenzi pe Linux. Deci hai să o facem în pași.
Pasul 1: Eliminați instalarea Go anterioară și creați un arbore Go local.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Pasul 2: Personalizarea variabilei de mediu PATH
export PATH=$PATH:/usr/local/go/bi
Pasul 3: În cele din urmă, verificați dacă Golang este instalat corect.
$ go version. #output go version go1.18.1 linux/amd64
Minunat, acum suntem gata să instalăm Hugo!
Instalarea lui Hugo
În funcție de dacă utilizați Homebrew sau Chocolately, va trebui să utilizați una dintre următoarele comenzi.
Pentru Homebrew:
$ brew install hugo
Pentru Chocolatey:
$ brew install hugo -confirm
Și, dacă nu folosiți niciuna dintre ele, le puteți instala direct din sursă.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Pentru a verifica dacă Hugo este instalat cu succes, rulați următoarea comandă.
$ 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/tipstrick.ro/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. Crearea unui site Hugo
Hugo oferă o modalitate simplă de a crea un site. Pentru a face acest lucru, executați următoarea comandă.
$ hugo new site tipstrick.ro-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/tipstrick.ro-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. Alegerea unei teme Hugo
Hugo oferă acces la o mulțime de teme. Aceste teme oferă un punct de plecare pentru proiectul dvs. Și, pentru a construi un site Jamstack cu Hugo, aveți nevoie de o temă.
#4. Crearea unui site de afaceri mici cu Jamstack
Pentru tutorial, vom folosi tema Hugo Hero. Această temă multifuncțională oferă funcții precum secțiuni cu lățime completă și crearea de portofoliu prin Markdown.
Pentru a instala tema, copiați linkul său de depozit și clonați-o. Înainte de a continua, asigurați-vă că vă aflați în directorul rădăcină.
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.
Copierea conținutului implicit
Pentru a utiliza conținutul implicit cu site-ul, rulați următoarea comandă.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Copiază conținutul din folderul exampleSite în rădăcina site-ului dvs.
Se actualizează fișierul Config.toml
Apoi, trebuie să edităm fișierul Config.toml. Stochează informații de configurare a proiectului și este necesar să le configurați corect pentru ca site-ul dvs. Jamstack să funcționeze.
Pentru moment, trebuie să editați următoarea linie la acesta.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Notă: trebuie să continuați să actualizați fișierul Config.toml pe măsură ce proiectul progresează. De asemenea, deoarece ați folosit conținut implicit, Config.toml este actualizat pentru a se adapta la conținutul exemplu.
Testăm site-ul nostru Jamstack
Pentru a rula site-ul nostru, trebuie să generăm din nou site-ul Hugo cu comanda hugo.
$ hugo
Apoi, pornim serverul. Pentru a face acest lucru, rulați comanda hugo serve.
$ hugo serve
#output [email protected]:~/tipstrick.ro$ 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/tipstrick.ro/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/tipstrick.ro/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
Notă: site-ul dvs. este acum găzduit și disponibil la 127.0.0.1. Dacă, dintr-un motiv oarecare, nu se deschide, încercați să deschideți adresa alternativă dată alături. În acest caz, este localhost:42973
Editarea temelor de conținut implicit
De aici, sunteți liber să editați conținutul implicit. O puteți face accesând folderul Conținut. Să edităm conținutul paginii de index. Pentru a face acest lucru, accesați Conținut > Muncă > Index.md
Așa arată după ce o editați.
Crearea unui site de blog
Trebuie să alegeți o temă potrivită dacă doriți doar să creați un blog. În acest scop, să folosim tema Hyde.
Similar cu modul în care am configurat noul nostru site, trebuie să rulați următoarele comenzi.
$ hugo new site tipstrick.ro-jamstack $ cd tipstrick.ro-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Apoi, editați fișierul Config.toml pentru a adăuga valoarea theme = „hyde”.
Creați o postare nouă
Trebuie să rulați comanda hugo new pentru a crea o nouă postare, urmată de fișierul 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$
Editarea Postării
Pentru a edita postarea nou creată hellogeefklare.md, deschideți fișierul hellogeekflare.md în editorul de text preferat.
Vă va arăta următorul conținut.
--- title: "Hello tipstrick.ro" date: 2023-05-04T11:39:10+05:30 draft: true ---
Aici puteți adăuga orice conținut în Markdown.
Să adăugăm următorul conținut în 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*.
Odată ce ați introdus conținutul de mai sus în fișierul .md, ar trebui să arate ca cel de mai jos (în funcție de editorul dvs., folosim Visual Studio Code).
Cu toate acestea, va arăta complet diferit când îl servim.
Notă: asigurați-vă că modificați valoarea schiței de la „adevărat” la „fals”
Minunat! Am creat două site-uri web Jamstack, un site de afaceri mici și un alt blog.
După editarea site-ului, puteți genera fișierele rulând comanda hugo. Acesta va crea fișierul și îl va pune în folderul /public.
$ hugo
#5. Implementarea site-ului Jamstack pe Netlify
Cu site-urile noastre create, să le implementăm. În acest scop, vom folosi Netlify.
Netlify este un serviciu susținut de CDN care oferă utilizatorilor ca tine să găzduiască site-uri rapide. Puteți conecta Netlify cu Github și automatiza procesul. Este un serviciu gratuit cu câteva funcții în spatele pereților de plată.
Sarcina noastră este să împingem codul către Netlify și să-l lăsăm pe Netlify să se ocupe de totul pentru noi.
Configurarea depozitului Git local
Acum este timpul să configuram depozitul Git.
Pentru a iniția depozitul Git, rulați următoarea comandă la rădăcina proiectului.
$ git init
În continuare, trebuie să setăm tema ca submodul. Acesta este un pas important. Din punct de vedere tehnic, creează sub-arhive în cadrul depozitului dvs. (Îți amintești, ai făcut o clonă git pe tema Hugo?). Vă va oferi mai mult control asupra site-ului dvs. Jamstack.
De exemplu, puteți descărca actualizări ale temei dvs. De asemenea, trebuie să o faceți, deoarece Netlify are nevoie de teme ca submodule pentru a le găzdui.
Deci, pentru a adăuga tema ca submodul, rulați următoarea comandă.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/tipstrick.ro-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/tipstrick.ro-jamstack$
Crearea unui depozit pe GitHub
Odată ce configurarea locală este finalizată, este timpul să creați un nou depozit GitHub.
Odată creat, trebuie să adăugați originea în depozitul dvs. local.
$ git remote add origin https://github.com/logan99/tipstrick.ro-jamstack-tutorial.git
Acum, trage-l.
$ git branch -M main $ git pull origin main
Creați un nou commit
Acum, este timpul să creați un nou commit. Rulați următoarea comandă pentru a adăuga toate fișierele în ramura principală.
$ git add .
Acum, rulați comanda commit pentru a comite modificările.
$ git commit -m “First commit”
#Output [email protected]:~/tipstrick.ro-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
În cele din urmă, împingeți modificările în GitHub.
$ git push --set-upstream origin main
Notă: trebuie să introduceți numele de utilizator și parola GitHub pentru a funcționa.
#6. Lucrul cu Netlify
Excelent, depozitul nostru este acum creat. Acum, trecem la Netlify. Dacă aveți deja un cont, conectați-vă sau creați un cont nou.
Pentru conturile mai noi, va rula instantaneu un expert pentru dvs. În caz contrar, veți ajunge pe tabloul de bord al contului dvs. Dacă ajungeți pe tabloul de bord, faceți clic pe opțiunea „Adăugați site nou” din Site-uri.
Sub Adăugați site nou, alegeți „Importați un proiect existent”.
Apoi vă va cere să alegeți un furnizor Git. Pe măsură ce folosim GitHub, îl vom alege. De asemenea, puteți opta pentru Bitbucket, GitLab și Azure DevOps.
Apoi, va lista toate proiectele dvs. De aici, selectați depozitul GitHub pe care l-ați creat pentru acest proiect. Pentru noi, este „tutorialul tipstrick.ro-jamstack”. De asemenea, puteți alege să încărcați celălalt proiect pe care l-am creat.
Apoi, vă va cere să selectați ramura de implementat și să alegeți setările de bază de construcție. Pentru moment, puteți seta totul la implicit.
Faceți clic pe „Depoy Site” pentru a-l implementa.
Acum, trebuie să așteptați ca Netlify să-și facă treaba. Odată implementat, mesajul va fi „Site-ul dvs. este implementat”.
Acum, faceți clic pe site-ul din stânga sus.
Cu toate acestea, veți observa că site-ul nu se încarcă corect. Acest lucru se datorează faptului că adresa URL de bază din fișierul Config.toml nu este setată corect. Deoarece Netlify a generat o nouă adresă URL a proiectului, trebuie să o adăugați la fișierul Config.toml.
În cazul nostru, site-ul se află la https://animated-beijinho-2baa8b.netlify.app/
Asta înseamnă că trebuie să adăugăm URL-ul de bază.
Pentru a face acest lucru, accesați configurația locală și modificați valoarea.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Pentru a împinge modificarea, trebuie să rulați următoarea comandă.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify este inteligent. Când detectează un nou commit, va implementa automat site-ul dvs. din nou.
Dacă încărcați site-ul acum, acesta se va încărca perfect.
Wooo! Ai făcut-o. Știu că sunt multe de învățat. Cu toate acestea, veți găsi întregul proces intuitiv odată ce îl faceți de câteva ori.
Cuvinte finale
Jamstack a cucerit noua eră a dezvoltatorilor. Deblochează performanța și, de asemenea, îmbunătățește modul în care sunt implementate site-urile. Jamstack a crescut cu membri excelenți ai ecosistemului, cum ar fi Hugo și Netlify. Fără îndoială, va crește doar de aici.
Apoi, vedeți cum să implementați aplicația frontend pe Netlify.