Costruire per il web è sempre una prospettiva entusiasmante. Consente agli sviluppatori di avere il loro percorso per creare applicazioni web. Possono scegliere il framework, la tecnologia, gli strumenti e la filosofia che desiderano utilizzare.
Una di queste filosofie è Jamstack. Offre un approccio flessibile per risolvere il problema dello sviluppo web.
In questo articolo imparerai come creare la tua prima app Jamstack. Iniziamo.
Sommario:
Cos’è JamStack?
Jamstack è una delle nuove filosofie web per costruire cose per il web. Tecnicamente, offre agli sviluppatori un’architettura web componibile. Puoi scegliere i tuoi framework e strumenti per raggiungere lo stesso obiettivo.
Se guardi da vicino,
Jam + stack = JAMstack.
Jamstack è costituito da tre componenti principali:
- J per JavaScript
- A per l’interfaccia di programmazione dell’applicazione (API)
- M per marcatura
Questo approccio separa la logica di business dai dati, disaccoppiando il livello dell’esperienza web. I vantaggi includono:
- Tempo di caricamento più rapido (quasi istantaneo).
- Un flusso di lavoro di sviluppo flessibile e rapido.
- Scalabilità e manutenibilità migliorate.
Per saperne di più su Jamstack, dai un’occhiata a Jamstack per principianti.
Storia di Jamstack
Jamstack è relativamente nuovo. Nel 2016, Matt Biilmann ha introdotto Jamstack nella presentazione dell’azienda, mostrando al mondo come costruire un sito web senza seguire il percorso tradizionale.
La soluzione separa la logica dell’applicazione dalla dipendenza dal server back-end. Pertanto, la maggior parte dei contenuti viene fornita tramite file statici con CDN, funzionalità dinamiche supportate e accessibili tramite API. E, se un’azione dinamica deve essere elaborata dal server, viene compilata e inviata ai CDN, prima che l’utente finale vi acceda.
Per comprendere meglio la storia di Jamstack, dobbiamo esaminare i siti Web statici e dinamici.
- Sito web statico: un sito web statico è ospitato sul server ma non ha aspetti dinamici. Durante l’era iniziale di Internet, la maggior parte dei siti erano siti Web statici che offrivano HTML, CSS e immagini archiviate su un server. L’approccio è rapido poiché il server non deve perdere tempo a elaborare la richiesta dell’utente e ha sempre i file pronti. Tuttavia, nessuna possibilità di cambiare qualcosa porta a nessuna interattività.
- Sito web dinamico: i siti dinamici offrono interattività elaborando le richieste degli utenti e generando l’HTML richiesto per la pubblicazione. L’approccio è lento ma aggiunge i vantaggi dell’interattività. La maggior parte dei siti moderni sono siti dinamici. L’esempio migliore sarebbero i siti Web basati su WordPress.
E, poi, abbiamo i siti Web Jamstack. Impariamo come ha risolto il problema dei siti sia statici che dinamici.
Siti web Jamstack: come funzionano?
Jamstack risolve due problemi fondamentali:
- Tempo di caricamento lento del sito dinamico
- Interattività siti statici
Un sito Jamstack serve file statici, il che è veloce. Ma contiene anche JavaScript, che può interagire con le API per servire contenuti dinamici.
Dietro le quinte, avrai bisogno di un generatore di siti statici per fare il lavoro pesante di creare pagine web statiche.
Questi generatori di siti Web statici utilizzano Markdown per servire siti Web statici. Il generatore di siti statici genera file statici dai file HTML, CSS e JavaScript disponibili. Una volta sviluppato, il sito statico viene quindi servito tramite CDN.
Poiché stai servendo file statici, i siti vengono caricati quasi istantaneamente. Tuttavia, per aggiungere un aspetto dinamico al sito, è necessario affidarsi a JavaScript. I file JavaScript possono connettersi alle API e aggiungere dati dinamici comunicando con un database.
Costruire il primo sito web Jamstack
Poiché Jamtack offre libertà, puoi scegliere qualsiasi framework Jamstack/generatore di siti statici, inclusi Hugo, Gatsby, Next.js, Hexo e altri.
Leggi anche: I migliori framework per JamStack
E per la distribuzione, puoi distribuirlo su GitHub Pages, Netlify, App Web statiche di Azure e altri.
Useremo Hugo per lo sviluppo di Jamstack e Netlify per ospitare il nostro sito per questo tutorial.
Il tutorial presuppone che tu abbia una conoscenza di base del web. Devi sapere come funziona il web. Inoltre, dovresti anche sapere come usare Git.
Iniziamo.
#1. Installazione dei prerequisiti: Go e Git
Per installare Hugo, hai bisogno di due cose: Git e Go. Abbiamo bisogno di Git per semplificare il nostro flusso di lavoro di compilazione (lo vedrai più avanti con Netlify). Go è necessario poiché Hugo è costruito su di esso.
Stiamo usando Ubuntu in esecuzione su WSL 2 su Windows 11. Stiamo accedendo al kernel di Ubuntu direttamente da Windows.
Leggi anche: Windows 11 incontra Linux: un’analisi approfondita delle funzionalità di WSL2
Puoi scegliere un sistema operativo, Windows, Linux o Mac.
Installazione di Git
In Ubuntu, puoi installare Git eseguendo il seguente comando.
$ sudo apt update $ sudo apt install git
Nel caso di Windows, dovrai scaricare i programmi di installazione binari di Windows. Consulta la nostra guida completa all’installazione di Git.
Per verificare se Git è installato correttamente, digita il seguente comando.
[email protected]:~$ git --version git version 2.34.1
Installazione di Go
Ora è il momento di installare Golang. Per fare ciò, è necessario eseguire alcuni comandi su Linux. Quindi facciamolo a passi.
Passaggio 1: rimuovere la precedente installazione di Go e creare un albero Go locale.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Passaggio 2: personalizzazione della variabile di ambiente PATH
export PERCORSO=$PERCORSO:/usr/local/go/bi
Passaggio 3: infine, controlla se Golang è installato correttamente.
$ go version. #output go version go1.18.1 linux/amd64
Fantastico, ora siamo pronti per installare Hugo!
Installazione di Hugo
A seconda che tu stia utilizzando Homebrew o Chocolately, dovrai utilizzare uno dei seguenti comandi.
Per l’homebrew:
$ brew install hugo
Per cioccolatoso:
$ brew install hugo -confirm
E, se non ne usi nessuno, puoi installarli direttamente dalla fonte.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Per verificare se Hugo è stato installato correttamente, esegui il seguente comando.
$ 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/winadmin.it/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. Creazione di un sito Hugo
Hugo offre un modo semplice per creare un sito. Per fare ciò, eseguire il seguente comando.
$ hugo new site winadmin.it-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/winadmin.it-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. La scelta di un tema Hugo
Hugo offre accesso a tantissimi temi. Questi temi forniscono un punto di partenza per il tuo progetto. E, per costruire un sito Jamstack con Hugo, hai bisogno di un tema.
#4. Creazione di un sito per piccole imprese con Jamstack
Per il tutorial, useremo il tema Hugo Hero. Questo tema multiuso offre funzionalità come sezioni a tutta larghezza e creazione di portfolio tramite Markdown.
Per installare il tema, copia il suo link repo e clonalo. Prima di procedere, assicurati di essere nella directory principale.
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.
Copia del contenuto predefinito
Per utilizzare il contenuto predefinito con il sito, eseguire il comando seguente.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Copia il contenuto nella cartella exampleSite nella radice del tuo sito.
Aggiornamento del file Config.toml
Successivamente, dobbiamo modificare il file Config.toml. Memorizza le informazioni sulla configurazione del progetto ed è necessario configurarlo correttamente affinché il tuo sito Jamstack funzioni.
Per ora, devi modificare la riga seguente.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Nota: è necessario continuare ad aggiornare il file Config.toml man mano che il progetto avanza. Inoltre, poiché hai utilizzato il contenuto predefinito, il tuo Config.toml viene aggiornato per accogliere il contenuto di esempio.
Testare il nostro sito Jamstack
Per eseguire il nostro sito, dobbiamo generare nuovamente il sito Hugo con il comando hugo.
$ hugo
Successivamente, avviamo il server. Per farlo, esegui il comando hugo serve.
$ hugo serve
#output [email protected]:~/winadmin.it$ 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/winadmin.it/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/winadmin.it/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
Nota: il tuo sito è ora ospitato e disponibile su 127.0.0.1. Se, per qualche motivo, non si apre, prova ad aprire l’indirizzo alternativo indicato a fianco. In questo caso, è localhost:42973
Modifica dei temi Contenuto predefinito
Da qui, sei libero di modificare il contenuto predefinito. Puoi farlo andando nella cartella Contenuto. Modifichiamo il contenuto della pagina indice. Per farlo, vai su Contenuto > Lavoro > Index.md
Ecco come appare dopo averlo modificato.
Creazione di un sito blog
Devi scegliere un tema adatto se stai solo cercando di creare un blog. Per questo scopo, usiamo il tema Hyde.
Analogamente a come impostiamo il nostro nuovo sito, è necessario eseguire i seguenti comandi.
$ hugo new site winadmin.it-jamstack $ cd winadmin.it-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Successivamente, modifica il file Config.toml per aggiungere il valore theme = ‘hyde’.
Crea un nuovo post
Devi eseguire il comando hugo new per creare un nuovo post, seguito dal file 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$
Modifica del post
Per modificare il post hellogeefklare.md appena creato, apri il file hellogeekflare.md nel tuo editor di testo preferito.
Ti mostrerà il seguente contenuto.
--- title: "Hello winadmin.it" date: 2023-05-04T11:39:10+05:30 draft: true ---
Qui puoi aggiungere qualsiasi contenuto in Markdown.
Aggiungiamo il seguente contenuto in 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*.
Dopo aver inserito il contenuto di cui sopra nel file .md, dovrebbe apparire come sotto (a seconda del tuo editor, stiamo usando Visual Studio Code).
Tuttavia, sembrerà completamente diverso quando lo serviremo.
Nota: assicurati di modificare il valore della bozza da “vero” a “falso”
Eccezionale! Abbiamo creato due siti Web Jamstack, un sito per piccole imprese e un altro blog.
Dopo aver modificato il tuo sito, puoi generare i file eseguendo il comando hugo. Creerà il file e lo inserirà nella cartella /public.
$ hugo
#5. Distribuzione del sito Jamstack su Netlify
Con i nostri siti creati, distribuiamoli. Per questo scopo, useremo Netlify.
Netlify è un servizio supportato da CDN che offre agli utenti come te l’hosting di siti veloci. Puoi connettere Netlify con Github e automatizzare il processo. È un servizio gratuito con alcune funzionalità dietro il paywall.
Il nostro compito è inviare il codice a Netlify e lasciare che Netlify gestisca tutto per noi.
Configurazione del repository Git in locale
È giunto il momento per noi di configurare il repository Git.
Per avviare il repository Git, esegui il seguente comando nella radice del tuo progetto.
$ git init
Successivamente, dobbiamo impostare il tema come sottomodulo. Questo è un passo importante. Tecnicamente, crea sotto-repository all’interno del tuo repository. (Ricordi, hai fatto un clone git del tema Hugo?). Ti darà un maggiore controllo sul tuo sito Jamstack.
Ad esempio, puoi scaricare gli aggiornamenti per il tuo tema. Devi anche farlo perché Netlify ha bisogno di temi come sottomoduli per ospitarli.
Quindi, per aggiungere il tema come sottomodulo, esegui il seguente comando.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/winadmin.it-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/winadmin.it-jamstack$
Creazione di un repository su GitHub
Una volta completata la configurazione locale, è il momento di creare un nuovo repository GitHub.
Una volta creato, devi aggiungere l’origine al tuo repository locale.
$ git remote add origin https://github.com/logan99/winadmin.it-jamstack-tutorial.git
Ora, tiralo.
$ git branch -M main $ git pull origin main
Crea un nuovo commit
Ora è il momento di creare un nuovo commit. Eseguire il seguente comando per aggiungere tutti i file al ramo principale.
$ git add .
Ora esegui il comando commit per eseguire il commit delle modifiche.
$ git commit -m “First commit”
#Output [email protected]:~/winadmin.it-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
Infine, invia le modifiche a GitHub.
$ git push --set-upstream origin main
Nota: è necessario inserire il nome utente e la password GitHub per funzionare.
#6. Lavorare con Netlify
Eccellente, il nostro repository è ora creato. Passiamo ora a Netlify. Se hai già un account, accedi o creane uno nuovo.
Per gli account più recenti, eseguirà immediatamente una procedura guidata per te. Altrimenti, atterrerai sulla dashboard del tuo account. Se atterri sulla dashboard, fai clic sull’opzione “Aggiungi nuovo sito” in Siti.
In Aggiungi nuovo sito, scegli “Importa un progetto esistente”.
Ti chiederà quindi di scegliere un provider Git. Dato che stiamo usando GitHub, lo sceglieremo. Puoi anche optare per Bitbucket, GitLab e Azure DevOps.
Quindi elencherà tutti i tuoi progetti. Da qui, seleziona il repository GitHub che hai creato per questo progetto. Per noi, è il “winadmin.it-jamstack-tutorial”. Puoi anche scegliere di caricare l’altro progetto che abbiamo creato.
Ti chiederà quindi di selezionare il ramo da distribuire e scegliere le impostazioni di build di base. Per ora, puoi impostare tutto come predefinito.
Fare clic su “Depoy Site” per distribuirlo.
Ora devi aspettare che Netlify faccia il suo dovere. Una volta distribuito, il messaggio sarà “Il tuo sito è distribuito”.
Ora, fai clic sul sito in alto a sinistra.
Tuttavia, noterai che il sito non si carica correttamente. Questo perché l’URL di base nel file Config.toml non è impostato correttamente. Poiché Netlify ha generato un nuovo URL del progetto, devi aggiungerlo al file Config.toml.
Nel nostro caso, il sito è https://animated-beijinho-2baa8b.netlify.app/
Ciò significa che dobbiamo aggiungere il baseURL ad esso.
Per fare ciò, vai alla configurazione locale e modifica il valore.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Per eseguire il push della modifica, è necessario eseguire il seguente comando.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify è intelligente. Quando rileva un nuovo commit, ridistribuisce automaticamente il tuo sito.
Se carichi il tuo sito ora, verrà caricato perfettamente.
Wooo! L’hai fatto. So che c’è molto da imparare. Tuttavia, troverai l’intero processo intuitivo dopo averlo fatto alcune volte.
Parole finali
Jamstack ha agganciato la nuova era degli sviluppatori. Sblocca le prestazioni e migliora anche il modo in cui i siti vengono distribuiti. Jamstack è cresciuto con eccellenti membri dell’ecosistema come Hugo e Netlify. Indubbiamente, crescerà solo da qui.
Successivamente, controlla come distribuire l’applicazione frontend su Netlify.