Eleventy 开发服务器带实时刷新,Vite 以中间件方式接入
v60 — Eleventy 启动器模板
作者 riipandi
基于 Eleventy 与 Vite 的静态站点启动器,集成 Tailwind CSS、RSS 与站点地图,附带开发与构建脚本。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
生产构建由 Eleventy 生成后再经 Vite 处理
Tailwind CSS 支持,并集成 @egoist/tailwindcss-icons
使用 PostCSS 与 Autoprefixer 处理 CSS,browserslist 可在 package.json 调整
内置 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 许可证,允许使用、修改、商用与分发代码,分发时需保留版权与许可声明。演示图片、字体、图标等第三方素材需单独核对各自许可,域名、托管等外部服务也可能产生费用。
适合你的项目吗?
适用场景
- 需要一个 Eleventy 静态站点起步项目
- 希望在 Eleventy 中使用 Vite 处理构建与开发中间件
- 使用 Tailwind CSS 编写样式并需要自动添加浏览器前缀
- 需要为站点提供 RSS 与 XML 站点地图
适合人群
- 熟悉 pnpm 与 Eleventy 的前端开发者
- 准备部署到 Vercel、Netlify 或 Cloudflare Pages 的静态站点项目
- 需要 MIT 许可代码用于二次开发或商用的团队
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
使用 pnpm install 安装依赖
- 2
pnpm dev 启动 Eleventy 开发服务器
- 3
pnpm build 执行生产构建
- 4
部署到 Cloudflare Pages 时需设置 NODE_VERSION 环境变量
- 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 原文
https://github.com/riipandi/v60/blob/main/LICENSEhttps://github.com/riipandi/v60/blob/main/README.mdYou'll want to fork this repository and deploy your own Next.js website.
README 原文
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
[](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! 🚀
[](https://vercel.com/new/clone?repository-url=https://github.com/riipandi/v60&project-name=v60-eleventy&repo-name=v60-eleventy&env=ELEVENTY_PRODUCTION)
[](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>
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

eleventy-base-blog
A starter repository for a blog web site using the Eleventy static site generator.
Eleventy · 博客

eleventy-garden
:seedling: A starter site for building a mind garden with eleventy
Eleventy · 启动器

eleventastic
An Eleventy Starter Kit
Eleventy · 启动器

neat-starter
Starter Template for Netlify CMS, Eleventy, Alpine JS & Tailwind CSS
Eleventy · 启动器

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

eleventy-plus-vite
A clean and fast Eleventy Starter Project with Vite
Eleventy · 启动器
