Jamstack: Rakenna nopeammin, tehokkaampia verkkosivustoja tänään

Sep 11, 2025
Miten tehdään
JAMstack main
(Image Credit: Future / Joseph Ford)

Jamstack on tapa luoda ja tarjoilla verkkosivustoja, joissa palvelin vaaditaan minimaalinen kuormitus. Se saa nimensä rakennusprosessissa, JavaScript, APIS ja Markup. Sivut on rakennettu merkintäkieltään etukäteen ja tarjoillaan staattina HTML-tiedostoina käyttäjäksi. Voit rakentaa sivuston ja tuoda nämä teknologiat yhteen sinun tarvitsee oikeat työkalut. Varmista, että tarkistat Paras koodi toimittajat Post auttaa sinua päättämään parhaan kehityksen ympäristö sinulle.

Perinteisesti, kun käyttäjä napsauttaa verkkosivua, tapahtuu useita toimia. Käyttäjien selain lähettää pyynnön verkkosivuston palvelimelle, se toimii taustakoodin kautta, luo oikean sivun ja tiedot lähetetään takaisin selaimeen ja lähetetään verkkosivulta. Melko paljon, joka voisi mennä pieleen, ja vaikka se menee hyvin, se on hieman hitaampaa kuin käyttäjä on mukava salaman nopeasti digitaalisessa maailmassa, kun elämme nyt.

Mutta jamstack tarkoittaa nopeampia tehokkaampia sivustoja ja vähemmän mennä pieleen. Tässä opetusohjelmassa osoitamme, miten perustaa blogi verkkosivusto Jamstackissa, joka toimii johdannossa käsitteisiin. Käytetyt työkalut ovat Huijari Staattisena sivuston generaattorina, Netlify Koska rakennustyökalu ja Github vapaana hosting tiedostoille.

Paranna sivustosi kokemusta, varmista, että valitset täydellisen sivujen ylläpito Palvelu ja paras Verkkosivuston rakentaja .

01. Lataa tarvittavat työkalut

Lataa kopio Victor Hugo - Tämä on yksi useista starter-sarjoista saada asiat pois maasta nopeasti. Varmista myös, että sinulla on solmu asennettu kehitysympäristöön. 

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

02. Luo työhakemisto ja asenna Hugo

Luo hakemisto ja nimeä se Jamstack . Tässä me työskentelemme kehityskoneen kanssa. Poimi ladatut tiedostot Hugoon tähän hakemistoon ja avaa se komentokehotteeseen. Kaikkien riippuvuuksien asentaminen, Avaa komentokehote tai Jamstack-kansion päätelaite ja suorita NPM-asennus 

npm install

03. Käynnistä palvelin

JAMstack03

(Kuva luotto: Joseph Ford)

Kun riippuvuudet ovat päättyneet, suorita NPM Aloita. Kehittäminen palvelin on nyt käynnissä paikallisen kopion Victor Hugo, pääsee oletuksena localhost: 3000 - avaaminen että linkin pitäisi näyttää aloitusnäyttö jos kaikki oli onnistunut. Kerran testattu, paina Ctrl + C Pysäytä palvelin.

04. Lisää sivu ja viesti

JAMstack04

(Kuva luotto: Joseph Ford)

Vaihda hakemisto sivuston kansioon, sitten käyttämällä Hugo Uusi komento, lisää a Page-e.md ja a post-e.md . Windowsin kehittäjät tarvitsevat ladata Hugo.exe-tiedosto ja lisätä polku saada tämä töihin, mutta helppo seurata asiakirjoja on olemassa huijari verkkosivusto. 

 Hugo New Page-One.md
Hugo Uusi viesti / post-e.md

05. Lisää sisältö sivulle ja postitse

Testaustarkoituksiin jotain sisältöä on lisättävä uuteen viestiin ja sivulle (GOT Media-Heavy Sisältöksi? Takaisin se parhaiten pilvivarasto ). Avaa projektin hakemisto tiedostoselaimessa ja siirry Jamstack / Site / Sisältöön. Tässä kansiossa tiedosto Page-e.md olisi nyt olemassa. Myös kansio on nimetty lähettää joka sisältää post-e.md. Avaa molemmat nämä tiedostot ja lisää sisältöä markdown alle --- (tai joissakin tapauksissa +++) 

 # lorem ipsum dolor istua amet
