从0到1打造超高速静态博客：Eleventy Base Blog全攻略-优快云博客

从0到1打造超高速静态博客：Eleventy Base Blog全攻略

【免费下载链接】eleventy-base-blog A starter repository for a blog web site using the Eleventy static site generator. 项目地址: https://gitcode.com/gh_mirrors/el/eleventy-base-blog

你是否厌倦了WordPress的臃肿加载？还在为Hexo的复杂配置头疼？本文将用20分钟带你掌握Eleventy Base Blog的全部核心技能，从零构建一个Lighthouse评分95+、零JavaScript依赖的高性能博客系统。

读完本文你将获得：

3分钟极速搭建11ty开发环境的实战步骤
10个核心配置文件的深度解析与定制技巧
5种高级内容组织方案（含Markdown与Nunjucks混合开发）
自动化图片优化、代码高亮、SEO等8大生产级功能实现
Netlify/Vercel双平台部署的无缝流程

为什么选择Eleventy Base Blog？

静态网站生成器（Static Site Generator，SSG）已成为现代博客开发的首选方案。在Jekyll、Hugo、Next.js等众多工具中，Eleventy（简称11ty）以其零JS输出、极速构建和灵活配置脱颖而出。

特性	Eleventy	Hexo	Jekyll	Next.js
构建速度	⚡️ 极快	较快	中等	中等
输出文件大小	最小	较小	中等	较大
学习曲线	平缓	中等	陡峭	陡峭
模板支持	10+种	2种	2种	React
插件生态	精简实用	丰富	丰富	极其丰富
默认JS依赖	0	较多	较多	大量

Eleventy Base Blog作为官方 starter 项目，集成了博客开发所需的全部核心功能，同时保持代码库的精简（仅47个文件，无冗余依赖）。

环境搭建：3分钟启动开发服务器

系统要求

Node.js 18.x 或更高版本（推荐使用nvm管理多版本）
Git 2.x 或更高版本
npm 8.x+ 或 yarn 1.x+

极速安装步骤

# 创建项目目录并进入
mkdir my-11ty-blog && cd my-11ty-blog

# 克隆优化镜像仓库（国内访问加速）
git clone https://link.gitcode.com/i/1abc672fe58e7bc5901de3d3d646e990.git .

# 安装依赖（使用淘宝镜像加速）
npm install --registry=https://registry.npmmirror.com

# 启动开发服务器（自动打开浏览器）
npx @11ty/eleventy --serve

执行成功后，访问 http://localhost:8080 即可看到博客预览。开发服务器默认支持：

代码变更自动重载（livereload）
草稿模式（draft: true 标记的文章仅开发环境可见）
错误实时提示

项目架构深度解析

Eleventy Base Blog采用数据驱动的分层架构，核心目录结构如下：

eleventy-base-blog/
├── content/           # 所有内容文件（博客文章、页面等）
├── _includes/         # 模板组件（布局、复用片段）
├── _data/             # 全局数据文件
├── _config/           # 配置文件（过滤器、插件）
├── css/               # 样式文件
├── public/            # 静态资源（图片、字体等）
├── eleventy.config.js # 11ty核心配置
└── package.json       # 项目依赖

核心配置文件详解

1. eleventy.config.js（项目大脑）

这个文件定义了整个项目的构建规则，让我们重点关注几个关键配置：

// 核心配置示例（精简版）
export default async function(eleventyConfig) {
  // 静态资源复制规则
  eleventyConfig.addPassthroughCopy({
    "./public/": "/",              // 复制public目录到输出根目录
    "./content/feed/pretty-atom-feed.xsl": "/feed/"  // 特殊文件处理
  });

  // 开发服务器监控目标
  eleventyConfig.addWatchTarget("css/**/*.css");      // 监控CSS变化
  eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png}"); // 监控图片变化

  // 插件配置（关键功能实现）
  eleventyConfig.addPlugin(pluginSyntaxHighlight);    // 代码高亮
  eleventyConfig.addPlugin(pluginNavigation);         // 导航系统
  eleventyConfig.addPlugin(eleventyImageTransformPlugin, { // 图片优化
    formats: ["avif", "webp", "auto"],                // 自动生成现代图片格式
    htmlOptions: {
      imgAttributes: {
        loading: "lazy",                               // 懒加载
        decoding: "async"                              // 异步解码
      }
    }
  });
  
  return {
    dir: {
      input: "content",         // 内容文件根目录
      includes: "../_includes", // 模板文件目录
      output: "_site"           // 构建输出目录
    }
  };
}

2. _data/metadata.js（站点元数据）

全局站点信息集中管理，修改后所有页面自动更新：

