的確，性能是一個(gè)關(guān)鍵優(yōu)勢(shì)，以及增強(qiáng)的安全性，可擴(kuò)展性和改進(jìn)的開(kāi)發(fā)人員體驗(yàn)。 Jamstack Architecture使用了通過(guò)CDN提供的預(yù)渲染靜態(tài)頁(yè)面，將來(lái)自不同來(lái)源的數(shù)據(jù)集成，并將傳統(tǒng)服務(wù)器和數(shù)據(jù)庫(kù)替換為微服務(wù)API。

> 存在許多SSG，支持JavaScript，Ruby和Go等各種編程語(yǔ)言。 雖然可以在statictiteGenerators.net上找到綜合列表，但Jamstack網(wǎng)站提供了一個(gè)基于名稱或GitHub星星的更易于管理，可過(guò)濾的列表。

本文重點(diǎn)介紹了七個(gè)受歡迎的SSG及其核心功能，以幫助選擇最適合您的項(xiàng)目。

鑰匙要點(diǎn)：

SSGS> SSG與無(wú)頭CMS無(wú)縫集成，管理內(nèi)容并提供用于數(shù)據(jù)訪問(wèn)的API。這使非開(kāi)發(fā)人員能夠創(chuàng)建和更新內(nèi)容，同時(shí)保留靜態(tài)網(wǎng)站的好處。 >流行的SSG包括Gatsby，Next.js，Hugo，Nuxt.js，Jekyll，Eleventy和Vuepress。每個(gè)都提供獨(dú)特的功能和用例，從服務(wù)器渲染或靜態(tài)導(dǎo)出的JavaScript應(yīng)用到基于VUE的靜態(tài)網(wǎng)站。 SSG選擇取決于項(xiàng)目需求，動(dòng)態(tài)功能需求，構(gòu)建/部署時(shí)間，項(xiàng)目類型（博客，個(gè)人網(wǎng)站，文檔，電子商務(wù)）以及開(kāi)發(fā)人員熟悉SSG的編程語(yǔ)言。

