静态站点生成器：初学者指南

Jamstack（JavaScript，API和Markup）作为首选的Web开发堆栈迅速获得了知名度。 Jamstack网站本身将其吹捧为“构建网站和应用程序的现代方式”，强调其出色的性能。

的确，性能是一个关键优势，以及增强的安全性，可扩展性和改进的开发人员体验。 Jamstack Architecture使用了通过CDN提供的预渲染静态页面，将来自不同来源的数据集成，并将传统服务器和数据库替换为微服务API。

>静态站点生成器（SSG）是快速有效地创建这些静态站点的关键。

> 存在许多SSG，支持JavaScript，Ruby和Go等各种编程语言。 虽然可以在statictiteGenerators.net上找到综合列表，但Jamstack网站提供了一个基于名称或GitHub星星的更易于管理，可过滤的列表。

>

本文重点介绍了七个受欢迎的SSG及其核心功能，以帮助选择最适合您的项目。

钥匙要点：

SSGS简化静态站点创建，提供提高的性能，安全性，可扩展性和开发人员体验。 它们通过模板引擎预处理页面，从而产生轻巧，加快的站点。

SSGS> SSG与无头CMS无缝集成，管理内容并提供用于数据访问的API。这使非开发人员能够创建和更新内容，同时保留静态网站的好处。 >流行的SSG包括Gatsby，Next.js，Hugo，Nuxt.js，Jekyll，Eleventy和Vuepress。每个都提供独特的功能和用例，从服务器渲染或静态导出的JavaScript应用到基于VUE的静态网站。 SSG选择取决于项目需求，动态功能需求，构建/部署时间，项目类型（博客，个人网站，文档，电子商务）以及开发人员熟悉SSG的编程语言。

• >什么是静态站点生成器？
传统的CMS（如WordPress）在客户端请求时动态构建网页，从数据库中组装数据并通过模板引擎对其进行处理。 相反，SSG是通过模板引擎进行预处理页面
• >客户端请求，使其立即可用。 仅托管静态资产，导致更轻，更快的站点。
有关传统CMS和SSG的详细比较，以及使用SSG的优点，请参见Craig Buckler的文章“使用静态站点生成器的7个理由。” 但是，CMS的内容创建和管理功能仍然很有价值。 这是无头CMS进来的地方。
• >

  >无头CMS仅通过后端管理内容，为其他前端提供了访问数据的API。 编辑团队可以利用熟悉的接口，并且内容在SSG可以通过API访问的许多数据源中成为一个数据源。 流行的无头CMS选项包括Strapi，Sanity和满足； WordPress还为无头CMS功能提供了REST API。 因此

  >让我们探索一些SSG选项：
  gatsby
  gatsby是一个综合框架，用于构建静态网站和应用程序，并使用React和使用GraphQL进行数据操作。 要进行更深入的潜水，请探索“从Gatsby开始：在SitePoint和Gatsby网站的文档上构建您的第一个静态网站”。

  密钥盖茨比优点：

  >利用尖端的Web技术（React，WebPack，Modern JS，CSS）。
  用于不同数据源的广泛插件生态系统。 由于其静态页面的生成，
  易于部署和可伸缩性。>
  • >渐进式Web应用程序（PWA）发电机，具有内置代码和数据分配以获得最佳性能。
  优化图像加载。
  >很多起动站点很容易获得。
  • gatsby-image
  next.js
  2. Next.js是一个多功能框架，用于创建服务器渲染或静态导出的JavaScript应用程序，该应用程序是由Vercel构建的。 创建一个next.js应用：

  启动开发服务器：

  >在

  >。

  上访问该应用程序 Next.js提供了广泛的文档，用于构建和自定义应用程序。 关键功能包括：

  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图像优化，国际化和分析。

  综合文档，教程和示例。

  >
  >内置CSS支持。
  >许多示例应用程序。
  • > hugo
  Hugo是一位非常受欢迎的SSG（超过49k Github的星星），以Go和Go的速度写成出色的速度。 它的快速构建过程使其非常适合具有广泛内容的博客。 该文档包括一个简化设置的快速启动指南。
  3. 关键雨果特征：
     • 对速度进行了优化（内容渲染〜1ms）。
     >
     • >内置功能，例如分页，重定向和多种内容类型。>
     丰富的主题系统。
     短码作为Markdown的替代方案。
     飞镖SASS支持（自2020年12月以来）。
     • >
  4. >

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

  键nuxt.js特征：

  出色的性能。
  • 模块化体系结构，具有超过50个可用模块。
  • 易于学习曲线（基于vue.js）。
  • >集成的Vuex状态管理。
  • >自动代码拆分。
  • 现代JavaScript代码转卸，捆绑和缩小。
  >
  • 元标记管理。
  • >前处理器支持（Sass，Lifts，手写笔）。
  jekyll
  Jekyll的简单性和易用性使其成为一个流行的选择（42K Github Stars）。 它是由Ruby构建的，并将Markdown用于内容和液体用于模板，非常适合博客和文本繁重的网站。 它为github页面提供动力，提供免费的托管。

  钥匙jekyll特征：

  简单。
  免费的github页面托管。
  • 强大的社区支持。
  >高度
  高度经常被认为是Jekyll的JavaScript替代品，是一种简单的本机JavaScript SSG，具有零配置方法和灵活的模板。 入门的资源包括Craig Buckler的“入门”，雷蒙德·卡姆登（Raymond Camden）的“ 11ty Tutorial”和Tatiana Mac的“初学者指南高度指南”，以及高度的网站文档。

  钥匙高度特征：

  >简单性和性能。

  活动社区。

  灵活的模板。
  快速构建时间。
  • vuepress
  7. Vue-power的SSG

     > Vuepress已针对技术文档进行了优化。 它的默认主题非常适合此目的。 虽然当前稳定版本为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特征：
     快速设置和标记内容创作。
     vue.js Integration（Markdown中的VUE组件，自定义主题）。
     • 快速加载（预渲染的静态HTML，水疗功能）。
     • >内置的多语言支持。

     两者都是基于vue.js的，并且创建静态网站。 NUXT.JS提供更广泛的功能，使其适合应用程序。 Vuepress擅长创建静态文档网站和简单的博客，避免使用NUXT.JS的开销。 选择一个静态站点生成器：

     >

     选择SSG时考虑这些因素：

     项目要求：

     确定必要的功能。>
     >动态功能：
     确定所需的动态功能的级别。
     • 构建/部署时间：
     评估内容卷的性能。
     • 项目类型：
     选择适用于博客，个人网站，文档或电子商务的SSG。
     • 开发人员熟悉度：
     使用您舒适的语言选择一个SSG。
     • >社区和支持：
     所有列出的SSG都有强大的社区和资源。
     • >
     FAQS：
     什么是SSG？

     与动态网站相比，从模板和内容中生成静态HTML页面的工具，提供更快的负载时间和改进的安全性。> >

     ssg vs.cms？
     cmss动态生成页面，而ssgs预先构建了整个站点，创建静态文件。 SSG是较少更新的内容的理想选择。
     • > >编程知识？
     基本的编程技能有助于自定义，但许多SSG对用户友好。> SSG可以处理博客和动态内容吗？ 由于快速加载时间，
     • ssg和seo？静态站点通常对SEO友好。 SSG促进元数据和标头优化。

以上是静态站点生成器：初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！