export default {
  title: "我的技术博客",          // 网站标题
  url: "https://blog.example.com", // 网站URL
  language: "zh-CN",              // 语言设置（影响SEO）
  description: "专注于前端开发与性能优化的技术博客", // 网站描述
  author: {
    name: "技术开发者",           // 作者名
    email: "contact@example.com", // 联系邮箱
    url: "https://about.example.com" // 作者页面
  }
}

3. _config/filters.js（数据处理过滤器）

提供多种实用数据转换功能，在模板中通过|管道符使用：

// 日期格式化过滤器示例
eleventyConfig.addFilter("readableDate", (dateObj, format) => {
  return DateTime.fromJSDate(dateObj)
    .toFormat(format || "yyyy年MM月dd日"); // 默认中文日期格式
});

// 集合截取过滤器
eleventyConfig.addFilter("head", (array, n) => {
  return array.slice(0, n); // 用于获取最新的n篇文章
});

内容创作：Markdown与Nunjucks双剑合璧

Markdown文章基础格式

所有博客文章存放在 content/blog/ 目录下，采用标准Markdown格式，顶部通过Frontmatter定义元数据：

---
title: "11ty图片优化完全指南"  # 文章标题
date: 2025-09-09              # 发布日期
tags: ["Eleventy", "性能优化"] # 标签（支持多个）
description: "详解如何利用eleventy-img插件实现自动化图片处理" # 描述
image: ./hero-image.jpg        # 特色图片（相对路径）
draft: false                   # 是否为草稿（true时仅开发环境可见）
eleventyNavigation: {          # 导航配置（可选）
  key: "图片优化指南"
  order: 5
}
---

## 一级标题（H2）

正文内容支持标准Markdown语法...

### 代码块示例（带语法高亮）

```javascript
// 自动生成多种图片格式
const { html } = await Image(src, {
  widths: [300, 600, 900],
  formats: ["avif", "webp", "jpeg"]
});

注意：所有Markdown文件会被自动转换为HTML，并应用模板布局。


### Nunjucks模板高级用法

Nunjucks（.njk）是Eleventy推荐的模板语言，支持变量、循环、条件判断等高级功能。以首页模板（`content/index.njk`）为例：

```njk
---
layout: layouts/home.njk
title: 首页
eleventyNavigation:
  key: Home
  order: 1
---

<!-- 引入文章列表组件 -->
{% include "postslist.njk" %}

<!-- 自定义内容区域 -->
<div class="featured-section">
  <h2>推荐阅读</h2>
  <ul>
    <!-- 循环获取最新3篇带featured标签的文章 -->
    {%- for post in collections.posts | filterTagList(["featured"]) | head(3) -%}
      <li>
        <a href="{{ post.url }}">{{ post.data.title }}</a>
        <time datetime="{{ post.date | htmlDateString }}">
          {{ post.date | readableDate }}
        </time>
      </li>
    {%- endfor -%}
  </ul>
</div>

常用模板变量与函数

变量/函数	说明	示例
`collections.posts`	所有博客文章集合	`{% for post in collections.posts %}`
`post.url`	文章URL	`<a href="{{ post.url }}">`
`post.data.title`	文章标题	`{{ post.data.title }}`
`post.date`	发布日期	`{{ post.date \| readableDate }}`
`getBundleFileUrl("css")`	获取CSS捆绑文件URL	`<link href="{% getBundleFileUrl "css" %}">`
`eleventyNavigation`	导航配置	`order: 1`

高级功能实现指南

1. 自动化图片优化工作流

Eleventy Base Blog内置的图片处理系统可自动完成：

生成多分辨率图片（响应式加载）
转换为AVIF/WebP等现代格式
添加宽度/高度属性（避免布局偏移）
启用懒加载和异步解码

使用方法：在Markdown中直接引用图片文件：

![示例图片](./demo.png)

系统会自动处理为：

<picture>
  <source srcset="/img/demo-300.avif 300w, /img/demo-600.avif 600w" type="image/avif">
  <source srcset="/img/demo-300.webp 300w, /img/demo-600.webp 600w" type="image/webp">
  <img src="/img/demo-300.jpg" alt="示例图片" width="600" height="400" 
       loading="lazy" decoding="async">
</picture>

2. 智能代码高亮与语法显示

通过@11ty/eleventy-plugin-syntaxhighlight插件实现，支持100+种编程语言：

# Python代码示例
def fibonacci(n):
    if n <= 1:
        return n
    else:
        return(fibonacci(n-1) + fibonacci(n-2))
        
# 输出前10个斐波那契数
for i in range(10):
    print(fibonacci(i))

支持自定义主题，修改css/prism-diff.css文件即可更换代码高亮样式。

3. 标签系统与内容分类

系统自动为所有文章生成标签页面，无需额外配置。使用方法：

在文章Frontmatter中添加tags：

tags: ["JavaScript", "前端"]

在模板中遍历标签云：

