Jamstack: construi mai repede, site-uri mai eficiente astăzi

Sep 15, 2025
să
JAMstack main
(Credit Imagine: Viitor / Joseph Ford)

Jamstack este o metodă de creare și de servire a site-urilor cu o sarcină minimă necesară de server. Obține numele său din tehnologiile utilizate în procesul de construire, JavaScript, API și Markup. Paginile sunt construite în limbajul Markup înainte de timp și au servit ca fișiere HTML statice ca utilizator solicitând acest utilizator. Pentru a construi un site și a aduce aceste tehnologii împreună aveți nevoie de instrumentele potrivite. Asigurați-vă că vă verificați cele mai bune editori de coduri postați pentru a vă ajuta să decideți cel mai bun mediu de dezvoltare pentru dvs.

În mod tradițional, atunci când un utilizator face clic pe o pagină web, au loc o serie de acțiuni. Browserul utilizatorilor trimite o cerere către serverul site-ului, acesta rulează prin codul de backend, generează pagina corectă și datele sunt trimise înapoi la browser și sunt redate ca o pagină web. Destul de mult ar putea merge prost și chiar și atunci când merge bine, este puțin mai lent decât un utilizator este confortabil cu lumea digitală fast-fast-l în care trăim acum.

Dar folosirea Jamstack înseamnă mai rapide site-uri mai eficiente și mai puțin pentru a merge prost. În acest tutorial demonstrăm cum să configurați un site de blog în Jamstack pentru a servi ca o introducere în concepte. Instrumentele folosite vor fi Hugo. Ca un generator static al site-ului, Netlify. ca instrument de construcție și Github. ca hosting gratuit pentru fișiere.

Pentru a îmbunătăți în continuare experiența site-ului, asigurați-vă că alegeți perfect web hosting serviciu și cel mai bun Builder de site-uri web .

01. Descărcați instrumentele necesare

Descărcați o copie a Victor Hugo - Acesta este unul dintre mai multe kituri de pornire pentru a obține rapid lucrurile de pe teren. De asemenea, asigurați-vă că aveți nodul instalat în mediul dvs. de dezvoltare. 

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

02. Creați un director de lucru și instalați Hugo

Creați un director și spuneți-l JamStack. . Aici vom lucra la mașina noastră de dezvoltare. Extrageți fișierele descărcate pentru HUGO în acest director și deschideți-l în comanda de comandă. Pentru a instala toate dependențele, deschideți promptul de comandă sau un terminal în dosarul Jamstack și rulați instalarea npm. 

npm install

03. Porniți serverul

JAMstack03

(Credit Imagine: Joseph Ford)

Odată ce dependențele au terminat, rulați NPM Start. Serverul de dezvoltare rulează acum o copie locală a lui Victor Hugo, accesibilă în mod implicit la localhost: 3000 - Deschiderea acestei link-uri ar trebui să afișeze ecranul de întâmpinare dacă totul a avut succes. Odată testat, apăsați Ctrl. +. C. pentru a opri serverul.

04. Adăugați o pagină și o postare

JAMstack04

(Credit Imagine: Joseph Ford)

Schimbați directorul în dosarul site-ului, apoi utilizând Hugo Nou comandă, adăugați a Pagina-one.md. și a. post-one.md. . Dezvoltatorii care lucrează în Windows vor trebui să descărcați fișierul Hugo.exe și să adăugați o cale pentru a obține acest lucru la serviciu, dar ușor de urmărit documentația există pe Hugo. site-ul web. 

 Hugo nou pagina-one.md
Hugo nou post / post-one.md

05. Adăugați conținut în pagină și postați

În scopuri de testare, un anumit conținut trebuie adăugat la noul post și pagină (au conținut greu mass-media? Înapoi cu cele mai bune Stocare in cloud ). Deschideți directorul pentru proiect într-un browser de fișiere și navigați la Jamstack / Site / Conținut. În acest dosar, fișierul Pagina-one.md. ar trebui să existe acum. Există, de asemenea, un dosar numit post care conține. post-one.md. Deschideți ambele fișiere și adăugați un conținut în Markdown sub --- (sau în unele cazuri +++) 

 # Lorem Ipsum Dolor Sit Amet
