Nodejs 开源一个小工具 - 更快、更简单的静态站点生成器 generator-pencil

Nodejs 开源一个小工具 - 更快、更简单的静态站点生成器 generator-pencil

好强大的样子

8 回复

Nodejs 开源一个小工具 - 更快、更简单的静态站点生成器 generator-pencil

大家好！今天我非常高兴地向大家介绍一个我最近开发的Node.js开源项目——generator-pencil。这是一个用于快速创建静态网站的工具，旨在简化静态站点的生成过程，并提供更快的构建速度。

为什么选择 generator-pencil？

  • 快速构建：利用Node.js的强大性能，generator-pencil 能够高效地处理大量文件。
  • 简单易用：只需几个简单的命令，即可完成从项目初始化到生成静态站点的全过程。
  • 灵活配置：支持多种模板引擎（如EJS, Pug等），便于根据需求进行自定义配置。

如何使用 generator-pencil？

首先，确保你已经安装了Node.js。然后通过npm全局安装generator-pencil：

npm install -g generator-pencil

接下来，创建一个新的项目目录并初始化：

mkdir my-new-site
cd my-new-site
pencil init

这将引导你完成一些基本设置，包括选择模板引擎、配置站点基本信息等。

一旦项目初始化完成，你可以开始编辑你的HTML或Markdown文件。generator-pencil 支持直接从Markdown文件生成页面，也可以通过模板引擎渲染动态内容。

例如，如果你选择使用Pug作为模板引擎，并且有一个名为index.pug的文件：

doctype html
html
  head
    title My Website
  body
    h1 Hello, World!
    p This is a sample page generated by generator-pencil.

运行以下命令来生成静态文件：

pencil build

生成的静态文件将位于默认的dist目录中，你可以将其部署到任何Web服务器上。

结语

generator-pencil 是一个功能强大且易于使用的静态站点生成器。它不仅简化了静态站点的创建流程，还提供了丰富的定制选项以满足不同的需求。如果你正在寻找一种更快捷的方式来构建静态网站，不妨试试generator-pencil吧！

希望这个工具能帮助到你，也欢迎提出宝贵的建议和反馈！


顶起来

😄～

妥妥的～～～

呵呵，顶一个，不明觉厉……

不少人都在Github上写博客的～都要用到这些

哎。。。。。不要让Github离开我们。。。。这样的推广还是不要的好。 在自己家里搭一个好了，搞个花生壳域名

当然可以！下面是一个简短的示例，展示如何使用 Node.js 和一些常见的库（如 fs 和 path）来创建一个简单的静态站点生成器。这个示例将帮助你理解如何从模板生成静态 HTML 文件。

示例：generator-pencil

1. 创建项目结构

首先，创建一个新的 Node.js 项目并安装所需的依赖：

mkdir generator-pencil
cd generator-pencil
npm init -y
npm install --save ejs fs-extra path

2. 编写代码

创建一个名为 index.js 的文件，并添加以下代码：

const fs = require('fs-extra');
const path = require('path');
const ejs = require('ejs');

// 模板路径
const templatePath = path.join(__dirname, 'templates', 'post.ejs');
// 输出目录
const outputDir = path.join(__dirname, 'public');

// 读取模板文件
fs.readFile(templatePath, 'utf8', async (err, template) => {
    if (err) throw err;

    // 示例数据
    const posts = [
        { title: 'Hello World', content: 'This is the first post.' },
        { title: 'Second Post', content: 'This is the second post.' }
    ];

    for (const post of posts) {
        // 渲染模板
        const htmlContent = await ejs.renderFile(templatePath, post);

        // 创建输出路径
        const outputPath = path.join(outputDir, `${post.title.toLowerCase().replace(/\s+/g, '-')}.html`);

        // 写入文件
        await fs.writeFile(outputPath, htmlContent);
    }

    console.log(`Generated ${posts.length} static pages.`);
});

3. 创建模板文件

在项目中创建一个 templates 目录，并在其中创建一个 post.ejs 文件，内容如下：

<!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 %></div>
</body>
</html>

4. 运行脚本

运行脚本来生成静态页面：

node index.js

这将生成两个静态 HTML 页面，每个页面都包含一个从模板渲染出来的简单博客文章。

总结

这个简单的静态站点生成器展示了如何使用 EJS 模板引擎和 Node.js 来生成静态页面。你可以根据需要扩展功能，例如添加样式、支持更多的页面类型等。希望这个示例对你有帮助！

回到顶部