跳到内容

静态网站生成器 Gridsome 介绍

发布于:2019年12月6日,最后更新:2023年2月20日

Gridsome 是一个免费、开源、基于 Vue 框架的静态网站生成器。

本站(https://www.jitao.tech)就是用 Gridsome 生成的。

静态网站生成器是使用一系列配置、模板以及数据,生成静态 Html 文件及相关资源的工具。生成的网站不需要类似 PHP 这样的服务器,只需要放在支持静态资源的 Web Server 下或者 CDN 上即可访问。

静态网站有这样几个好处:

常见的静态网站生成器有:

另外,Next.js,Nuxt.js 也能生成静态网站,但是它们更多被认为是 SSR (服务端渲染) 框架。

这类静态网站生成器还有个漂亮的名字叫 JAMStack。JAMStack 的 JAM 是 JavaScript、API 和 Markup 的首字母组合。本质上是一种胖前端,通过调用各种 API 来实现更多的功能,其实也是一种前后端的模式,只不过离得比较开,甚至前后端来自多个不同的厂商。

拿 Gridsome 来说,在网站生成阶段,调用 Headless CMS (无头内容管理系统) 的 API 来获取数据,作为生成静态页面的内容;在运行阶段,调用比如 Disqus 的 API 实现评论,调用 Formspree 的 API 实现存储提交的表单数据。这些 API 都是专做某一领域的,静态网站只需要使用他们的功能,不用自己操心服务器和数据库等基础设施,其实是专一领域的 BaaS (后端即服务) 。

使用 Gridsome 需要一定的 Vue 基础,如果有基础,看过文档,只会觉得它比 Vue 本身更简单一些。

本文只是简单的介绍,具体使用方法请参考官方文档,Gridsome 的官方网站是:https://gridsome.org 。截取网站首页一张图欣赏一下:

Gridsome website

欢迎关注同名微信公众号,文章自动推送:

nomadic-blood