• >什么是靜態(tài)站點(diǎn)生成器？
傳統(tǒng)的CMS（如WordPress）在客戶端請(qǐng)求時(shí)動(dòng)態(tài)構(gòu)建網(wǎng)頁(yè)，從數(shù)據(jù)庫(kù)中組裝數(shù)據(jù)并通過(guò)模板引擎對(duì)其進(jìn)行處理。 相反，SSG是通過(guò)模板引擎進(jìn)行預(yù)處理頁(yè)面
• >客戶端請(qǐng)求，使其立即可用。 僅托管靜態(tài)資產(chǎn)，導(dǎo)致更輕，更快的站點(diǎn)。
有關(guān)傳統(tǒng)CMS和SSG的詳細(xì)比較，以及使用SSG的優(yōu)點(diǎn)，請(qǐng)參見(jiàn)Craig Buckler的文章“使用靜態(tài)站點(diǎn)生成器的7個(gè)理由?！?但是，CMS的內(nèi)容創(chuàng)建和管理功能仍然很有價(jià)值。 這是無(wú)頭CMS進(jìn)來(lái)的地方。
• >

  >無(wú)頭CMS僅通過(guò)后端管理內(nèi)容，為其他前端提供了訪問(wèn)數(shù)據(jù)的API。 編輯團(tuán)隊(duì)可以利用熟悉的接口，并且內(nèi)容在SSG可以通過(guò)API訪問(wèn)的許多數(shù)據(jù)源中成為一個(gè)數(shù)據(jù)源。 流行的無(wú)頭CMS選項(xiàng)包括Strapi，Sanity和滿足； WordPress還為無(wú)頭CMS功能提供了REST API。 因此

  >讓我們探索一些SSG選項(xiàng)：
  gatsby
  gatsby是一個(gè)綜合框架，用于構(gòu)建靜態(tài)網(wǎng)站和應(yīng)用程序，并使用React和使用GraphQL進(jìn)行數(shù)據(jù)操作。 要進(jìn)行更深入的潛水，請(qǐng)?zhí)剿鳌皬腉atsby開(kāi)始：在SitePoint和Gatsby網(wǎng)站的文檔上構(gòu)建您的第一個(gè)靜態(tài)網(wǎng)站”。

  密鑰蓋茨比優(yōu)點(diǎn)：

  >利用尖端的Web技術(shù)（React，WebPack，Modern JS，CSS）。
  用于不同數(shù)據(jù)源的廣泛插件生態(tài)系統(tǒng)。 由于其靜態(tài)頁(yè)面的生成，
  易于部署和可伸縮性。>
  • >漸進(jìn)式Web應(yīng)用程序（PWA）發(fā)電機(jī)，具有內(nèi)置代碼和數(shù)據(jù)分配以獲得最佳性能。
  優(yōu)化圖像加載。
  >很多起動(dòng)站點(diǎn)很容易獲得。
  • gatsby-image
  next.js
  2. Next.js是一個(gè)多功能框架，用于創(chuàng)建服務(wù)器渲染或靜態(tài)導(dǎo)出的JavaScript應(yīng)用程序，該應(yīng)用程序是由Vercel構(gòu)建的。 創(chuàng)建一個(gè)next.js應(yīng)用：

  啟動(dòng)開(kāi)發(fā)服務(wù)器：

  >在

  >。

  上訪問(wèn)該應(yīng)用程序 Next.js提供了廣泛的文檔，用于構(gòu)建和自定義應(yīng)用程序。 關(guān)鍵功能包括：

  npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

  >默認(rèn)服務(wù)器端渲染以進(jìn)行最佳性能。

  npm run dev

  >自動(dòng)代碼拆分，路由和熱重新加載。

  > http://localhost:3000圖像優(yōu)化，國(guó)際化和分析。

  綜合文檔，教程和示例。

  >
  >內(nèi)置CSS支持。
  >許多示例應(yīng)用程序。
  • > hugo
  Hugo是一位非常受歡迎的SSG（超過(guò)49k Github的星星），以Go和Go的速度寫成出色的速度。 它的快速構(gòu)建過(guò)程使其非常適合具有廣泛內(nèi)容的博客。 該文檔包括一個(gè)簡(jiǎn)化設(shè)置的快速啟動(dòng)指南。
  3. 關(guān)鍵雨果特征：
     • 對(duì)速度進(jìn)行了優(yōu)化（內(nèi)容渲染?1ms）。
     >
     • >內(nèi)置功能，例如分頁(yè)，重定向和多種內(nèi)容類型。>
     豐富的主題系統(tǒng)。
     短碼作為Markdown的替代方案。
     飛鏢SASS支持（自2020年12月以來(lái)）。
     • >
  4. >

  建立在vue.js上的高級(jí)框架NUXT.JS

  鍵nuxt.js特征：

  出色的性能。
  • 模塊化體系結(jié)構(gòu)，具有超過(guò)50個(gè)可用模塊。
  • 易于學(xué)習(xí)曲線（基于vue.js）。
  • >集成的Vuex狀態(tài)管理。
  • >自動(dòng)代碼拆分。
  • 現(xiàn)代JavaScript代碼轉(zhuǎn)卸，捆綁和縮小。
  >
  • 元標(biāo)記管理。
  • >前處理器支持（Sass，Lifts，手寫筆）。
  jekyll
  Jekyll的簡(jiǎn)單性和易用性使其成為一個(gè)流行的選擇（42K Github Stars）。 它是由Ruby構(gòu)建的，并將Markdown用于內(nèi)容和液體用于模板，非常適合博客和文本繁重的網(wǎng)站。 它為github頁(yè)面提供動(dòng)力，提供免費(fèi)的托管。

  鑰匙jekyll特征：

  簡(jiǎn)單。
  免費(fèi)的github頁(yè)面托管。
  • 強(qiáng)大的社區(qū)支持。
  >高度
  高度經(jīng)常被認(rèn)為是Jekyll的JavaScript替代品，是一種簡(jiǎn)單的本機(jī)JavaScript SSG，具有零配置方法和靈活的模板。 入門的資源包括Craig Buckler的“入門”，雷蒙德·卡姆登（Raymond Camden）的“ 11ty Tutorial”和Tatiana Mac的“初學(xué)者指南高度指南”，以及高度的網(wǎng)站文檔。

  鑰匙高度特征：

  >簡(jiǎn)單性和性能。

  活動(dòng)社區(qū)。

  靈活的模板。
  快速構(gòu)建時(shí)間。
  • vuepress
  7. Vue-power的SSG

     > Vuepress已針對(duì)技術(shù)文檔進(jìn)行了優(yōu)化。 它的默認(rèn)主題非常適合此目的。 雖然當(dāng)前穩(wěn)定版本為1.8.0，但Github上的版本2 Alpha可用。 它可以用作水療中心，利用VUE，VUE路由器和WebPack。

     設(shè)置Vuepress，使用

     ：create-vuepress-site>

     npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

     請(qǐng)咨詢Vuepress指南以獲取更多詳細(xì)信息。
     鍵Vuepress特征：
     快速設(shè)置和標(biāo)記內(nèi)容創(chuàng)作。
     vue.js Integration（Markdown中的VUE組件，自定義主題）。
     • 快速加載（預(yù)渲染的靜態(tài)HTML，水療功能）。
     • >內(nèi)置的多語(yǔ)言支持。

     兩者都是基于vue.js的，并且創(chuàng)建靜態(tài)網(wǎng)站。 NUXT.JS提供更廣泛的功能，使其適合應(yīng)用程序。 Vuepress擅長(zhǎng)創(chuàng)建靜態(tài)文檔網(wǎng)站和簡(jiǎn)單的博客，避免使用NUXT.JS的開(kāi)銷。 選擇一個(gè)靜態(tài)站點(diǎn)生成器：

     >

     選擇SSG時(shí)考慮這些因素：

     項(xiàng)目要求：

     確定必要的功能。>
     >動(dòng)態(tài)功能：
     確定所需的動(dòng)態(tài)功能的級(jí)別。
     • 構(gòu)建/部署時(shí)間：
     評(píng)估內(nèi)容卷的性能。
     • 項(xiàng)目類型：
     選擇適用于博客，個(gè)人網(wǎng)站，文檔或電子商務(wù)的SSG。
     • 開(kāi)發(fā)人員熟悉度：
     使用您舒適的語(yǔ)言選擇一個(gè)SSG。
     • >社區(qū)和支持：
     所有列出的SSG都有強(qiáng)大的社區(qū)和資源。
     • >
     FAQS：
     什么是SSG？

     與動(dòng)態(tài)網(wǎng)站相比，從模板和內(nèi)容中生成靜態(tài)HTML頁(yè)面的工具，提供更快的負(fù)載時(shí)間和改進(jìn)的安全性。> >

     ssg vs.cms？
     cmss動(dòng)態(tài)生成頁(yè)面，而ssgs預(yù)先構(gòu)建了整個(gè)站點(diǎn)，創(chuàng)建靜態(tài)文件。 SSG是較少更新的內(nèi)容的理想選擇。
     • > >編程知識(shí)？
     基本的編程技能有助于自定義，但許多SSG對(duì)用戶友好。> SSG可以處理博客和動(dòng)態(tài)內(nèi)容嗎？ 由于快速加載時(shí)間，
     • ssg和seo？靜態(tài)站點(diǎn)通常對(duì)SEO友好。 SSG促進(jìn)元數(shù)據(jù)和標(biāo)頭優(yōu)化。