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

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

本文重點介紹了七個受歡迎的SSG及其核心功能，以幫助選擇最適合您的項目。

鑰匙要點：

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

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

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

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

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

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

  啟動開發(fā)服務器：

  >在

  >。

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

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

  >默認服務器端渲染以進行最佳性能。

  npm run dev

  >自動代碼拆分，路由和熱重新加載。

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

  綜合文檔，教程和示例。

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

  建立在vue.js上的高級框架NUXT.JS

  鍵nuxt.js特徵：

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

  鑰匙jekyll特徵：

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

  鑰匙高度特徵：

  >簡單性和性能。

  活動社區(qū)。

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

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

     設置Vuepress，使用

     ：create-vuepress-site>

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

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

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

     >

     選擇SSG時考慮這些因素：

     項目要求：

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

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

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