静态网站生成器有哪些

静态网站相比对是动态网站,而动态网站则不用说了,目前互联网各大平台可以说都是属于动态网站类型。用户基数大,总是要考虑运营的,而用户运营是运营必不可少的一环节。

静态网站的交互性过于薄弱,因此不适合构建大型网站。更适合官方文档,企业网站,或者喜欢“极客”风的个人博客用户。而优点则是安全性好,加载速度快,有多大流量就能撑起多少用户。

因事先生成好html相关文件,所以不用担心数据查询等问题导致的性能瓶颈。要事先生成好这些html页面文件,就得有静态网站生成器(Static site generators 缩写 SSG)这样的工具。

就用户基数比较大的有Hexo,Hugo,Gatsby,Vuepress,Jekyll。另外还有Pelican,Metalsmith,Octopress,Pelican,Middleman,DocPad,Wintersmith,Cactus,HubPress,MkDocs,Docsify等,实在太多了,根据数不过来。

名字中带Doc的适合的的场景也很明显,适合有较为明显的层级展现关系的,比如书籍,应用文档之类的。

Hexo

我最开始接触静态网站就是Hexo,但最后网站上线用的却是Hugo。衡量用户的多少,用百度指数,谷歌趋势都不够直观的看到数据。

因此,我们就看看Github上的stars数量吧。

跟Hugo相比,Hexo的生成速度实在不是一个数量级的。根据Hexo核心成员的说法,Benchmark数据是300篇文章15s,1000篇文章45s。

毕竟说的是基准数据,我自己直接体验是155篇文章,用时35s,从敲下Hexo g命令后开始计时一直到完成,总共35秒,总共字数是486.4K字。

我用的是Hexo4.2.1(hexo-cli: 3.1.0)的版本,看官网动态,Hexo5.0速度又有小幅度提升,到时候我在看看同样的文章,同样安装了搜索插件,sitemap等插件看看同时多少。

8月10日更新为hexo5.0.2(hexo-cli: 4.2.0)用时比之前快了2~3秒。

hexo与hexo-cli的区别是hexo-cli创建工程后就由hexo模块复制静态页面的生成预览之类的工作。CLI = Command Line Interface 命令行界面

Hugo

很多人都说Hugo的速度独步天下,确实也是这么回事,跟Hexo相比对,Hugo同样的文章字数,不到1s就搞定。

说Hugo的速度和Hexo不在一个数量级上,看来并不冤枉。最开始接触这类静态网页生成器的时候,对Hugo印象好不是因为速度快,那时候也没什么文章,所以速度体现不出来,就差几秒而已。

给我印象最深的是Hugo只需一个二进制文件即可搞定这一些,让我觉得非常干净,而且容易上手。不像Hexo还要npm一堆东西才能用。不过缺陷也很明显,功能性的东西需要一定的动手能力,不如Hexo能够安装插件解决来的便利。

我一直以为用Hugo的人少,看来是中文用户中用Hugo的人少,看Stars的数量比Hexo高出不少呢。所以这就带来一个问题,如果只是喜欢静态网站而不是专业的程序员,应当说Hexo对中文用户支持更友好,毕竟开发出Hexo的就是台湾人。

构建一个博客,刚开始少不了换主题,而hugo很多的主题都是外国人开发的,如果看中了某款主题,还需自己“汉化”后才能使用。对比而言,Hexo有着丰富的中文主题,这一点是其他所有都不能与之比拟的优势。

VuePress

VuePress是VUE来驱动的(还有Nuxt),而VUE则是前端三大框架(Angular、React、Vue)之一。严格意义上说,我最初折腾的就是VuePress,是因为折腾一次失败了,才转向Hexo,从而发现了Hugo。

因此,我对VuePress没什么太大的感触,唯一的感触就是对新手上手难度可能比Hexo,Hugo大些。现在好些了,一搜有不少VuePress的教程,之前就只有2篇,翻来覆去就那么2篇VuePress的相关教程。过了一年,下载了些主题再次试了下Vuepress,渲染速度不比Hexo快,初步印象觉得有些笨重,可能也是因为习惯了Hexo的方式,对Vuepress不大好理解。

主题不多,就官网默认的那一款主题我都还蛮喜欢的,也正因为如此,所以一开始就从VuePress下手折腾。

