Jamstack: Costruisci siti Web più veloci, più efficienti oggi

Sep 11, 2025
Come si fa
JAMstack main
(Immagine di immagine: futuro / Joseph Ford)

Jamstack è un metodo per creare e servire i siti Web con un carico minimo richiesto dal server. Ottiene il nome dalle tecnologie utilizzate nel processo di costruzione, nel JavaScript, API e Markup. Le pagine sono costruite in un linguaggio di markup in anticipo e servito come file HTML statici come utente li richiede. Per costruire un sito e portare insieme queste tecnologie hai bisogno degli strumenti giusti. Assicurati di controllare il nostro I migliori editor di codice Post per aiutare a decidere il miglior ambiente di sviluppo per te.

Tradizionalmente, quando un utente fa clic su una pagina Web, si svolgono una serie di azioni. Il browser degli utenti invia una richiesta al server del sito web, esegue il codice di back-end, genera la pagina corretta e i dati vengono inviati al browser e resi come una pagina web. Molto che potrebbe andare storto, e anche quando va bene, è leggermente più lento di quanto un utente è comodo con il mondo digitale a fulmini in cui viviamo ora.

Ma usare il jamstack significa siti più rapidi più efficienti e meno per sbagliare. In questo tutorial dimostriamo come impostare un sito web del blog nel jamstack per servire come introduzione ai concetti. Gli strumenti utilizzati saranno Hugo. Come generatore di siti statico, Netlify. come lo strumento di costruzione e Github. come hosting gratuito per i file.

Per migliorare ulteriormente la tua esperienza del sito, assicurati di scegliere il perfetto web hosting servizio e migliore Builder del sito web .

01. Scarica gli strumenti richiesti

Scarica una copia di Victor Hugo - Questo è uno dei diversi kit di avviamento per ottenere rapidamente le cose da terra. Assicurati anche di avere nodo installato sul tuo ambiente di sviluppo. 

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

02. Creare una directory di lavoro e installa HUGO

Crea una directory e chiamalo Jamstack. . Questo è dove lavoreremo sulla nostra macchina di sviluppo. Estrai i file scaricati per Hugo in questa directory e aprilo nel prompt dei comandi. Per installare tutte le dipendenze, aprire il prompt dei comandi o un terminale nella cartella JamStack ed eseguire Installazione NPM. 

npm install

03. Avviare il server

JAMstack03

(Immagine di credito: Joseph Ford)

Una volta terminata le dipendenze, eseguire l'avvio NPM. Il server di sviluppo sta ora eseguendo una copia locale di Victor Hugo, accessibile per impostazione predefinita presso localhost: 3000 - Apertura di tale collegamento dovrebbe mostrare la schermata di benvenuto se tutto ha avuto successo. Una volta testato, premere Ctrl. +. C. per fermare il server.

04. Aggiungi una pagina e un post

JAMstack04

(Immagine di credito: Joseph Ford)

Modifica directory nella cartella del sito, quindi, usando il hugo nuovo comando, aggiungi a Page-one.md. e A. post-one.md. . Gli sviluppatori che lavorano in Windows dovranno scaricare il file HUGO.EXE e aggiungere un percorso per far funzionare questo, ma facile da seguire la documentazione esiste sul hugo. sito web. 

 Hugo New Page-One.md
hugo nuovo post / post-one.md

05. Aggiungi contenuto alla pagina e posta

Ai fini del test, alcuni contenuti devono essere aggiunti al nuovo post e pagina (ottenuto contenuti pesanti dei media? Indietro con il meglio deposito cloud. ). Aprire la directory per il progetto in un browser file e naviga su Jamstack / Sito / Content. All'interno di questa cartella il file Page-one.md. dovrebbe ora esistere. C'è anche una cartella denominata inviare che contiene il. post-one.md. Apri entrambi questi file e aggiungono alcuni contenuti in markdown sotto il --- (o in alcuni casi +++) 

 # Lorem Ipsum Dolor Sit Amet
