EleventyVite启动器

v60 — Eleventy 启动器模板

作者 riipandi

基于 Eleventy 与 Vite 的静态站点启动器,集成 Tailwind CSS、RSS 与站点地图,附带开发与构建脚本。

看看你的网站会是什么样

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

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

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

01

Eleventy 开发服务器带实时刷新,Vite 以中间件方式接入

02

生产构建由 Eleventy 生成后再经 Vite 处理

03

Tailwind CSS 支持,并集成 @egoist/tailwindcss-icons

04

使用 PostCSS 与 Autoprefixer 处理 CSS,browserslist 可在 package.json 调整

05

内置 RSS 订阅源与 XML 站点地图

模板详细介绍

v60 是一个 Eleventy 启动器模板,把 Eleventy 的静态站点生成能力与 Vite 的构建流程结合起来。开发阶段,Vite 以中间件形式接入 Eleventy 开发服务器,提供实时刷新;生产构建时,Eleventy 的输出再由 Vite 做后续处理。样式方面使用 Tailwind CSS,并通过 PostCSS 与 Autoprefixer 添加浏览器前缀,browserslist 配置位于 package.json。模板还内置 RSS 订阅源和 XML 站点地图。

仓库提供 pnpm 的安装、开发与构建命令,并给出 Vercel、Netlify 和 Cloudflare Pages 的部署入口。Cloudflare Pages 部署需要在环境变量中设置 NODE_VERSION,预览分支可参考 PUBLIC_SITE_URL 与 ELEVENTY_PRODUCTION 的示例配置。README 中提到的 Lighthouse 分数属于作者自述,未在本资料中独立验证。

许可方面,该仓库采用 MIT 许可证,允许使用、修改、商用与分发代码,分发时需保留版权与许可声明。演示图片、字体、图标等第三方素材需单独核对各自许可,域名、托管等外部服务也可能产生费用。

EleventyVite启动器

适合你的项目吗?

适用场景

  • 需要一个 Eleventy 静态站点起步项目
  • 希望在 Eleventy 中使用 Vite 处理构建与开发中间件
  • 使用 Tailwind CSS 编写样式并需要自动添加浏览器前缀
  • 需要为站点提供 RSS 与 XML 站点地图

适合人群

  • 熟悉 pnpm 与 Eleventy 的前端开发者
  • 准备部署到 Vercel、Netlify 或 Cloudflare Pages 的静态站点项目
  • 需要 MIT 许可代码用于二次开发或商用的团队

上手与定制指南

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

  1. 1

    使用 pnpm install 安装依赖

  2. 2

    pnpm dev 启动 Eleventy 开发服务器

  3. 3

    pnpm build 执行生产构建

  4. 4

    部署到 Cloudflare Pages 时需设置 NODE_VERSION 环境变量

  5. 5

    README 中的部署按钮与示例环境变量可作为托管配置参考

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 部署到 Cloudflare Pages 时必须在环境变量中设置 NODE_VERSION,取值为 18.17.1 或 20.9.0,否则构建可能失败。
  • README 部署章节提到 Next.js,但本项目实际为 Eleventy 模板,该表述与项目技术栈不一致,部署时不应按 Next.js 配置。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

You need to add `NODE_VERSION` with value `18.17.1` or `20.9.0` on the environment variables setting.

README 原文

You'll want to fork this repository and deploy your own Next.js website.

README 原文
https://github.com/riipandi/v60/blob/main/LICENSEhttps://github.com/riipandi/v60/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2024-12-04
截图检查日期
2026-10-01

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: f094b65f138cdb04d8dcbd92d14be384cbbdb91bced50177a718eb631ba0025a

2026-10-01T15:14:17.584Z

来源文件 / 仓库
# v60 - Eleventy Vite Starter

[![Netlify Status](https://api.netlify.com/api/v1/badges/f2fd46fe-530a-4cc9-bd81-f197ff54b322/deploy-status)](https://app.netlify.com/sites/v60-demo/deploys)

A clean and fast Eleventy Starter Project with Vite.

## Features

- Eleventy v3.0 + live reload
- Vite v5 as Middleware in Eleventy Dev Server (uses [eleventy-plugin-vite](https://github.com/11ty/eleventy-plugin-vite/))
- Eleventy build output is post-processed by [Vite](https://vitejs.dev)
- CSS post-processing with PostCSS and [Autoprefixer](https://github.com/postcss/autoprefixer)
- [Tailwind CSS](https://tailwindcss.com) support + [@egoist/tailwindcss-icons](https://www.npmjs.com/package/@egoist/tailwindcss-icons)
- RSS feed 🧡
- XML sitemap
- Great Lighthouse score 💯💯💯💯

## Getting started

Start by [generating a new repository based on this project](https://github.com/riipandi/v60/generate).

After cloning (or downloading) the repository to your local machine, install all dependencies with the command

```sh
pnpm install
```

## Up and running

The project comes with Eleventy’s built-in development server. You can start the server with

```sh
pnpm dev
```

To trigger a production build, use

```sh
pnpm build
```

## Deploy your own

You'll want to fork this repository and deploy your own Next.js website. Once you have an
image generator that sparks joy, you can setup [automatic GitHub](https://vercel.com/github)
deployments so that pushing to master will deploy to production! 🚀

[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/riipandi/v60&project-name=v60-eleventy&repo-name=v60-eleventy&env=ELEVENTY_PRODUCTION)
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/riipandi/v60)

#### Cloudflare Deployment

You need to add `NODE_VERSION` with value `18.17.1` or `20.9.0` on the environment variables setting.
Visit [Cloudflare pages docs](https://developers.cloudflare.com/pages/platform/build-configuration/)
for more information.

Example environment variables for the preview branch:

```env
PUBLIC_SITE_URL=${CF_PAGES_URL}
ELEVENTY_PRODUCTION=true
```

## CSS

[Autoprefixer](https://github.com/postcss/autoprefixer) adds necessary browser prefixes. The [browserslist](https://github.com/browserslist/browserslist) settings can be adjusted in `package.json`.

## Feedback

Please provide feedback! 🤗 Ideally by [filing an issue here](https://github.com/riipandi/v60/issues) – or via a pull request.

## Thank you!

This starter project would not have been possible without the many great sites and projects I was able to learn from, use as inspiration, and shamelessly copy code from:

- Matthias Ott [matthiasott/eleventy-plus-vite](https://github.com/matthiasott/eleventy-plus-vite)
- Zach Leatherman [zachleat.com](https://github.com/zachleat/zachleat.com)
- Max Böck’s [Eleventastic](https://github.com/maxboeck/eleventastic)
- Stephanie Eckles’s [11ty Netlify Jumpstart](https://github.com/5t3ph/11ty-netlify-jumpstart)
- Miriam Suzanne [miriamsuzanne.com](https://www.miriamsuzanne.com)
- W3T [web3templates.com](https://web3templates.com/)

## License

This project is open-sourced software licensed under the [MIT license](./LICENSE).

Copyrights in this project are retained by their contributors.
See the [license file](./LICENSE) for more information.

---

<sub>🤫 Psst! If you like my work you can support me via [GitHub sponsors](https://github.com/sponsors/riipandi).</sub>
反馈内容错误

看看同类模板

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