Eleventy启动器

freshjuice-11ty-starter — Eleventy 启动器模板

作者 freshjuice-dev

基于 Eleventy 的静态网站启动器，集成 TailwindCSS、Alpine.js、Pagefind 搜索与 CloudCannon CMS，内置无障碍测试、SEO 与 LLM 输出文件。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

Eleventy 静态站点生成，配合 TailwindCSS 与 Alpine.js

02

内置 Pagefind 静态搜索，构建后自动索引页面

03

提供 CloudCannon CMS 配置与 hero、features、cta、testimonials、content 等页面区块

04

包含 WCAG 2.1 AA 无障碍自动化测试脚本

05

构建时生成 sitemap、RSS、robots.txt、llms.txt 与 llms-full.txt

06

附带 Netlify、Vercel、Cloudflare Pages 部署配置文件

模板详细介绍

FreshJuice 11ty Starter（又称 Snappy Lemon）是一个用于构建静态网站的 Eleventy 启动主题，仓库采用 MIT 许可。它把 Eleventy 模板、TailwindCSS 样式、Alpine.js 交互脚本、Pagefind 静态搜索、Shiki 代码高亮、eleventy-img 图片优化和 Phosphor 图标等组合在一起，并附带 CloudCannon CMS 的可视化编辑配置与页面区块。

项目提供博客、作者、页面、法律页、落地页和错误页等布局，以及按钮、卡片、徽章、作者卡片等 Nunjucks 宏组件。构建时会生成 sitemap.xml、robots.txt、RSS feed、llms.txt 与 llms-full.txt 等文件，并包含 Netlify、Vercel、Cloudflare Pages 的部署配置。

使用前需注意：本地开发要求 Node.js 24 或更高版本；lint、格式化、无障碍测试、favicon 生成等脚本依赖额外安装的本地开发包，这些包不会安装在构建服务器上。演示图片来自 Pexels，字体、图标等第三方素材需按各自许可单独核对，代码的 MIT 许可不覆盖这些素材。

Eleventy启动器

适合你的项目吗？

适用场景

  • 搭建以博客和内容页面为主的静态网站
  • 需要可视化编辑后台的营销或落地页项目
  • 希望直接使用 TailwindCSS 与 Nunjucks 组件宏的 Eleventy 项目
  • 需要为搜索引擎和 AI 助手同时输出站点索引的网站

适合人群

  • 熟悉 Eleventy 与 Nunjucks 模板的前端开发者
  • 需要静态站点搜索与无障碍测试的团队
  • 计划使用 CloudCannon 进行内容编辑的项目
  • 准备部署到 Netlify、Vercel 或 Cloudflare Pages 的站点

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    需要 Node.js 24 或更高版本以及 npm。

  2. 2

    克隆仓库后运行 npm install，再执行 npm run dev 启动开发服务器（默认 http://localhost:8080）。

  3. 3

    lint、格式化、无障碍测试和 favicon 生成等功能需先运行 npm run setup:local 安装本地开发依赖。

  4. 4

    无障碍测试需先执行 npm run build 构建站点，再运行 npm run test。

  5. 5

    演示图片、字体和图标等第三方素材需按各自许可核对，不能仅依据代码的 MIT 许可判断。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 本地开发与构建需要 Node.js 24 或更高版本，低于该版本无法按文档运行。
  • lint、格式化、无障碍测试与 favicon 生成等功能需先运行 npm run setup:local 额外安装本地开发依赖，默认安装不包含这些包。
  • 上述本地开发依赖不会安装在 Netlify、Vercel、Cloudflare 等构建服务器上，因此这些平台上无法直接执行 lint、测试或 favicon 生成脚本。
  • 使用可视化编辑与页面区块功能需要将仓库连接到 CloudCannon 这一第三方托管 CMS 服务，属于外部服务依赖。
  • 演示图片来自 Pexels，另有 Logoipsum 占位标志等第三方素材，需按各自许可单独核对，代码的 MIT 许可不覆盖这些素材。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Node.js 24 or higher (see `.nvmrc`)

README 原文