而且具有SPA(单页应用),一次加载好所需的文件,切换其他页面由JS应用代码直接请求渲染,无需整体刷新。,体验起来,速度倒是挺不错的。但也因为是这种原因,所以文章越多,JS脚本也越多,那生成的文件也越多,体积也会稍稍变大。

Gatsby

看到比Hexo,Hugo都还高的Stars数量,是挺出乎我这个外行人的意料。因为看见用Gatsby搭建的博客确实不多,至少在我浏览的印象中,Hexo是排第一的,其次是Hugo。

如果你是搞React的就非常适合用了,或者说用React框架的人都用Gatsby的多。而且功能非常强大,丰富的插件系统可以让你从CMS,SaaS服务,数据库以及API等渠道拉去数据。(它应该与Next.js做比对)

它的功能强大,但来的的问题是依赖也挺多的,属于重量级别的。没有一定编程基础的人,非常不建议使用Gatsby。对于一个博客,能有自己的内容输出是为首要,而至于用什么搭建,这些只是用来实现的工具罢了。

但很多刚开时折腾网站或者博客的人,包括我,都是喜欢先折腾一把用什么工具搭建,是WordPress还是Typecho,还是Ghost,然后转向静态网站了还是想着到底是Hexo,还是Hugo。

选定好工具后,又开始折腾主题,这几乎是每一个人的必经之路。

Jekyll

Jekyll这个工具我从未使用过,不大了解,要不是把Hexo生成好的站点托管在Github pages上,我都不知道有这个工具。因Jekyll由Ruby构建,并且集成到了Github Pages中。

如果你是WordPress用户,想尝试静态网站,而Jekyll则可以通过importer来做这些事(hexo也有类似插件)。当然,强大的WordPress生态系统也有专门用来全站静态化的插件来实现网站静态化。

看来偏见无处不在,我一直以为Hexo是拥有最多的静态网站用户群体数,可从Github Stars数量来衡量的话,Hexo不但不能屈居第二,反倒是倒数第二。

又再一次出乎我的意料,只能说环境和接触面决定了你的眼界和认识。这段时间忽然重视起博客来,就写了几篇文章,未来相信会有一段时间,又要停更很久了吧。

不折腾,就没有东西可写,这话倒是不假。

现在是9月11日,距离统计时间刚好过了一个月零三天时间,发现Hugo增长速度最快,由45.9K→46.5K,其实是Gatsby由46.3K→46.8K,其余则都是增长0.2K,看来Hugo势头强劲,简洁且生成速度快赢得不少人的青睐。

GitHub Star增长速率

下表是从2020.08.08到2021.09.07的统计数据:

程序 2020.08 (Star数量K) 2021.09 (Star数量K) 增长率%
Hexo 31 33.4 7.74
Hugo 45.9 54 17.65
VuePress 17.1 19.3 12.87
Gatsby 46.3 51.2 10.58
Jekyll 41 43.3 5.61

上次统计时间是一个月左右的增长速度,就发现Hugo的增长速度是最快的,现在时间拉长到13个月,还是hugo的增长率遥遥领先,而Hexo多少有些乏力。注意的是Github Star无法代表静态网站生成器的用户数,仅供参考。

如果想了解更多的静态站点和GitHub Stars可参见https://www.staticgen.com,StaticGen是专业对开源静态网站生成器所做的排行榜。想了解前端生态圈的对比可以翻阅https://risingstars.js.org/

间接解决Hexo生成慢的问题

Hexo生成文章慢是因为执行了hexo g命令后不能马上有结果,需要一个过程,几秒到几十秒不等,而这个时候你就需得等到它执行完毕才能执行下一条命令。

如果我们把这个过程放到云端去处理,比如我都是直接把文章push到Coding上,然后再让Coding自动push给github,最后触发Github Actions来处理完成后推送到Github Pages上。而这一过程都是全自动,在本地写好脚本双击一次执行git push,然后就让他在云端处理好了。如果你不是那种写完文章后立马就要自己看一遍的话,可以说这是Hexo较为完美的解决方案。

至于如何完成这两步,可分别参考《Coding持续集成自动同步到GitHub》和《Github Actions自动部署Hexo博客》这两篇文章。其他如Hugo,VuePress等也可以这么用,区别大概就是Actions脚本的不同罢了。