## CHEECTUR ADIPISCING * ELIT *
SED DO EIIIIIIIIIIIIIIIIDMOD INCIDIDUNT UT Labore
et Dolore Magna Aliqua.

06. Lisää teema alamoduuliksi

JAMstack06

(Kuva luotto: Joseph Ford)

Edellisiin tiedostoihin syötetty teksti ei voi katsella ilman teemaa. Esimerkkinä käytetään ananke-teemaa. Poista nykyisen sisällön Sivusto / Layout Kansio, jättäen sen tyhjäksi. Tee uusi hakemisto sivuston kansioon teemat , sitten muutetaan siihen ja suorita seuraava koodi tuoda teema git-alirekisteriksi. Huomaa: Normaali kloonaus ei ole yhteensopiva Netlifyin kanssa. 

 MKDIR-teemat
CD-teemat
Git-alirekisteriö lisää https: // github
com / & lt; teemokraattor & gt; / & lt; kegename & gt;
https://github.com/budparr/gohugo-theme
ananke.git teemoja / ananke

07. Määritä teema ja suorita palvelin

Kopioi sisältö Sivusto / teemat / gohugo-teema ananke / esimerkki / config.toml Sivuston kansioon. Sivun yläosassa korvaa perus URL-osoite ' / ' ja poista rivi themesdir = '../ ..' . Tallenna CONFIG-tiedosto, avaa pääte ja juosta npm alkaa komento. Voit myös muuttaa verkkosivuston nimen (jos haluat) korvaamalla nimi arvo. 

 CD-sivusto
NPM Aloitus

08. Testaa selaimessa

Avata http: // localhost: 3000 / sivu-yksi / Nähdäksesi teeman, joka tekee sivun markisoinnin täysin tyydylliseksi sivuksi. Kotisivun avaaminen, ensimmäinen viesti on nyt näkyvissä. Tämä tarkoittaa, että staattinen sivuston generaattori on nyt toimiva.

09. Määritä valikko

JAMstack09

(Kuva luotto: Joseph Ford)

Kun katselet verkkosivustoa, se on havaittavissa, että aiemmin tehty sivu ei näy navigointiin. Paluu sisältöön, lisää linja etuosan kokoonpanolle, jotta voit kertoa Hugolle, johon valikko tekee sivun. 

 Toml
+++
Valikko = "Main"
+++
Yaml
---
Valikko: "Main"
---

10. Työnnä tiedostot githubiin

Seuraavaksi animoi ympyrä vastaamaan käyttäjän napsautuksiin. Nyt staattinen sivusto on käynnissä, sen on oltava saatavilla kehityspalvelimella. Ensimmäinen askel on työntää koodi githubiin. Luo uusi arkisto GitHubille ja käytä sitten komentoriviä painamalla koodia projektikohtaan tai GitHub-työpöydän sovelluksesta. 

 Git Remote Lisää alkuperää https://github.com/[githubusername]/jamstacktutorial.git
git push -u-alkuperää

11. Liitä NETLIFY

Netlify tuo kaiken yhteen, rakentaa sivuston ja palvella sitä väliaikaisella verkkotunnuksella. Aloita luomalla tili osoitteessa Netlify ja liitä se GitHub-tilillä. Kun kaikki on määritetty napsautuksella Uusi sivusto gitistä .

12. Yhdistä Githubiin

Napsauta jatkuvaa käyttöönottoa Github Ja valitse sitten repo, joka tehtiin aiemmin opetusohjelmassa. Netlify pitäisi tunnistaa automaattisesti projektin parhaat rakennusvaihtoehdot. Sen pitäisi lukea NPM Run Build . Jos kaikki on hyvin, valitse sitten Asenna.

13. Rakenna sivusto ja näkymä NetLify-linkistä

JAMstack13

(Kuva luotto: Joseph Ford)

Kun sivusto on rakennettu, ilmestyy viesti käytös . Netlify on antanut verkkosivustolle väliaikaisen verkkotunnuksen, joka ei ehkä ole järkevää - tätä voidaan muuttaa yksinkertaisesti napsauttamalla Sivuston asetuksia. Muuta nimeä ja napsauta sitten linkkiä nähdäksesi Jamstackin kautta ladatun sivuston.

