最热开源静态网站生成器,js静态站点生成工具

作者:亚搏app官网    发布时间:2020-02-09 19:41    浏览:154 次

[返回]

时间: 2018-01-24阅读: 3571标签: react

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。 相对于传统的动态网站框架,静态网站生成器具有许多优势:更好的性能、更高的安全性、更低的伸缩成本以及更加有趣的开发者体验。

近年来,作为传统动态网站基础架构的替代方案,现代静态网站生成器日渐盛行。在 StaticGen 上有一个关于静态站点生成器的开源目录,2017 年该网站追踪了超过一百个生成器,并见证了这些生成器在这一年的流行趋势。本文整理了 StaticGen 目录中排名前 20 的静态网站生成器,排名顺序依据 Github 上的 Star 数。

Gatsby的理解

1、静态站点生成器 Jekyll

图片 1

Jekyll 是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如discuz。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。

什么是Gatsby?

2、Go 编写的静态网站生成器 Hugo

图片 2

Hugo 是 Go 编写的静态网站生成器,速度快,易用,可配置。Hugo 有一个内容和模板目录,把他们渲染到完全的 HTML 网站。Hugo 依赖于 Markdown 文件,元数据字体 。用户可以从任意的目录中运行 Hugo,支持共享主机和其他系统

官方介绍为Blazing-fast static site generator for React(用于React的超快静态站点生成器)。

3、静态博客网站生成器 Hexo

图片 3

Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的 Tommy Chen。

特点:

  • 不可思议的快速 ─ 只要一眨眼静态文件即生成完成

  • 支持 Markdown

  • 仅需一道指令即可部署到 GitHub Pages 和 Heroku

  • 已移植 Octopress 插件

  • 高扩展性、自订性

  • 兼容于 Windows, Mac & Linux

不再为web技术落后而头痛

4、基于 Git 制作电子书 GitBook

GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书,GitBook 并非关于 Git 的教程。

图片 4

使用GitBook生成的电子书

GitBook支持输出多种文档格式:

  • 静态站点:GitBook默认输出该种格式,生成的静态站点可直接托管搭载Github Pages服务上;

  • PDF:需要安装gitbook-pdf依赖;

  • eBook:需要安装ebook-convert;

  • 单HTML网页:支持将内容输出为单页的HTML,不过一般用在将电子书格式转换为PDF或eBook的中间过程;

  • JSON:一般用于电子书的调试或元数据提取。

享受最新Web前端技术的强大功能--React.js,Webpack,现代JavaScript和CSS等等,所有这一切都将启动并等待您的开始。

5、ReactJS 静态网站生成器 Gatsby 

图片 5

Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。

特点:

  • 无需重载页面转换

  • 热重载编辑

  • 为构建静态网站创建 React.js 组件模型和生态系统

  • 直观的基于目录的 URLs

  • 支持 "Starters"

使用你自定义的数据

6、Vue.js 后端渲染开源库 Nuxt.js

图片 6

Nuxt.js 是一个通过 Vue 用于服务端渲染的简单框架,灵感来自 Next.js。 Nuxt 基于 ES2015,这使得代码有着更愉快,更整洁的阅读体验。它不使用任何转换器,并取决于 Core V8 实现的功能。

Gatsby丰富的数据插件生态系统允许您使用您想要的数据构建网站 - 来自一个或多个来源:使用GraphQL将数据从无头CMS,SaaS服务,API,数据库,文件系统等更直接地导入您的页面。

7、静态页面生成程序 Pelican

Pelican 是一个法国人用 python 写的用于生成静态页面的程序,支持:

  • 博客文章和页面

  • 使用外部服务 Disqus 实现的评论功能

  • 支持主题

  • 可对文章生成 PDF 文档

  • 支持多语言发布文章

  • Atom/RSS feeds

  • 代码着色

  • 使用 LESS CSS (optional)

  • 可导入 WordPress, Dotclear 或者 RSS feeds

  • 集成外部功能 Twitter, Google Analytics, etc. (optional)

轻松发布到互联网

8、静态网站生成器 Metalsmith

图片 7

一个非常简单,可插拔的静态网站生成器。在 Metalsmith 中,所有的逻辑都是由插件来处理的。 你只需将它们链接在一起。

Gatsby.js是互联网化的。 你可以不用理会数据库和服务器的复杂部署,以及昂贵,耗时的设置成本,维护和缩放恐惧。 Gatsby.js将您的网站构建为“静态”文件,可以轻松部署在数十种服务上。

9、前端 Web 应用程序构建工具 Brunch

图片 8

Brunch 是一个轻量级的、优雅和简单的方法构建 HTML5 应用程序的框架,快速的前端 Web 应用程序构建工具,具有简单的声明性配置,用于快速开发的无缝增量编译。

使您的网站面向未来

10、Ruby 编写的静态网站生成器 Middleman

图片 9

Middleman 是一个 Ruby 编写的静态网站生成器,他可以让你使用几乎所有在Ruby Web开发中所使用的技术和工具来构建各种类型的静态网站。比如:在 Ruby on Rails 经常用到的 Sass、CoffeeScript、Sprockets、Erb & Haml 等,都可以在 Middleman 里使用。