## Consectorur adiipcing * Elit *
SED Do Eiusmod Tempor InciziDunt UT Labore
ET Dolore Magna Aliqua.

06. Adăugați tema ca un sub modul

JAMstack06

(Credit Imagine: Joseph Ford)

Textul introdus în fișierele anterioare nu poate fi vizualizat fără o temă. De exemplu, tema Ananke va fi utilizată. Ștergeți conținutul curentului Site-uri / Layouts. dosar, lăsându-l gol. Efectuați un nou director în dosarul site-ului numit Teme. , apoi schimbați la acesta și executați următorul cod pentru a importa tema ca submodule git. Notă: Clonarea normală nu este compatibilă cu netlify. 

 Temele Mkdir
Temele CD.
Submodul GIT Adăugați https: // github
COM / LT; ​​ThemeCreator & GT; / LT; ​​Themename & GT;
https://github.com/budparr/gohugo-Theme.
ananke.git teme / ananke

07. Configurați tema și executați serverul

Copiați conținutul lui Site / Teme / Gohugo-Tema Ananke / Exempleste / config.toml la peste cel din dosarul site-ului. În partea de sus a paginii, înlocuiți adresa URL de bază cu " / " și ștergeți linia temezir = '.. . Salvați fișierul config, deschideți un terminal și executați NPM Start. comanda. De asemenea, puteți schimba numele site-ului (dacă doriți) prin înlocuirea titlu valoare. 

 Site CD
NPM Start

08. Testați într-un browser

Deschis http: // localhost: 3000 / pagina-unu / Pentru a vedea tema redarea marcajului paginii ca o pagină complet în stil. Deschiderea paginii de pornire, primul post va fi acum vizibil. Aceasta înseamnă că generatorul static al site-ului este acum funcțional.

09. Configurați meniul

JAMstack09

(Credit Imagine: Joseph Ford)

La vizualizarea site-ului web, este vizibil că pagina făcută anterior nu arată în navigație. Revenind la conținut, adăugați o linie în configurația din față pentru a le spune Hugo care meniu pentru a face pagina în. 

 TOML
+++
Meniu = "Main"
+++
Yaml.
---
Meniu: "Main"
---

10. Împingeți fișierele într-un github

Apoi, animați cercul pentru a răspunde la clicurile utilizatorului. Acum, site-ul static este în curs de desfășurare, va trebui să fie accesibil pe un server de dezvoltare. Primul pas este să împingeți codul la GitHub. Creați un nou depozit pe GitHub și apoi utilizați linia de comandă pentru a apăsa codul din dosarul proiectului, fie din aplicația desktop GitHub. 

 Git Remote Adăugați originea https://github.com/[GITHUBUSERNAME]/jamstacktutorial.git
git push -u de origine master

11. Conectați-vă la netlify

Netlify va aduce totul împreună, construiește site-ul și va servi pe un domeniu temporar. Începeți prin crearea unui cont la Netlify. și conectați-l cu un cont Github. Odată ce totul este configurat, faceți clic pe Site nou de la git .

12. Conectați-vă la GitHub

Pentru implementarea continuă, faceți clic pe Github. , apoi selectați repo-ul făcut mai devreme în tutorial. Netlify ar trebui să detecteze automat cele mai bune opțiuni de construire pentru proiect. Ar trebui să citească NPM Run Build. . Dacă totul este bine, atunci faceți clic pe Implementare.

13. Construiți site-ul și vizualizarea pe legătura netlify

JAMstack13

(Credit Imagine: Joseph Ford)

Odată ce site-ul a construit, va apărea un mesaj implementat . Netlify a dat site-ul un nume de domeniu temporar care nu poate avea sens - acest lucru poate fi modificat pur și simplu făcând clic pe setările site-ului. Schimbați numele, apoi faceți clic pe link-ul pentru a vedea site-ul încărcat prin Jamstack.

