Construirea de structuri pentru web este mereu o aventură captivantă. Aceasta le oferă programatorilor libertatea de a crea aplicații web după bunul lor plac, putând alege cadrul, tehnologia, instrumentele și abordarea preferată.
O astfel de abordare este Jamstack, care propune o soluție flexibilă la complexitatea dezvoltării web.
În acest articol, vei învăța cum să construiești prima ta aplicație Jamstack. Haide să începem!
Ce este Jamstack?
Jamstack reprezintă o nouă filosofie în dezvoltarea web, oferind o arhitectură componibilă. Dezvoltatorii pot selecta cadrele și instrumentele potrivite pentru a atinge obiectivele dorite.
Observând mai atent:
Jam + stack = JAMstack.
Jamstack este alcătuită din trei elemente esențiale:
- J pentru JavaScript
- A pentru Interfața de Programare a Aplicațiilor (API)
- M pentru Markup
Această abordare separă logica afacerii de date, deconectând nivelul experienței web. Avantajele includ:
- Viteză de încărcare sporită (aproape instantanee).
- Un flux de lucru rapid și flexibil pentru dezvoltatori.
- O scalabilitate și întreținere mai ușoară.
Pentru a afla mai multe despre Jamstack, explorează resursele dedicate începătorilor.
Istoria Jamstack
Conceptul de Jamstack este relativ recent. În 2016, Matt Biilmann a prezentat această abordare, arătând lumii o metodă alternativă de a crea site-uri web, diferită de metodele tradiționale.
Această soluție separă logica aplicației de serverul backend. Astfel, conținutul este distribuit prin fișiere statice prin intermediul rețelelor CDN, iar funcțiile dinamice sunt gestionate prin API-uri. În cazul în care serverul trebuie să proceseze o acțiune dinamică, aceasta este compilată și trimisă către CDN-uri înainte de a fi accesată de utilizator.
Pentru a înțelege mai bine istoria Jamstack, este util să examinăm diferențele dintre site-urile web statice și cele dinamice.
- Site static: Un site static este găzduit pe server și nu prezintă elemente dinamice. În perioada timpurie a internetului, majoritatea site-urilor erau statice, livrând fișiere HTML, CSS și imagini stocate pe server. Această abordare este rapidă, deoarece serverul nu trebuie să proceseze cererea utilizatorului, având fișierele gata. Totuși, lipsa interacțiunii limitează posibilitățile.
- Site dinamic: Site-urile dinamice oferă interactivitate prin procesarea cererilor utilizatorilor și generarea codului HTML necesar pentru a fi livrat. Deși această abordare este mai lentă, adaugă interactivitate. Majoritatea site-urilor moderne sunt dinamice, cum ar fi cele bazate pe WordPress.
Și apoi, avem site-urile web Jamstack. Să descoperim cum a reușit să îmbine avantajele site-urilor statice și dinamice.
Site-uri web Jamstack: Cum funcționează?
Jamstack rezolvă două probleme fundamentale:
- Timpul de încărcare lent al site-urilor dinamice.
- Lipsa interactivității în site-urile statice.
Un site Jamstack servește fișiere statice, ceea ce asigură rapiditate. În plus, folosește JavaScript pentru a interacționa cu API-uri și a oferi conținut dinamic.
În culise, un generator de site-uri statice este esențial pentru crearea paginilor web statice.
Aceste generatoare folosesc Markdown pentru a crea site-uri web statice, transformând fișierele HTML, CSS și JavaScript în fișiere statice, care sunt apoi distribuite prin CDN-uri.
Prin livrarea fișierelor statice, site-urile se încarcă aproape instantaneu. Pentru a adăuga funcționalități dinamice, este necesar să se utilizeze JavaScript. Prin intermediul JavaScript, se pot conecta la API-uri și pot afișa date dinamice, comunicând cu o bază de date.
Construirea primului site web Jamstack
Deoarece Jamstack oferă libertate de alegere, poți opta pentru orice cadru sau generator de site-uri statice, cum ar fi Hugo, Gatsby, Next.js, Hexo și altele.
Consultați și: Cele mai bune platforme pentru JamStack
Pentru găzduire, poți alege platforme precum GitHub Pages, Netlify, Azure Static Web Apps etc.
Pentru acest tutorial, vom utiliza Hugo pentru dezvoltarea Jamstack și Netlify pentru a găzdui site-ul.
Tutorialul presupune o înțelegere de bază a funcționării web-ului și cunoștințe despre utilizarea Git.
Să pornim la treabă!
#1. Instalarea cerințelor preliminare: Go și Git
Pentru a instala Hugo, ai nevoie de două lucruri: Git și Go. Git este necesar pentru a facilita fluxul de lucru (vei vedea mai târziu cu Netlify), iar Go este necesar pentru că Hugo este construit pe el.
Folosim Ubuntu, care rulează pe WSL 2 pe Windows 11, accesând nucleul Ubuntu direct din Windows.
Consultă și: Windows 11 întâlnește Linux: o analiză profundă a capacităților WSL2
Poți alege sistemul de operare preferat, fie Windows, Linux sau Mac.
Instalarea Git
În Ubuntu, poți instala Git executând comanda următoare:
$ sudo apt update $ sudo apt install git
Pentru Windows, va trebui să descarci programele de instalare binare. Consultă ghidul nostru complet de instalare Git.
Pentru a verifica dacă Git este instalat corect, tastează următoarea comandă:
[email protected]:~$ git --version git version 2.34.1
Instalarea Go
Acum este timpul să instalezi Golang. Pentru aceasta, va trebui să execuți câteva comenzi pe Linux. Iată pașii:
Pasul 1: Șterge instalațiile Go anterioare și creează un arbore Go local.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Pasul 2: Personalizează variabila de mediu PATH.
export PATH=$PATH:/usr/local/go/bi
Pasul 3: În final, verifică dacă Golang este instalat corect.
$ go version. #output go version go1.18.1 linux/amd64
Excelent, acum suntem pregătiți să instalăm Hugo!
Instalarea lui Hugo
În funcție de folosirea Homebrew sau Chocolately, trebuie să folosești una dintre următoarele comenzi:
Pentru Homebrew:
$ brew install hugo
Pentru Chocolatey:
$ brew install hugo -confirm
Dacă nu folosești niciuna dintre ele, poț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 a fost instalat cu succes, execută 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, execută 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 gamă variată de teme, care pot servi ca punct de plecare pentru proiectul tău. Pentru a construi un site Jamstack cu Hugo, este necesară o temă.
#4. Crearea unui site de afaceri mici cu Jamstack
În acest tutorial, vom utiliza tema Hugo Hero. Această temă versatilă oferă funcții precum secțiuni cu lățime completă și crearea de portofoliu prin Markdown.
Pentru a instala tema, copiază linkul depozitului și clonează-l. Asigură-te că te afli în directorul rădăcină înainte de a continua.
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 folosi conținutul implicit cu site-ul, execută următoarea comandă:
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Aceasta va copia conținutul din folderul exampleSite în rădăcina site-ului.
Se actualizează fișierul Config.toml
În continuare, trebuie să edităm fișierul Config.toml. Acesta stochează informații de configurare a proiectului și este necesar să fie configurat corect pentru ca site-ul Jamstack să funcționeze.
Pentru moment, modifică următoarele linii:
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Reține: Va trebui să actualizezi fișierul Config.toml pe măsură ce proiectul evoluează. De asemenea, deoarece ai folosit conținut implicit, Config.toml este deja actualizat pentru a se potrivi cu conținutul de exemplu.
Testăm site-ul nostru Jamstack
Pentru a rula site-ul, trebuie să generăm din nou site-ul Hugo cu comanda `hugo`.
$ hugo
Apoi pornim serverul, executând 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 tău este acum găzduit și disponibil la 127.0.0.1. Dacă, din anumite motive, nu se deschide, încearcă să accesezi adresa alternativă indicată. În acest caz, este localhost:42973.
Editarea temelor de conținut implicit
De acum, poți edita conținutul implicit accesând folderul `Conținut`. Să modificăm conținutul paginii de index. Pentru aceasta, navighează la `Conținut > Muncă > Index.md`.
Iată cum arată după editare:
Crearea unui site de blog
Dacă dorești să creezi un blog, trebuie să alegi o temă adecvată. În acest scop, vom folosi tema Hyde.
La fel ca în cazul configurării noului site, trebuie să execuț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, editează fișierul `Config.toml` pentru a adăuga valoarea `theme = „hyde”`.
Creează o postare nouă
Pentru a crea o postare nouă, execută comanda `hugo new`, urmată de numele fișierului 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ă `hellogeekflare.md`, deschide fișierul cu editorul de text preferat.
Vei vedea următorul conținut:
--- title: "Hello tipstrick.ro" date: 2023-05-04T11:39:10+05:30 draft: true ---
Aici poți adăuga 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 ai introdus conținutul de mai sus în fișierul .md, acesta ar trebui să arate ca mai jos (în funcție de editorul tău, noi folosim Visual Studio Code):
Cu toate acestea, aspectul va fi diferit atunci când îl vom rula.
Notă: Asigură-te că schimbi valoarea câmpului `draft` de la `”true”` la `”false”`.
Minunat! Am creat două site-uri web Jamstack, un site pentru afaceri mici și un blog.
După editarea site-ului, poți genera fișierele executând comanda `hugo`. Acesta va crea fișierele și le va plasa în folderul `/public`.
$ hugo
#5. Implementarea site-ului Jamstack pe Netlify
Acum că avem site-urile create, haide să le implementăm. În acest scop, vom utiliza Netlify.
Netlify este un serviciu susținut de CDN care permite utilizatorilor să găzduiască site-uri rapide. Poți conecta Netlify cu GitHub și automatiza procesul. Este un serviciu gratuit cu anumite funcții disponibile contra cost.
Sarcina noastră este să trimitem codul către Netlify și să-l lăsăm pe Netlify să se ocupe de restul pentru noi.
Configurarea depozitului Git local
Acum este timpul să configurăm depozitul Git.
Pentru a inițializa depozitul Git, execută următoarea comandă în 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, acesta creează sub-arhive în cadrul depozitului tău (îți amintești că ai clonat git tema Hugo?). Astfel, vei avea mai mult control asupra site-ului Jamstack. De exemplu, poți descărca actualizări pentru temă. De asemenea, este necesar să faci acest lucru, deoarece Netlify are nevoie de teme ca submodule pentru a le găzdui.
Pentru a adăuga tema ca submodul, execută 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
După finalizarea configurării locale, este timpul să creezi un depozit nou pe GitHub.
După ce este creat, trebuie să adaugi originea în depozitul tău local:
$ git remote add origin https://github.com/logan99/tipstrick.ro-jamstack-tutorial.git
Acum, actualizează-l.
$ git branch -M main $ git pull origin main
Creează un nou commit
Acum, este momentul să creezi un nou commit. Execută următoarea comandă pentru a adăuga toate fișierele în ramura principală.
$ git add .
Acum, rulează comanda commit pentru a înregistra 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 final, trimite modificările către GitHub.
$ git push --set-upstream origin main
Notă: va trebui să introduci numele de utilizator și parola GitHub pentru ca totul să funcționeze.
#6. Lucrul cu Netlify
Excelent, depozitul nostru este acum creat. Acum, haide să trecem la Netlify. Dacă ai deja un cont, autentifică-te sau creează unul nou.
Pentru conturile noi, Netlify va rula imediat un asistent. În caz contrar, vei ajunge la tabloul de bord. Dacă ajungi la tabloul de bord, apasă pe opțiunea „Adaugă un site nou” din secțiunea Site-uri.
Sub „Adaugă un site nou”, selectează „Importă un proiect existent”.
Apoi, ți se va cere să alegi un furnizor Git. Deoarece folosim GitHub, îl vom selecta pe acesta. De asemenea, poți opta pentru Bitbucket, GitLab și Azure DevOps.
Apoi, va lista toate proiectele tale. De aici, selectează depozitul GitHub pe care l-ai creat pentru acest proiect. Pentru noi, este „tutorialul tipstrick.ro-jamstack”. Poți alege să încarci și celălalt proiect pe care l-am creat.
În continuare, ți se va solicita să selectezi ramura de implementat și să alegi setările de bază de construcție. Deocamdată, poți lăsa totul la setările implicite.
Apasă pe „Depoy Site” pentru a-l implementa.
Acum, va trebui să aștepți ca Netlify să finalizeze procesul. Odată ce implementarea este finalizată, vei primi mesajul „Site-ul tău este implementat”.
Acum, apasă pe site-ul din stânga sus.
<img decoding=”async” class=”wp-image-203054 perfmatters-lazy” width=”800″ src=”https