前言

“ 都2022年了，不会还有人没用过静态网站框架吧 ”。看到这句话，很多人不禁会想：网站听过，框架听过，但是静态网站框架我怎么没听过？确实，在没接触Vuepress这类静态网站之前，我也没听说过这类东西，但是了解之后发现很有意思。接下来带大家来认识一下这些静态网站框架。

我会把有相同特征的框架放在一起来介绍。

Vuepress && Publii && Gatsby

这三种都是基于Vue和React使用的静态网站框架。

Vuepress

首先来介绍一下 Vuepress，这是我第一次接触的网站框架。之所以能了解到它还要从我的一个朋友说起，那时候他搭建了一个静态博客，就是用Vuepress写的，当时我还并不知道这是什么东西，所以他就把他写的教程文章推给我看了。也就是通过这篇文章让我打开了静态网站框架的大门。

Vuepress是由Vue支持的静态网站生成工具，Vue大家都知道或者使用过吧，一种轻量级且好用的框架，因为Vue上手起来很简单，所以Vuepress使用起来也不难。因此，如果大家有一点点编程基础，都可以很好地使用Vuepress，因为它真的对新手很友好。如果想快速上手搭建一个静态的博客网站来简单记录记录笔记或者文章，选择Vuepress就对了。

我接触了Vuepress之后，也学着搭建了一个博客，用来记录笔记。怎么说呢，Vuepress 搭建博客确实很轻松，对新手很友好，这是我的亲身体验。

Publii

Publii是一款基于桌面的静态且开源的CMS框架，和Vuepress一样，适用于初学者和开发者快速建立一个安全、快速、时尚的静态网站。它能使生成一个静态网站变得很容易。它是用Electron 和 Vue构建的。Electron是一款桌面端应用框架，Vue是构建用户界面的框架，因此用它来生成一个简单的静态网站也是很好的选择。

Gatsby

Gatsby是一个越来越流行的开源网站生成框架。它使用React来生成快速、界面优美的网站。前面提到的Vuepress则是使用Vue来生成网站的。因此一个是基于Vue框架，一个是基于React框架。

什么是Gatsby? 官方介绍为Blazing-fast static site generator for React(基于React的超快静态站点生成器)，它的网络速度是超快的。由于它是使用React来生成网站的，因此我们可以在静态网站的实现方式上利用到React的组件化思想或者React其他的相关方式。因此，喜欢使用React框架的朋友可以尝试一下Gatsby。

除此之外，它也可以提供很多插件和主题，使得搭建的网站更丰富。

Hexo && Jekyll

这两种都是其他语言的静态网站框架。

Hexo

Hexo是一个快速、简洁且高效的网站框架，我们不仅可以用它搭建相当快速的网站，还可以利用它自身提供的丰富的主题和插件来生成炫酷的网页。它有很多靓丽的主题，能给有时候平平无奇的静态网页增添几分色彩（这一点和Gatsby很像）。另外，它还可以根据用户的需求提供了强大的API来扩展功能。我们在网上看到的很多博主的炫酷博客网站大部分都是用Hexo来实现的。

Hexo我也使用过，但是失败了，对它的使用掌握不够。但是如果以后还有机会接触 Hexo的话，还会选择学习它，因为虽然它相比较于 Vuepress没那么容易上手，但是它的功能会更全面更系统。

Jekyll

Jekyll是最受欢迎的开源静态生成工具之一。它利用Markdown、HTML 和 CSS来生成静态的网页文件，这些都是很常见的前端知识，但是它能实现的功能可不少。它支持自定义地址、博客分类、页面、文章以及自定义的布局设计。如果要搭建一个零广告的博客网站，它是个很好的选择。

Hugo

Hugo之所以我把它单独拎出来介绍，是因为它和最近几年很火的Go语言有着很大的关系。

Hugo是另一个很受欢迎的用于搭建静态网站的开源框架。从名字上可以猜出，它和Go语言有着联系，就和从Vuepress名称上可以看出，会和Vue有关。没错，Hugo就是用Go语言写的。

它运行速度快、使用简单、可靠性高，最大的特点就是简洁。它提供了很多高级的主题，并且还提供了一些有用的快捷方式来帮助我们更好地搭建网站。如果要写一个全面的博客网站，它是一个不错的选择。

总结

文章中罗列了我这段时间所了解到的一些常见的开源静态网站框架，或者说是网站生成工具，实际上还有很多不同的静态网站框架，比如Primo，感兴趣的朋友可以去看看。

这里面我使用过 Vuepress和 Hexo，两者各有各的优势吧，对于新手小伙伴而言，我更推荐Vuepress，对于追求更全面的功能的小伙伴而言，Hexo则是一个更好的选择。除此之外，其他框架也各有各的优势，都可以尝试。

最后，这里面没有你使用过的框架，可以在评论中告诉我 ღ( ´･ᴗ･` )。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享