博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
雨果vs.杰基尔:比较领先的静态网站生成器
阅读量:2525 次
发布时间:2019-05-11

本文共 3750 字,大约阅读时间需要 12 分钟。

除非您的精神动物是艾米莉·狄金森(Emily Dickinson),否则当您制造事物时,就想与世界分享。 分享您的工作意味着您需要一个网站。 当然,您可以简单地参与数字共享裁剪,并使用各种社交媒体网站中的任何一种来将您的作品展示在观众面前。 肯定有很多选择...而不仅仅是“常规”社交媒体网站。 在诸如Artstation,Flickr,Soundcloud和Wattpad之类的地方,无论您使用哪种媒介,都有适合您的出口。

实际上,您应该使用这些网站。 毕竟这里就是人们的所在地。 但是,这些地方都不是您真正的地方。 都不是一个大本营, 控制,并且可以保证将在那里为人们寻找不管社会化媒体的消长趋势。

控制。 这就是在网上拥有自己的位置的价值。

但是本文不是关于为您的网站设置域名和托管。 在此之后的步骤是该站点的实际制作。 对于很多人来说,典型的选择是使用东西。 这是大多数托管服务提供商的一键式安装,并且有大量的插件和主题市场可供选择,具体取决于您要构建的网站类型。 但是WordPress不仅对大多数网站来说有些过分,而且还为您提供了一个动态生成的网站,其中包含许多活动部件。 如果您不及时更新所有这些内容,则它们可能会带来重大的安全风险,并且您的网站可能会遭到劫持。

另一种选择是拥有一个静态网站,在服务器端不动态生成任何内容。 只是好的旧HTML和CSS(也许还不错的Javascript)。 该选项的缺点是您已被迫自己亲自编写整个代码。 这是可行的,但是您只想要一个共享您的工作的地方。 为此,您不必了解所有低级Web设计的特质(以及跨浏览器兼容性的巨大难题)。

输入静态站点生成器。 您可以获得静态HTML页面的速度和安全性,但其工作流程更接近于动态网站的便利性。 静态站点生成器世界中的两个领先者是和 。 (顺便说一句,Paolo Bonzini撰写了一篇有关的精彩文章。)但是,哪一个是您的正确选择? 希望到本文结尾时,您将有一个更好的主意。 我们正在根据您的入门速度,主题的可用性,编辑工作流程和可扩展性评估这两个静态网站生成器。

入门

合理的警告,这两个工具都将要求您从命令行使用它们。 大多数命令简单明了且易于记忆,但让我们相应地调整期望值。 这不是点击界面。

Jekyll和Hugo的安装非常简单。 Jekyll作为RubyGem安装,Hugo提供了一个非常方便的多合一二进制文件,可以帮助您快速入门。 由于安装包单一,Hugo在这里略微领先。 尽管Jekyll的RubyGems安装方法很简单,但它确实需要您已经在计算机上正确安装和配置了Ruby环境。 在网络的设计师和开发人员社区之外,大多数人还没有该设置。

但是,一旦安装,Hugo和Jekyll的匹配就相当均匀了。 他们都有出色的文档和快速入门指南。 您可以使用一个命令来启动新站点(在Jekyll中,这是jekyll new <your_site> ;在Hugo中,是hugo new site <your_site> )。 这将为您的站点设置一个通用的目录结构和脚手架。 目录结构和基本配置非常相似。 Jekyll使用_config.yml文件,而Hugo使用config.toml (尽管您可以使用YAML甚至JSON语法与Hugo的配置一起使用,如果您对这两种方法都比较满意的话)。 每个内容文件顶部的首要事项元数据使用与配置相同的语法。 之后,所有页面内容都将写入Markdown中。

我要说的是,就让您开始使用第一个静态生成的网站而言,Jekyll比Hugo略有优势,因为它以一些基本内容和默认主题开头。 您可以在开始构建网站时将其用作示例模板。 雨果没有示例内容,甚至没有默认主题。 就是说,示例内容和默认主题通常是我使用任何工具创建新网站时首先删除的内容,因此Hugo实际上为我节省了一步。

主题

正如我提到的,Hugo根本不附带默认主题,因此这可能是您要设置的第一批内容。 Jekyll有一个不错的默认主题,尽管它很裸露。 您可能也想在Jekyll网站上进行主题狩猎。

雨果(Hugo)和杰基尔(Jekyll)都有各种各样的主题,可以用于各种类型的网站类型,从单页ID主题到带有博客文章和评论的成熟多页站点。 尽管如此,要找到适合您需求的主题并非易事。 在任何一种情况下,寻找主题的地方 和Jekyll的基本上都是一个充满主题屏幕截图的大页面。 单击主题后,您可以获得有关该主题的一些非常详细的信息,但是最初的搜索非常困难。 Hugo的主题页面内置了一些基本标记,但是总的来说,主题搜索和演示是我觉得这两个项目都确实需要进行的工作。

主题管理也是一个有趣的话题。 在这两种情况下,几乎每个主题都是一个Git存储库(通常托管在GitHub上),您可以将其克隆到网站支架中。 在Jekyll中,还有一个额外的步骤,即使用RubyGems的捆绑包来确保通过网站管理主题。 大多数主题已经随附了Gemfile ,这使得此步骤相对轻松 。 如果主题还没有Gemfile ,则添加起来相当容易。 在雨果,没有捆绑步骤。 只需从config.toml指向主题就可以了。

