有人用过 Nodejs 版本的 Jekyll 吗

有人用过 Nodejs 版本的 Jekyll 吗

我的博客是基于 Jekyll 的。直接 jekyll serve 启动博客的服务。 想找看看有没有基于 Node.js 的类 Jekyll 项目。 各位有所推荐的吗

13 回复

当然可以！Jekyll 是一个静态站点生成器，通常使用 Ruby 编写。不过，社区中确实有一些基于 Node.js 的替代品，它们提供了类似的功能。其中比较流行的有：

  1. Metalsmith
  2. Eleventy (11ty)
  3. Gatsby

这些工具都支持 Markdown 文件、模板引擎和静态文件处理，可以用来生成静态网站。接下来，我将为你展示如何使用其中一个工具——Eleventy。

Eleventy 示例

1. 安装 Node.js

首先，确保你已经安装了 Node.js。你可以从 Node.js 官网 下载并安装最新版本。

2. 创建一个新的 Eleventy 项目

打开终端，创建一个新的目录，并初始化 npm 项目：

mkdir my-website
cd my-website
npm init -y

3. 安装 Eleventy

安装 Eleventy 及其依赖项：

npm install @11ty/eleventy --save-dev

4. 配置 Eleventy

在项目根目录下创建一个 _11ty.js 或 .eleventy.js 文件（两者都可以），用于配置 Eleventy：

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "dist"
    },
    templateFormats: ["njk", "md"]
  };
};

在这个配置文件中，我们指定了输入和输出目录，并且指定了模板格式为 Nunjucks 和 Markdown。

5. 创建内容

在 src 目录下创建一些 Markdown 文件，例如 src/index.md：

---
title: 首页
---

# 欢迎来到我的博客！

这是首页内容。

6. 添加模板

在 src/templates 目录下创建一个模板文件 index.njk：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <div>{{ content | safe }}</div>
</body>
</html>

7. 运行 Eleventy

在终端中运行以下命令来生成静态网站：

npx eleventy

生成的静态文件将会保存在 dist 目录中。

总结

通过上述步骤，你可以看到 Eleventy 提供了一种类似于 Jekyll 的方式来生成静态网站。你可以根据需要调整配置和模板，以满足你的需求。如果你更喜欢其他工具，比如 Metalsmith 或 Gatsby，也可以按照类似的步骤进行设置。希望这些信息对你有所帮助！


收集过一个列表: https://github.com/coffee-js/languages/wiki/static-blog-tools

用jekyll目的就是用github的免费空间，其他的感觉没有使用的理由，我是实用主义者^_^

推荐hexo

可以看下Heckle https://github.com/marijnh/heckle

这个Node.js版的做得比较好：https://www.npmjs.org/package/enfield

感觉wintersmith不错；但是最后还是自己用grunt+marked写了个。

转成hexo的话整个博客的链接路径就都要变了。

我也在找Node的Jekyll 实现，一会试试上面提到的几个项目。

直接用jekyll不是更省事么：）

不能发布到自己的空间么？

兔在用这个么？

关于使用 Node.js 版本的 Jekyll 替代方案，你可以考虑使用 Vuese 或 Metalsmith 这样的工具。它们都是基于 Node.js 的静态站点生成器，可以满足类似于 Jekyll 的功能需求。

例如，我们可以使用 Metalsmith 来构建一个简单的静态网站。下面是基本步骤和一些示例代码：

安装 Metalsmith

首先确保已经安装了 Node.js 和 npm。然后通过以下命令安装 Metalsmith：

npm install --save metalsmith

创建 Metalsmith 配置文件

创建一个名为 metalsmith.config.js 的配置文件，并添加基础配置：

const Metalsmith = require('metalsmith');
const markdown = require('metalsmith-markdown');

Metalsmith(__dirname)
  .source('./src')       // 指定源文件目录
  .destination('./dist') // 指定输出目录
  .use(markdown())       // 使用 markdown 插件将 Markdown 文件转换为 HTML
  .build(function(err) {
    if (err) throw err;
  });

创建源文件

在 ./src 目录中创建 Markdown 文件和静态资源文件（如图片、CSS 等）。例如，在 ./src 下创建一个名为 index.md 的 Markdown 文件：

# 我的标题

这是一个段落。

运行 Metalsmith

在项目根目录下运行以下命令来构建站点：

node metalsmith.config.js

完成上述步骤后，./dist 目录将包含转换后的 HTML 文件，以及所有静态资源。

如果你想要更多定制化的功能，比如模板引擎、分类等，Metalsmith 提供了大量的插件供选择和使用。这些插件使得你可以灵活地构建复杂的静态网站。

希望这个示例对你有所帮助！

回到顶部