## ConseceTur Adippiscing * Elit *
Sed do eiusmod tempor incididunt ut labore
Et Dolore Magna Aliqua.

06. Aggiungi il tema come modulo secondario

JAMstack06

(Immagine di credito: Joseph Ford)

Il testo inserito nei file precedenti non può essere visualizzato senza un tema. Ad esempio, verrà utilizzato il tema Ananke. Elimina il contenuto della corrente Sito / Layouts. cartella, lasciandolo vuoto. Crea una nuova directory nella cartella del sito chiamata temi , quindi modificarlo ed eseguire il seguente codice per importare il tema come sottomodulo Git. Nota: la clonazione normale non è compatibile con NetLIFY. 

 Temi Mkdir
Temi del CD
Git SoMufoDule Aggiungi https: // GitHub
com / & lt; themenecreator & gt; / & lt; themename & gt;
https://github.com/budparr/gohugo-theme.
ANANKE.GIT Temi / Ananke

07. Configurare il tema ed esegui il server

Copia il contenuto di Sito / Temi / Gohugo-Theme Ananke / Examplesite / config.toml su quello nella cartella del sito. Nella parte superiore della pagina, sostituire l'URL di base con ' / ' ed elimina la linea temosdir = '../ ..' . Salva il file di configurazione, apri un terminale ed esegui Inizio NPM comando. Puoi anche modificare il nome del sito Web (se si desidera) sostituendo il titolo valore. 

 Sito CD
NPM START

08. Test in un browser

Aperto http: // localhost: 3000 / Pagina-one / Per vedere il tema rendendo il markdown della pagina come una pagina completamente disegnata. Aprendo la homepage, il primo post sarà ora visibile. Ciò significa che il generatore del sito statico è ora funzionale.

09. Configura il menu

JAMstack09

(Immagine di credito: Joseph Ford)

Durante la visualizzazione del sito Web, è evidente che la pagina effettuata in precedenza non sta mostrando nella navigazione. Tornando al contenuto, aggiungere una riga nella configurazione della materia anteriore per dire a Hugo quale menu per rendere la pagina in. 

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

10. Premere i file in un GitHub

Quindi, anima il cerchio per rispondere agli utenti dei clic. Ora il sito statico è in funzione, dovrà essere accessibile su un server di sviluppo. Il primo passo è spingere il codice a GitHub. Creare un nuovo repository su GitHub, quindi utilizzare la riga di comando per premere il codice dalla cartella Project o dall'app GitHub Desktop. 

 Git Remote Aggiungi origine https://github.com/[GithubUsername]/jamstacktutorial.git
Git Push -u Origin Master

11. Connetti a NetLIFY

NetLIFY porterà tutto insieme, costruisce il sito e lo serrà su un dominio temporaneo. Inizia creando un account a Netlify. e collegarlo con un account GitHub. Una volta impostato tutto il clic Nuovo sito da Git .

12. Connetti a GitHub

Per la distribuzione continua, fare clic su Github. , quindi seleziona il repo che è stato fatto in precedenza nel tutorial. NetLIFY dovrebbe rilevare automaticamente le migliori opzioni di costruzione per il progetto. Dovrebbe leggere NPM Run Build. . Se tutto va bene, quindi fare clic su Distribuisci.

13. Build Sito e Visualizza su NetLIFY LINK

JAMstack13

(Immagine di credito: Joseph Ford)

Una volta costruito il sito, apparirà un messaggio che dice schierato . NetLIFY ha dato il sito Web un nome di dominio temporaneo che potrebbe non dare un senso - questo può essere modificato semplicemente facendo clic su Impostazioni sito. Cambia il nome, quindi fai clic sul collegamento per vedere il sito caricato attraverso il jamstack.

14. Effettuare una modifica per testare la distribuzione