我发现我偏爱于Hugo处理主题的方式。 您可以在主题子目录中将主题克隆(或创建)到它们自己的空间中。 不仅使初次使用时在主题之间切换相对容易,而且还使您能够用自己的文件覆盖主题的任何组件文件。 这意味着您可以根据自己的喜好自定义主题,而不会与原始主题的来源混淆太多,从而使该主题保持足够的通用性,供其他人使用。 当然,如果您觉得主题的其他用户可能会觉得有价值,那么您仍然可以编辑该源并将提拉请求提交给主题维护者。

工作流程

设置初始配置后,在Jekyll和Hugo中构建网站的工作流程非常相似。 两者都有一个live serve命令,可在您的计算机上运行小型轻巧的Web服务器,因此您可以在本地测试站点,而无需将其上传到任何地方。 真正的好处是,无论您是运行jekyll还是hugo ,默认情况下都将其配置为监视您对网站进行的任何更改。 当您在浏览器中查看站点的本地服务版本时,它会随着您所做的任何更改而自动更新,无论该更改是针对内容,配置,主题还是只是图像。 这真的很方便,而且节省了很多时间。

您可以使用语法在两个系统中编写站点的内容。 如果您不熟悉Markdown,这是一种非常简单的纯文本编写方式,同时还允许使用一些不错的格式标记。 使用起来非常容易并且易于阅读。 而且由于它是纯文本格式,因此您的内容(以及您的网站)很容易进行版本控制。 这些天几乎是我编写几乎所有内容的主要方式。

通过在正确的位置手动创建文件,可以将新内容添加到您的网站支架中。 它只是一个Markdown文件,文件顶部带有适当的“前事”元数据。 与配置文件一样,Jekyll对前端事务使用YAML语法,而Hugo将接受TOML,YAML或JSON(默认为TOML)。 该新页面文件需要放置在站点支架中的正确目录中。 在Jekyll中,您有单独的_drafts_posts目录,分别用于存储正在进行的工作和完成的内容页面。 在Hugo中,只有一个内容目录。 您可以在内容文件的首页中指定帖子是否为草稿。

现在,尽管可以手动完成所有这些操作,但是Hugo确实提供了一些便利功能,以确保在脚手架中的正确位置创建新文件,并确保文件预先填充了适当的前件。 只需在终端中转到站点目录,然后输入hugo new content / <page.md> ,其中<page.md>是您要创建的新页面即可。 您甚至可以设置称为原型的模板,以容纳不同类型页面的自定义主题(例如,如果您的网站上同时拥有博客和播客)。

当您准备好发布网站时,可以关闭预览服务器并发出命令来构建网站的实际页面。 在Jekyll中,这就是jekyll build 。 在雨果,它只是雨果 。 Jekyll将完成的站点放在_site子目录中,而Hugo则将它们放在名为public的子目录中。 无论哪种情况,一旦完成,您就拥有一个完整的静态网站,可以上传并托管在几乎任何地方。

可扩展性

Hugo和Jekyll都使您能够自定义最小的网站。 但是,就可扩展性而言,由于其插件API,Jekyll目前处于领先地位。 由于采用了这种插件架构,因此可以通过Jekyll社区提供的相当简短的代码片段或您自己编写的功能,将功能添加到Jekyll生成的站点中相对容易。

Hugo目前根本没有插件API,因此添加这种功能要困难一些。 希望将来会增加编写和包含插件的功能,但似乎还没有人在为此工作。

结论

总的来说,雨果和杰基尔很相似。 这实际上取决于确定您最舒适的工作方式以及站点的需求。 如果您已经设置了RubyGems环境,并且需要插件的可扩展性,那么Jekyll是您的最佳选择。 但是,如果您重视简单的工作流程和直接自定义网站的方法,那么Hugo将是您的首选。

我发现我更喜欢Hugo的方法,并且在构建少量站点时,我还不需要任何插件。 当然,每个人的需求都有所不同。 您将为站点选择哪个静态站点生成器?

翻译自:

转载地址:http://jzczd.baihongyu.com/

你可能感兴趣的文章
玩转webpack之webpack的entry output
查看>>
java 操作mongodb查询条件的常用设置
查看>>
黑马程序员_java基础笔记(02)...java语言基础组成
查看>>
对innodb 拷贝文件实现数据库的方式(转)
查看>>
python知识点 2014-07-09
查看>>
FloatingActionButton的一点学习感悟
查看>>
ABAP CDS ON HANA-(10)項目結合して一つ項目として表示
查看>>
网站地址信息
查看>>
产品经理 - 登录 注册
查看>>
Notepad++ 通过g++编译
查看>>
Ruby Gem 的基础知识和详解
查看>>
Vue学习
查看>>
html5的本地存储
查看>>
Java设计模式系列之中介者模式
查看>>
eclipse编译时过滤SVN版本控制信息方法(转)
查看>>
CSS3中使用calc()设置宽度和高度
查看>>
泉五培训Day5
查看>>
理解constructor属性
查看>>
java学习 java 的继承机制 暑假第三天
查看>>
计算机基础(计算机专业)
查看>>