无臃肿的静态站点：Quesby 的现代 Web 开发方法

发布: 6天前 (2025年12月12日 GMT+8 22:00)

7 min read

原文: Dev.to

Source: Dev.to

现代工具链的问题

大多数开发者会从一个简单的网站开始，打开他们喜欢的工具，结果却要面对打包器、配置、依赖以及与项目无关的功能。
这些工具本身没有错——它们是为雄心勃勃的应用而构建的——但当你只是在生成 HTML 页面时，整个生态系统会变成不必要的负担。

Quesby 的理念

Quesby 采用不同的视角：只使用对静态站点真正有用的东西，让工作流可预测，避免携带不会用到的工具。

核心思想

基于 Eleventy – 其理念适合静态站点：从模板生成 HTML，除非主动要求，否则不做其他事。
不附带运行时 – 没有前端框架的假设。
不使用不必要的工具 – 默认省略分析、外部字体和客户端库。
不打包或维护未使用的内容 – 目标不是审美上的极简，而是实用地减少臃肿。
透明的层级 – 内容、模板、SEO 与资源都放在可以检查和自定义的位置。

SEO 变得简单

Front matter 成为 meta 标签、OpenGraph、Twitter Cards、JSON‑LD、规范 URL 与语言备选的唯一来源。Quesby 将这些逻辑合并到一个可预测的模块中，而不是让你去管理多个插件。

---
title: "Static Sites Without the Bloat"
description: "How Quesby trims modern tooling down to what static sites actually need."
image: "/assets/images/posts/static-sites-without-the-bloat/cover.jpg"
---

Quesby 会把它转换为一致的 markup：

Static Sites Without the Bloat | Example Site

图片处理

Eleventy Image 功能强大但噪音很多。Quesby 用合理的默认值包装它，处理 WebP/AVIF 输出、回退、现代 markup、懒加载以及确定性的文件名。你可以得到好用的部分，而不必面对繁琐的配置。

在模板中使用图片的典型写法（Nunjucks 语法）如下：

{% image "src/assets/images/posts/static-sites/cover.jpg", "Cover image for the article", "article-cover" %}

Quesby 会自动添加响应式来源、现代格式以及 loading="lazy" 等属性。

内容工作流

Quesby 提供结构化的内容目录、自动生成 slug、基于 ULID 的 ID、预定义集合以及简洁的 front‑matter 规则。新增文章只需创建一个文件：

src/content/posts/01HXYZABCD1234567890--my-first-post/index.md
---
id: 01HXYZABCD1234567890
title: "My First Post"
slug: "my-first-post"
description: "Short summary used for meta tags and previews."
date: "2025-12-09T10:00:00.000Z"
image: "/assets/images/posts/my-first-post/cover.jpg"
category: "guide"
tags: ["static-site", "eleventy", "seo"]
---

Markdown 内容写在 front matter 之后。
如果想要快捷方式，运行以下帮助命令：

npx quesby new post "title-of-the-article"

目录结构

布局刻意保持平淡且易于理解：

src/
├─ _data/
│  └─ site.json
├─ _includes/
│  ├─ layouts/
│  └─ partials/
├─ assets/
│  ├─ css/
│  ├─ js/
│  └─ images/
├─ config/
│  ├─ collections.js
│  └─ taxonomies.js
├─ content/
│  ├─ media/
│  └─ posts/
└─ themes/
   └─ quesby-core-theme/

没有隐藏的流水线，没有神奇的目录——六个月后再打开仓库仍然一目了然。

性能与隐私

零不必要的 JavaScript
极简 CSS
优化的图片
不使用 Cookie
除非你主动添加，否则不发起外部请求

性能不是卖点，而是精简配置的自然结果。Quesby 不带任何第三方集成，这意味着外部请求更少、法律要求更少、性能惩罚更少、审计时的意外也更少。只有在明确需要时才添加分析或嵌入。

开发者体验

Quesby 避免了两种极端：

庞大的配置 – 一切都是模块化且可预测的。
“一键魔法”隐藏所有细节 – 你可以看到并控制每一层。

你将获得：

稳定、易懂的代码库
模块化配置
可预测的构建行为
在不深入抽象层的情况下自由扩展

开发者体验应当支持开发，而不是在其周围增加仪式感。

适合使用 Quesby 的人群

构建静态或内容驱动站点的开发者
更倾向于显式结构而非重度约定的人员
想要在不面对插件迷宫的情况下解决 SEO 与图片处理的团队
Eleventy 爱好者并希望围绕其构建生态系统的人
任何想要拥有可审计、可覆盖工作流的人

如果你在构建完整的 Web 应用，可能需要其他技术栈。对于普通网站，Quesby 更加自然。

入门指南

当你觉得这种平衡适合下一个项目时，使用以下命令启动新站点：

npm create quesby@latest

结论

静态站点并不需要复杂的工具链，但结构化和良好的默认值确实能带来帮助。Quesby 正好位于这两者之间：轻量、稳定，专注于解决静态站点开发中反复出现的问题，而不必引入为其他使用场景设计的完整生态系统。它并不试图重新定义 Web 开发，只是想让搭建网站的过程重新变得理性。