Il sito Web ora carica attraverso il jamstack. È veloce un fulmine e si aggiorna automaticamente quando viene fatto un commit a GitHub. Per testare questo, tornare all'ambiente di sviluppo locale ed eseguire hugo nuova pagina-three.md. dalla directory del sito. Quindi aprire il file creato, aggiungi alcuni contenuti, fare clic su Salva e commettere il file sul repo. In momenti noterai l'aggiornamento è in diretta sul link NetLIFY.

15. Aggiungi un cm al tuo sito statico

Lavorare in markup semplice e utilizzando la riga di comando per creare pagine non si sieterà bene con la maggior parte dei clienti. Per rendere il sito Web più amichevole, installare un sistema di gestione dei contenuti. Silvicoltura.io. è perfetto per la configurazione corrente. Vai al sito Web e crea un account utilizzando GitHub.

16. Configura la silvicoltura

Fare clic su Aggiungi nuovo sito quindi selezionare Hugo come generatore del sito statico, Git come fornitore e compilare le informazioni nei seguenti moduli. Fare clic su Invia e il nuovo CMS lo caricherà, pronto per le modifiche dei contenuti. Ora, le pagine possono semplicemente essere modificate dalla barra laterale, così come i post e una vasta gamma di altre opzioni.

Vuoi saperne di più sul web design? Poi Iscriviti a Rete. , la rivista best-seller del mondo per web designer e sviluppatori.

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

Scopri come costruire meglio JavaScript a Generatejs (Immagine del credito: futuro / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftaba, Unsplone)

Unisciti a noi nell'aprile del 2020 con la nostra formazione di JavaScript Superstar a Generatejs - La conferenza ti aiuta a costruire meglio JavaScript. Prenota ora a. generateconf.com.

Per saperne di più:

  • 8 tag HTML è necessario utilizzare (e 5 da evitare)
  • 25 delle migliori API JavaScript
  • Come nascondere il tuo codice JavaScript dalla sorgente di vista

Come si fa - Articoli più popolari

Procreare tutorial: Come dipingere come i vecchi maestri

Come si fa Sep 11, 2025

C'è sempre qualcosa di nuovo da imparare dai vecchi maestri, sia che sia composizione, illuminazione o persino una tecnica narra..

Come girare il giorno nella notte in Photoshop

Come si fa Sep 11, 2025

Le conversioni giorno per notte sono state in giro per tutto il tempo che Photoshop ha avuto strati di aggiustamento, ma padroneg..

Come scansionare una persona in meno di cinque minuti

Come si fa Sep 11, 2025

Non avere accesso a un array di fotocamera fotogrammetria per eseguire a Scansione 3D ? Nessun problema, questi su..

Come correggere una composizione difettosa

Come si fa Sep 11, 2025

Ho creato il mio dipinto originale in tutto questo tempo l'anno scorso, essendo stato ispirato dai vasti paesaggi fantasy da artisti come Dongbiao Lu e Ruxing Gao. Era la mia prima opere d'ar..

Come creare un effetto di battitura animato

Come si fa Sep 11, 2025

Se usato bene, Animazione CSS. può aggiungere interessi e personalità al tuo sito. In questo articolo, attraverseremo come creare un effetto animato ..

Accendi i tuoi menu usando l'animazione con CSS

Come si fa Sep 11, 2025

È attraverso l'animazione che abbiamo senso del mondo: le porte si aprono, le auto guidano verso le loro destinazioni, le labbra..

Crea un effetto portale in Maya

Come si fa Sep 11, 2025

Quell'effetto portale nel dott. Strano era molto speciale. Era praticamente l'unico effetto nel film che non si è magro di più ..

Usa particelle per creare uno splash 3D

Come si fa Sep 11, 2025

Questo tutorial darà un'occhiata a come è possibile creare uno spruzzo liquido o un effetto corona e può essere usato per fare..

Categorie