在前端开发的过程中，我们经常需要使用到静态网站生成工具，比如 Jekyll。Jekyll 是众所周知的一个十分优秀的静态网站生成框架，它能帮我们生成整洁美观、易于维护的静态网站。不过，对于初学者来说，Jekyll 的学习曲线可能会比较陡峭。为此，本篇文章将向大家介绍一款比较易于上手的静态网站生成工具——generate-hekyll。
什么是 generate-hekyll？
generate-hekyll 是一款基于 Yeoman 的生成器，它可以帮助你快速生成一个 Jekyll 网站，而无需了解太多 Jekyll 的细节。generate-hekyll 并不是一个 Jekyll 的替代品，而是一个可以帮助开发者快速搭建 Jekyll 网站的工具。
安装 generate-hekyll
首先，我们需要通过 npm 安装 generate-hekyll：
- --- ------- -- ----------------
使用 generate-hekyll
安装完成之后，我们就可以开始使用 generate-hekyll 了。在终端中进入你的项目目录，运行以下命令：
- -- ------
随后，你会收到以下提示，让你选择要生成的项目类型：
- ---- ---- -- ------ ------- ----- --- ---- -- ------- ---- ----- ----- - ----- ------- ---- ---------
在这里，我们选择 Basic project，输入数字 1 并按下回车：
- ---- ---- -- ------ ------- ----- --- ---- -- ------- ----- -------
接下来，我们还需要输入该项目的名称：
- ---- ------ - ---- ---- -------- -------------------
最后，generate-hekyll 会在当前目录下创建一个基于 Jekyll 的网站，并帮你进行必要配置。你只需要进入生成的项目目录，运行以下命令即可在本地预览网站：
- ---- --- -----
指南
generate-hekyll 在生成项目的同时还做了很多事情，它为我们预先配置好了一些文件和文件夹，让我们看一下它的目录结构（使用 tree 命令查看）：
- --- ------ --- ---------- --- --------- --- ------- --- ------ --- ------- - --- ------------- - --- ------- - --- --- --- ------ --- ---------- --- ------- --- ------------ --- ----------- --- ---------
看到以上文件结构，是不是很熟悉？这些文件和文件夹都是 Jekyll 中使用的通用文件、文件夹，它们的作用分别是：
_data/：管理 Jekyll 网站的全局数据文件_includes/：模板的可重用部分_layouts/：模板_posts/：所有文章_sass/：编写 SCSS 的地方，可以自定义风格assets/：包含网站的全部样式、图片、字体和 JavaScript 文件pages/：管理页面
如果你之前使用过 Jekyll，这里是很熟悉的。
除此之外，生成器还有一些其他的功能。比如我想添加一篇文章，可以运行以下命令：
- -- ----------- --- ------- -----
运行完毕后，generate-hekyll 就会在 _posts 目录下自动创建一个 Markdown 文件，用于博客文章的编辑。
不仅如此，generate-hekyll 还支持自定义脚本的添加。我们可以在根目录下新建一个 scripts/ 目录，并在其中添加自己的脚本，最后在 package.json 文件中配置运行脚本命令。例如，我们在 scripts/ 目录下新建 test.js 文件：
----------------- ---------
然后在 package.json 中配置：
---------- - ------- ----- ------------------ -
这样，我们在终端中运行 yarn run test 就可以执行 test.js 中的脚本了。
结语
generate-hekyll 让我们可以无需了解复杂的 Jekyll 细节，即可创建一个漂亮的 Jekyll 网站。同时，它允许我们自定义脚本以及进行其他一些自定义操作，使得我们的工作更为便捷高效。希望这篇文章能够帮助各位更好地理解 generate-hekyll，并在日常开发工作中起到一些帮助作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005624f81e8991b448df8dd