Some features (linting, testing, favicon generation) require additional packages. Install them once for local development:

README 原文

These packages are not installed on build servers (Netlify, Vercel, Cloudflare) to keep builds fast.

README 原文

Connect your repository to CloudCannon

README 原文

Demo images are royalty-free from [Pexels](https://www.pexels.com/):

README 原文
https://github.com/freshjuice-dev/freshjuice-11ty-starter/blob/main/LICENSEhttps://github.com/freshjuice-dev/freshjuice-11ty-starter/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 83 / 100
技术栈
Eleventy
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-03
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Eleventy。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 7e911eb79f91a3f8fa052819eb37bbb0a74cdf015ae53141c5c1062e2ba80cd9

2026-10-01T15:21:20.088Z

来源文件 / 仓库
# FreshJuice 11ty Starter a.k.a. Snappy Lemon

<img src="src/assets/images/og-placeholder.png" alt="FreshJuice 11ty Starter" width="450">

**[Live Demo](https://snappy-lemon-starter.freshjuice.dev)**

A modern, fast, and accessible starter theme for building static websites with [Eleventy](https://www.11ty.dev/), [TailwindCSS](https://tailwindcss.com/), and [CloudCannon CMS](https://cloudcannon.com/).

## Features

- **Eleventy v3** - Fast static site generation with ES modules
- **TailwindCSS v4** - Utility-first CSS framework
- **Alpine.js** - Lightweight JavaScript for interactivity
- **Pagefind** - Static search with zero configuration
- **Shiki** - Beautiful syntax highlighting for code blocks
- **eleventy-img** - Automatic image optimization (AVIF, WebP, JPEG)
- **Phosphor Icons** - 6,000+ icons with multiple weights
- **CloudCannon CMS** - Visual editing and page builder blocks
- **Speculation Rules** - Instant page loads with prefetching
- **Accessibility** - WCAG 2.1 AA compliant with automated testing
- **SEO Ready** - Sitemap, RSS feed, meta tags, Open Graph
- **LLM Ready** - llms.txt and llms-full.txt for AI assistants

## Quick Start

### Prerequisites

- Node.js 24 or higher (see `.nvmrc`)
- npm

### Installation

```bash
# Clone the repository
git clone https://github.com/AbolDev/freshjuice-11ty-starter.git
cd freshjuice-11ty-starter

# Install dependencies
npm install

# Start development server
npm run dev
```

Open http://localhost:8080 to view your site.

### Available Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server with hot reload |
| `npm run build` | Build for production |
| `npm run clean` | Remove `_site` and `.cache` folders |
| `npm run lint` | Run ESLint (run `setup:local` first) |
| `npm run format` | Format code with Prettier (run `setup:local` first) |
| `npm run test` | Run accessibility tests (run `setup:local` first) |
| `npm run favicon` | Generate favicons from logo (run `setup:local` first) |

## Local Development Tools

Some features (linting, testing, favicon generation) require additional packages. Install them once for local development:

```bash
npm run setup:local
```

This installs:

| Package | Purpose | Script |
|---------|---------|--------|
| `eslint` | JavaScript linting | `npm run lint` |
| `prettier` | Code formatting | `npm run format` |
| `favicons` | Generate all favicon sizes | `npm run favicon` |
| `puppeteer` | Browser automation for tests | `npm run test` |
| `@axe-core/puppeteer` | Accessibility testing engine | `npm run test` |
| `serve-handler` | Local server for tests | `npm run test` |
| `rimraf` | Cross-platform rm -rf | `npm run clean` |

> **Note:** These packages are not installed on build servers (Netlify, Vercel, Cloudflare) to keep builds fast.

## Project Structure

```
freshjuice-11ty-starter/
├── src/
│   ├── _data/                 # Global data files
│   │   ├── build.js           # Build info (git hash, timestamp)
│   │   ├── meta.yaml          # Site metadata
│   │   ├── navigation.yaml    # Navigation menus
│   │   └── footer.yaml        # Footer configuration
│   ├── _includes/
│   │   ├── layouts/           # Page layouts
│   │   │   ├── base.njk       # Base HTML layout
│   │   │   ├── post.njk       # Blog post layout
│   │   │   ├── author.njk     # Author page layout
│   │   │   ├── legal.njk      # Legal pages (privacy, terms)
│   │   │   ├── landing.njk    # Landing page with blocks
│   │   │   └── error.njk      # Error pages (404, 500)
│   │   ├── partials/          # Reusable partials
│   │   │   ├── header.njk
│   │   │   ├── footer.njk
│   │   │   └── metatags.njk
│   │   ├── _components/       # Nunjucks component macros
│   │   │   └── index.njk
│   │   └── _blocks/           # CloudCannon page blocks
│   │       ├── hero.njk
│   │       ├── features.njk
│   │       ├── cta.njk
│   │       ├── testimonials.njk
│   │       ├── content.njk
│   │       └── _schemas/      # Block schemas for CMS
│   ├── assets/
│   │   ├── css/
│   │   │   ├── main.css       # Entry point
│   │   │   ├── _base.css      # CSS variables, reset
│   │   │   ├── _typography.css # Prose styles
│   │   │   ├── _buttons.css   # Button components
│   │   │   ├── _forms.css     # Form elements
│   │   │   ├── _utilities.css # Custom utilities
│   │   │   ├── _pagefind.css  # Search UI styles
│   │   │   └── _youtube.css   # YouTube embed styles
│   │   ├── js/
│   │   │   └── main.js        # Alpine.js + custom scripts
│   │   ├── images/
│   │   └── fonts/
│   ├── authors/               # Author profiles (Markdown)
│   ├── blog/                  # Blog posts (Markdown)
│   ├── pages/                 # Site pages
│   ├── static/                # Static files (copied as-is)
│   ├── robots.txt.njk
│   ├── sitemap.xml.njk
│   ├── sitemap.xsl.njk        # Visual sitemap stylesheet
│   ├── feed.xml.njk           # RSS feed
│   ├── llms.txt.njk           # LLM site index
│   └── llms-full.txt.njk      # Full content for LLMs
├── config/                    # Eleventy configuration
│   ├── collections.js
│   ├── filters.js
│   ├── shortcodes.js
│   ├── transforms.js
│   └── plugins.js
├── scripts/
│   └── generate-favicons.mjs  # Favicon generator
├── tests/
│   └── a11y.test.mjs          # Accessibility tests
├── .cloudcannon/
│   └── schemas/               # CloudCannon schemas
├── eleventy.config.js
├── netlify.toml               # Netlify configuration
├── vercel.json                # Vercel configuration
├── wrangler.toml              # Cloudflare Pages configuration
└── cloudcannon.config.yaml    # CloudCannon configuration
```

## Components

Import and use Nunjucks macros in your templates:

```nunjucks
{% from "_components/index.njk" import button, card, badge, authorCard %}

{# Buttons #}
{{ button({ text: "Get Started", url: "/contact/", variant: "primary" }) }}
{{ button({ text: "Learn More", variant: "secondary" }) }}
{{ button({ text: "Cancel", variant: "outline" }) }}
{{ button({ text: "Menu", variant: "ghost" }) }}

{# Cards #}
{{ card({
  title: "Post Title",
  description: "Description text",
  image: "/assets/images/photo.jpg",
  url: "/blog/post/",
  date: page.date,
  author: "john-doe"
}) }}

{# Badges #}
{{ badge({ text: "New", variant: "primary" }) }}
{{ badge({ text: "Featured", variant: "secondary" }) }}
```

### Button Variants

| Class | Description |
|-------|-------------|
| `.btn` | Primary orange button |
| `.btn--secondary` | Light background |
| `.btn--outline` | Transparent with border |
| `.btn--ghost` | No background or border |
| `.btn--white` | White (for dark backgrounds) |
| `.btn--danger` | Black/dark variant |

Sizes: `.btn--xs`, `.btn--sm`, `.btn--md`, `.btn--lg`, `.btn--full`

## Shortcodes

### YouTube Embeds

```nunjucks
{% youTube "dQw4w9WgXcQ", "Video Title" %}
{% youTube "https://youtube.com/watch?v=dQw4w9WgXcQ", "Video Title" %}
```

Uses lite-youtube-embed for fast, privacy-friendly embeds.

### Phosphor Icons

```nunjucks
{% phosphor "house", "bold", { size: 24 } %}
{% phosphor "arrow-right", "regular", { size: 16 } %}
{% phosphor "github-logo", "fill", { size: 32 } %}
```

Weights: `thin`, `light`, `regular`, `bold`, `fill`, `duotone`

Browse icons at [phosphoricons.com](https://phosphoricons.com/)

## Page Blocks

Build landing pages with CloudCannon blocks:

```yaml
---
layout: layouts/landing.njk
blocks:
  - _id: hero
    heading: "Welcome"
    subheading: "Build something amazing"
    buttons:
      - text: "Get Started"
        url: "/contact/"
        variant: "primary"
  - _id: features
    section_title: "Features"
    columns: 3
    features:
      - icon: "rocket"
        title: "Fast"
        description: "Lightning fast builds"
---
```

### Available Blocks

- **hero** - Hero section with heading, subheading, background image, CTA buttons
- **features** - Feature grid with icons (2, 3, or 4 columns)
- **cta** - Call-to-action section
- **testimonials** - Customer testimonials (grid or slider)
- **content** - Rich text content block

## Configuration

### Site Metadata

Edit `src/_data/meta.yaml`:

```yaml
site_name: "Your Site Name"
site_description: "Your site description for SEO"
site_url: "https://yoursite.com"
default_image: "/assets/images/og-default.jpg"
locale: "en"
theme_color: "#ea580c"
social:
  twitter: "https://twitter.com/yourhandle"
  github: "https://github.com/yourorg"
```

### Navigation

Edit `src/_data/navigation.yaml`:

```yaml
main:
  - label: "Home"
    url: "/"
  - label: "About"
    url: "/about/"
  - label: "Blog"
    url: "/blog/"
  - label: "Contact"
    url: "/contact/"
```

### Footer

Edit `src/_data/footer.yaml` to configure footer columns, links, and copyright text.

## Favicon Generation

1. Place your logo as `src/assets/images/logo-icon.svg` (or `.png`)
2. Install the optional dependency: `npm install favicons`
3. Run: `npm run favicon`

This generates all favicon sizes to `src/static/`.

## Accessibility Testing

Run automated WCAG 2.1 AA tests on your built site:

```bash
# Install optional dependencies
npm install puppeteer @axe-core/puppeteer serve-handler

# Build the site first
npm run build

# Run tests
npm run test
```

Report is saved to `_reports/a11y-report.md`.

## Search

Pagefind provides instant static search. It runs automatically after build (`npm run build`) and indexes all pages.

The search UI is at `/search/` and can be triggered from the header.

## CloudCannon Setup

1. Connect your repository to CloudCannon
2. CloudCannon will automatically detect `cloudcannon.config.yaml`
3. Start editing content visually

The configuration includes:
- Collections (pages, blog, authors)
- Data files (meta, navigation, footer)
- Page blocks and structures
- Input types and editors

## Deployment

### Netlify

[![Deploy to Netlify](https://img.shields.io/badge/Deploy%20to-Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)](https://app.netlify.com/start/deploy?repository=https://github.com/AbolDev/freshjuice-11ty-starter)

Configuration is in `netlify.toml`.

### Vercel

[![Deploy to Vercel](https://img.shields.io/badge/Deploy%20to-Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com/new/clone?repository-url=https://github.com/AbolDev/freshjuice-11ty-starter)

Configuration is in `vercel.json`.

### Cloudflare Pages

[![Deploy to Cloudflare Pages](https://img.shields.io/badge/Deploy%20to-Cloudflare%20Pages-F38020?style=for-the-badge&logo=cloudflare&logoColor=white)](https://dash.cloudflare.com/?to=/:account/pages/new/provider/github)

Configuration is in `wrangler.toml`.

### CloudCannon

[![Deploy to CloudCannon](https://img.shields.io/badge/Deploy%20to-CloudCannon-407AFC?style=for-the-badge&logo=cloudcannon&logoColor=white)](https://app.cloudcannon.com/register#sites/connect/github/AbolDev/freshjuice-11ty-starter)

Configuration is in `cloudcannon.config.yaml`.

All platforms use Node 24 and run `npm run build`.

## Generated Files

The starter automatically generates:

| File | Description |
|------|-------------|
| `/sitemap.xml` | XML sitemap for search engines |
| `/sitemap.xsl` | Visual sitemap stylesheet |
| `/robots.txt` | Robots directives |
| `/feed.xml` | RSS feed for blog posts |
| `/llms.txt` | LLM-friendly site index |
| `/llms-full.txt` | Full content export for LLMs |
| `/_headers` | Security headers (Netlify) |
| `/_redirects` | Redirect rules (Netlify) |

## Front Matter Options

```yaml
---
title: "Page Title"
description: "Page description for SEO"
image: "/assets/images/og-image.jpg"
noindex: true              # Exclude from sitemap
llms_exclude: true         # Exclude from llms.txt
eleventyExcludeFromCollections: true  # Hide from collections
---
```

## Image Credits

Demo images are royalty-free from [Pexels](https://www.pexels.com/):

| Image | Photographer | Link |
|-------|--------------|------|
| Author: Jane Smith | Daniel Xavier | [View](https://www.pexels.com/photo/portrait-photo-of-woman-718978/) |
| Author: John Doe | Andrea Piacquadio | [View](https://www.pexels.com/photo/photo-of-a-man-listening-music-on-his-phone-846741/) |
| Banana | Juan Salamanca | [View](https://www.pexels.com/photo/riped-banana-61127/) |
| Strawberries | Susanne Jutzeler | [View](https://www.pexels.com/photo/bowl-of-strawberry-fruits-2820144/) |
| Orange | Pixabay | [View](https://www.pexels.com/photo/orange-fruite-51958/) |
| Raspberries | Pixabay | [View](https://www.pexels.com/photo/red-raspberry-52536/) |
| Pineapples | Pineapple Supply Co. | [View](https://www.pexels.com/photo/two-pineapple-fruit-on-sad-near-body-of-water-27269/) |
| Cherries | Wendy Aros-Routman | [View](https://www.pexels.com/photo/red-cherries-on-stainless-steel-bowl-1178610/) |
| Covadonga Basilica | Sonny Vermeer | [View](https://www.pexels.com/photo/basilica-de-santa-maria-la-real-de-covadonga-asturias-spain-17111917/) |
| Covadonga Mountains | Sonny Vermeer | [View](https://www.pexels.com/photo/the-beautiful-green-mountains-in-covadonga-austerias-spain-17118596/) |
| Placeholder | Steve Johnson | [View](https://www.pexels.com/photo/low-angle-view-of-lighting-equipment-on-shelf-257904/) |
| Placeholder Avatar | cottonbro studio | [View](https://www.pexels.com/photo/halloween-decorated-room-5435182/) |

Placeholder logos from [Logoipsum](https://logoipsum.com/).

## Contributing

Contributions are welcome! Please open an issue first to discuss what you'd like to change.

## License

MIT License - use this starter for any project.

## Credits

Built by [Alex Zappa](https://alex.zappa.dev) at [FreshJuice](https://freshjuice.dev)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

eleventy-base-blog

eleventy-base-blog

A starter repository for a blog web site using the Eleventy static site generator.

Eleventy · 博客

eleventy-garden

eleventy-garden

:seedling: A starter site for building a mind garden with eleventy

Eleventy · 启动器

eleventastic

eleventastic

An Eleventy Starter Kit

Eleventy · 启动器

neat-starter

neat-starter

Starter Template for Netlify CMS, Eleventy, Alpine JS & Tailwind CSS

Eleventy · 启动器

Eleventy-Starter-Boilerplate

Eleventy-Starter-Boilerplate

🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, …

Eleventy · 博客

eleventy-plus-vite

eleventy-plus-vite

A clean and fast Eleventy Starter Project with Vite

Eleventy · 启动器