14. Tee testata käyttöönottoa

Sivusto nyt lataa Jamstackin läpi. Se on salama nopeasti, ja se päivittää automaattisesti, kun sitoutuminen tehdään GitHubille. Testata tätä, palaa paikalliseen kehitysympäristöön ja juokse Hugo New Page-three.md Sivuston hakemistosta. Avaa sitten Luotu tiedosto, lisää sisältöä, valitse Tallenna ja sitoudu tiedostoon repoon. Hetkien aikana huomaat, että päivitys on live Netlify-linkissä.

15. Lisää CMS staattiselle sivustolle

Työskentely tavallisessa merkinnällä ja komentorivillä sivujen luominen ei istu hyvin useimpien asiakkaiden kanssa. Jos haluat tehdä verkkosivuilta ystävällisemmän, asenna sisällönhallintajärjestelmä. Metsätalo on täydellinen sovitus nykyiseen asennukseen. Siirry verkkosivustoon ja luo tili GitHubin avulla.

16. Määritä metsätalous

Napsauta Lisää uusi sivusto ja valitse sitten Hugo Staattisen sivuston generaattorina, Git kuin palveluntarjoaja ja täytä tiedot seuraavissa muodoissa. Napsauta Lähetä ja uudet CMS latautuvat, valmiiksi sisällön muutoksille. Nyt sivuja voidaan yksinkertaisesti muokata sivupalkista sekä viestit ja valtava joukko muita vaihtoehtoja.

Haluatko lisätietoja web-suunnittelusta? Sitten Tilaa Net , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille.

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

Opi rakentamaan parempaa JavaScript Generatejsissa (Kuva Luotto: Tulevaisuus / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftba, Unsplash)

Liity meihin huhtikuussa 2020 JavaScript Superstarsin kokoonpanolla Generatejs - konferenssi auttaa sinua rakentamaan parempaa JavaScriptia. Varaa nyt generateconf.com

Lue lisää:

  • 8 HTML-tunnisteita sinun on käytettävä (ja 5 välttää)
  • 25 parhaista JavaScript AP: stä
  • Kuinka piilottaa JavaScript-koodisi Näytä lähde

Miten tehdään - Suosituimmat artikkelit

Aloita Bulma

Miten tehdään Sep 11, 2025

(Kuva luotto: Bulma) Haluatko aloittaa Bulman avulla? Olet oikeassa paikassa. Bulma on suosittu CSS-kehys yksinkertai..

Kuinka käyttää reagoivaa jousi animoitiin komponentteja

Miten tehdään Sep 11, 2025

(Kuva luotto: Matt Crouch) Reagoi kevät voi auttaa sinua animaatioilla, jotka ovat tunnetusti hankalia toteuttamaan ..

Luo perspektiivi Adobe Illustratorissa

Miten tehdään Sep 11, 2025

Sivu 1/2: Käyttämällä Perspective Grid Illustratorissa: vaiheet 01-09 ..

30 keyshot-renderointivinkit

Miten tehdään Sep 11, 2025

Kuvan muodostaminen, mallin animaatio tai jopa koko kohtaus on tärkeä askel art luomisessa. Ilman tätä tärkeää vaihetta lo..

Luo realistinen fantasia ritari

Miten tehdään Sep 11, 2025

Tässä työpajassa näytämme sinulle, kuinka maalata ritari Photoshop , sekä maalaus perinteisillä tiedotusvä..

Kuinka luoda karvainen sarjakuvahahmo

Miten tehdään Sep 11, 2025

Sivu 1/2: Sivu 1 Sivu 1 Sivu 2 Hahmosuunnittelu on taid..

5 Asiat, joita et tiennyt, voit tehdä HTML

Miten tehdään Sep 11, 2025

Katsotaanpa se, web-kehitys voi helposti tulla sotku. HTML, CSS ja JavaScript Kaikki ovat kehittyneet nöyryydest�..

Nopeuttaa 3D-mallinnuksen

Miten tehdään Sep 11, 2025

Tämä opetusohjelma kattaa hyödykkeen rakentamisen prosessin - tässä tapauksessa a Avaruusalusuunnittelu - Oik..

Luokat