14. Faceți o modificare a implementării testului

Site-ul se încarcă acum prin Jamstack. Este rapid rapid și se actualizează automat când se face un comitet la GitHub. Pentru a testa acest lucru, reveniți la mediul de dezvoltare locală și rulați Hugo nou pagina-three.md. din directorul site-ului. Apoi deschideți fișierul creat, adăugați un anumit conținut, faceți clic pe Salvați și să comiți fișierul la repo. În momente veți observa că actualizarea este live pe linkul Netlify.

15. Adăugați un CMS la site-ul dvs. static

Lucrul în marcaj simplu și folosind linia de comandă pentru a crea pagini nu va sta bine cu majoritatea clienților. Pentru a face site-ul mai prietenos, instalați un sistem de gestionare a conținutului. Silvicultură.io. este o potrivire perfectă pentru configurarea curentă. Accesați site-ul web și creați un cont utilizând GitHub.

16. Configurarea silviculturii

Faceți clic pe Adăugați site nou, apoi selectați HUGO ca generator de site-uri statice, git ca furnizor și completați informațiile din următoarele formulare. Faceți clic pe Trimiteți, iar noile CMS va încărca, gata pentru modificări de conținut. Acum, paginile pot fi modificate pur și simplu din bara laterală, precum și postările și o gamă imensă de alte opțiuni.

Doriți să aflați mai multe despre Web Design? Atunci Abonați-vă la Net. , cea mai bună revistă din lume pentru designeri și dezvoltatori web.

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

Aflați cum să construiți JavaScript mai bun la Generatejs (Credit Imagine: Viitor / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Tooa Heftiba, Unsplash)

Alăturați-vă în aprilie 2020 cu ajutorul superstarurilor JavaScript la Generatejs - conferința care vă ajută să construiți mai bine JavaScript. Rezervați acum la geneterconf.com.

Citeste mai mult:

  • 8 etichete HTML trebuie să utilizați (și 5 pentru a evita)
  • 25 din cele mai bune api JavaScript
  • Cum să vă ascundeți codul JavaScript din sursa de vizualizare

să - Cele mai populare articole

Cum să faci un Mandelbulbul

să Sep 15, 2025

Un Mandelbulb este un fractal tridimensional care devine din ce în ce mai popular în 3D Art. și vfx. În acest ..

Construiți o scenă complexă 3D SCI-Fi în Blender

să Sep 15, 2025

Crearea unei scene apocaliptice SCI-Fi în 3D Art. este ceva ce artiști ar putea fi timid de a face din cauza în..

Desenați un geisha rău-fund

să Sep 15, 2025

În această ilustrare a Geisha am vrut să surprind o vibrație grungică, întunecată, urbană, legată de elemente japoneze e..

Fă-ți caracterele pop cu culoare și lumină

să Sep 15, 2025

Îmi place foarte mult să lucrez în culoare, fie că este în Photoshop CC. sau pictura în mod tradițional cu ..

Cum să amestecați culoarea umbrei în vopsea

să Sep 15, 2025

Unii oameni găsesc amestecarea pentru umbre dificilă, adesea încercând să amestece o culoare cu totul nouă. Din păcate, re..

Cum să începeți cu pictura de ulei

să Sep 15, 2025

Pictura cu uleiuri este o modalitate interesantă de a crea artă. Cu toate acestea, mulți oameni pot fi intimidați de mediul de vopsele de petrol, când oferă, de fapt, modalitatea ideal�..

Cum de a construi un site web complet în unghi

să Sep 15, 2025

Pagina 1 din 4: Pagina 1 Pagina 1 Pagina 2 Pagina 3 ..

Model Darth Vader în Zbrush

să Sep 15, 2025

Pagina 1 din 2: Pagina 1 Pagina 1 Pagina..

Categorii