不要用过去十年的技术建立一个网站。 网络的未来是移动的,JavaScript和API - JAMstack。 每个网站是一个Web应用程序,每个Web应用程序是一个网站。 Gatsby.js是你一直在等待的通用JavaScript框架。

11、静态网站生成器 MkDocs

图片 10

MkDocs 可以同时编译多个markdown文件,形成书籍一样的文件。有多种主题供你选择,很适合项目使用。

MkDocs 是快速,简单和华丽的静态网站生成器,可以构建项目文档。文档源文件在 Markdown 编写,使用单个 YAML 配置文件配置。

静态渐进式Web应用程序

12、静态网站生成器 Expose

图片 11

Expose 是一个帮助图配文生成的静态网站生成器。

Gatsby.js是一个静态PWA(Progressive Web App)生成器。 您可以将代码和数据分开。 Gatsby只加载关键的HTML,CSS,数据和JavaScript,以便您的网站加载尽可能快。 一旦加载,Gatsby预取其他网页的资源,所以点击网站感觉非常快。

13、静态网页生成系统 Assemble

图片 12

Assemble 是一个使用 Node.js,Grunt.js,Gulp,Yeoman 等来实现的静态网页生成系统。已被 Zurb Foundation, Zurb Ink, H5BP/Effeckt, Less.js / lesscss.org, Topcoat, Web Experience Toolkit 等数百个项目用来生成项目网站、主题、组件、文档、博客和 github 页面。

超越竞争

14、静态站点生成器 Wintersmith

图片 13

Wintersmith 是一款静态站点生成器。它包括了内容(markdown,less,script 等),使用插件和输出静态网页(html,css,image 等等)来转换。它附带有 markdown 插件和 jade 模版。

Gatsby.js建立最快的网站。 不需要等待请求时生成页面,而是预先生成页面,并将其提升到全球服务器云端 - 随时随地传送给用户,无论他们身在何处。

15、静态网页生成器 Cactus

Cactus 是一个简单而强大的静态网页生成器程序,它使用 Python 和 Django 的模板系统。它的本地开发和在S3 上的部署都非常的简单。

因为目前的动态网站大部分都可以使用 JavaScript 来完成,这样实际上网页完全可以是静态的,而且静态网页速度非常快并且容易管理。所以才有了这个项目。

作者开发 Cactus 的目的是为了给设计师们提供一个标准而简单的系统,让他们能够快速的构建和部署一个速度很快的网站。

Gatsby的使用安装Gatsby:

16、React 的渐进式静态网站生成器 React Static

图片 14

React Static 是一个 React 的渐进式静态网站生成器。它也是一个服务端渲染 React 应用的简约框架,旨在构建一个满足 SEO,网站性能和用户/开发人员使用体验的标准,帮助每个人无痛地构建下一代、高性能的网站。

功能特性

  • 100% React。

  • 快速运行,高性能构建。

  • 数据平台不可知论者(Data Agnostic),可从任何地方提供你的网站数据。

  • 为 SEO 而生。

  • React 优先的开发体验。

  • 无痛的项目设置和迁移。

  • 100% 支持 React 生态系统。 包括 CSS-in-JS 库,自定义 Query 层(如 GraphQL),甚至 Redux。

需预装node.js(版本4及以上)并使用npm或者yarn用作依赖包管理。然后安装全局的gatsby:

17、静态网站生成器 DocPad 

图片 15

DocPad  可以帮助生成具有布局,元数据,预处理器(markdown,jade,coffeescript 等等),部分,骨架,文件查看器,查询和完美的插件系统的网站前端。这大大减少了有经验开发者和初学者开发网站之间的不同,帮助用户更快速的建立自己的网站。

npm install -g gatsby

18、JavaScript 编写的静态网站生成器 HubPress

图片 16

HubPress 是一个由  JavaScript 编写的静态网站生成器,使博客维护更加简单。

主要特性:

  • 提供 WYSIWYG 编辑器撰写博客
  • 支持 AsciiDoc 标记功能,将内容按照用户需求呈现

  • 管理控制台可以自定义博客内容的许多方面

  • Disqus 整合博客评论

  • 利用Google Analytics 集成来跟踪访问者活动

  • 附带多种主题,随时可以使用

Gatsby CLI的使用:

19、模块化网站编译器 Phenomic

图片 17

Phenomic 是一个模块化网站编译器,让网站构建更快、更简单。

1.创建一个新的网站项目,命令行定位到相应的目录:

20、静态网站生成器 Lektor

图片 18

Lektor 是静态网站生成器,也是平面文件内容管理系统。Lektor 从静态文件的大量独立 HTML 页面构建出一个完整的项目,同时内置管理 UI 和极小的桌面应用。

【编辑推荐】

gatsby new gatsby-site

2.定位到当前目录:

cd gatsby-site

3.启动热更新:

gatsby develop

Gatsby会自动启动热更新后台服务器,地址为: localhost:8000。现在如果修改了 src/pages 目录下的文件,保存后,会马上热更新到浏览器的页面上。

4.生成构建:

gatsby build

Gatsby会在public目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上,可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。如果有用过hexo的朋友们应该会比较熟悉,目录结构类似。

5.本地服务器测试:

gatsby serve

此时Gatsby会启动静态网页服务器供你测试刚才“gatsby build”生成的静态网页

Gatsby地址:官网::

搜索