{%- for tag in collections.all | getTags | sortAlphabetically -%}
  <a href="/tags/{{ tag | slugify }}/" 
     class="tag-badge">{{ tag }} ({{ collections[tag].length }})</a>
{%- endfor -%}

访问 /tags/ 查看所有标签， /tags/javascript/ 查看特定标签文章。

4. SEO优化全配置

Eleventy Base Blog默认包含完整的SEO优化机制：

元数据自动生成：在_data/metadata.js中配置全局SEO信息
结构化数据：base.njk模板中包含JSON-LD格式的文章数据
sitemap.xml：自动生成网站地图，路径为/sitemap.xml
robots.txt：通过public/robots.txt配置爬虫规则

增强配置示例（添加Open Graph支持）：

<!-- 在base.njk的<head>中添加 -->
<meta property="og:title" content="{{ title or metadata.title }}">
<meta property="og:type" content="{{ page.url === '/' ? 'website' : 'article' }}">
<meta property="og:url" content="{{ metadata.url }}{{ page.url }}">
{% if image %}
<meta property="og:image" content="{{ metadata.url }}{{ image }}">
{% endif %}
<meta property="og:description" content="{{ description or metadata.description }}">

部署与发布：双平台无缝上线

Netlify部署（推荐）

将代码推送到GitHub/GitLab仓库
在Netlify中导入项目，设置构建设置：
- 构建命令：npm run build
- 发布目录：_site

高级配置（可选）：

在项目根目录创建netlify.toml：

[build]
  command = "npm run build"
  publish = "_site"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/404.html"
  status = 404

Vercel部署

导入项目到Vercel
配置项目设置：
- 框架预设：Other
- 构建命令：npm run build
- 输出目录：_site
部署完成后，访问提供的URL即可查看网站。

高级定制与扩展

自定义过滤器开发

在_config/filters.js中添加自定义数据处理函数：

// 添加阅读时间估算过滤器
eleventyConfig.addFilter("readingTime", (content) => {
  const wordsPerMinute = 200;
  const wordCount = content.split(/\s+/).length;
  return Math.ceil(wordCount / wordsPerMinute);
});

在模板中使用：

阅读时间：{{ content | readingTime }} 分钟

添加评论系统（基于Giscus）

在_includes/layouts/post.njk中添加：

{% if not draft %}
<div class="comments-section">
  <h3>评论</h3>
  <script src="https://giscus.app/client.js"
          data-repo="你的GitHub用户名/仓库名"
          data-repo-id="你的仓库ID"
          data-category="Comments"
          data-category-id="分类ID"
          data-mapping="pathname"
          data-strict="0"
          data-reactions-enabled="1"
          data-emit-metadata="0"
          data-input-position="bottom"
          data-theme="light"
          data-lang="zh-CN"
          crossorigin="anonymous"
          async>
  </script>
</div>
{% endif %}

在public/css/index.css中添加评论区样式：

.comments-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e0e0;
}

常见问题与解决方案

1. 本地开发时图片不显示？

检查图片路径是否正确，推荐使用相对路径：

![正确](./images/photo.jpg)  <!-- 正确 -->
![错误](/images/photo.jpg)   <!-- 错误，开发环境路径问题 -->

2. 如何自定义文章URL结构？

修改eleventy.config.js中的permalinks配置：

eleventyConfig.addCollection("posts", function(collectionApi) {
  return collectionApi.getFilteredByGlob("content/blog/**/*.md")
    .map(post => {
      // 自定义URL格式：/年/月/日/标题/
      post.data.permalink = `/blog/${
        DateTime.fromJSDate(post.date).toFormat('yyyy/MM/dd')
      }/${post.fileSlug}/index.html`;
      return post;
    });
});

3. 构建速度慢如何优化？

排除不需要处理的大型文件：

// 在eleventy.config.js中
eleventyConfig.ignores.add("content/blog/archive/**/*.md");

使用增量构建：

npx @11ty/eleventy --incremental

总结与进阶路线

通过本文学习，你已掌握Eleventy Base Blog的核心开发能力。这个轻量级框架虽不及Next.js功能全面，但胜在专注、高效和零负担，特别适合技术博客、文档站点等内容驱动型项目。

进阶学习资源

官方文档：11ty.dev/docs
插件生态：awesome-eleventy
社区案例：Eleventy Showcase

下期预告

《Eleventy性能优化实战：从90分到100分的关键步骤》

深度代码分割与资源预加载策略
字体加载优化与FOUT消除
构建产物分析与体积控制
全球CDN分发与缓存策略

欢迎在评论区分享你的使用体验，关注本专栏获取更多Eleventy高级技巧！

本文示例代码已同步至示例仓库，可直接克隆体验。

【免费下载链接】eleventy-base-blog A starter repository for a blog web site using the Eleventy static site generator. 项目地址: https://gitcode.com/gh_mirrors/el/eleventy-base-blog

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考