Tutorials

For folks just starting out, here are some introductions to Eleventy:

Build an 11ty Site in 3 Minutes (2021) ⏱ 3m

Let’s Learn Eleventy! on Learn with Jason (2020) ⏱ 1h32m

Templating: Eleventy’s Superpower (2021) ⏱ 15m

Learn Eleventy from Scratch (2020)

Beginner’s Guide to Eleventy (2020)

Itsiest, Bitsiest Eleventy Tutorial (2021)

Making a simple web site with the simplest static site generator (2018)

And for folks wanting to start building a blog:

Official Starter: eleventy-base-blog

6 Minutes to Build a Blog from Scratch with Eleventy (2023) ⏱ 6m

Build your own Blog from Scratch using Eleventy (2018)

Turn static HTML/CSS into a blog with CMS using the JAMStack (2021) ⏱ 1h23m

And a few conversion walkthroughs:

Turn Jekyll up to Eleventy (2018)

Making the Jump from Jekyll to JavaScript (2020)

And a grab bag of content:

A Site for Front-End Development Conferences (Built with 11ty on Netlify) (2019)

Eleventy Guide: A Framework-Agnostic Static Site Generator (2020)

Video Series: Create an 11ty Theme from a free set of HTML templates (2019)

Eleventy Walk Through (2020)

Creating a Blog with Eleventy (2019)

How I Create an Article Series in Eleventy (2021)

Detailed Guide to build an 11ty / eleventy & Tailwind CSS static site (2022)

Put it on the web Jump to heading #

• Put your new site on the web! Read more about Deployment

Adding Features Jump to heading #

• Create Your Own Search without a Third Party Service by Phil Hawksworth
• Lightweight lazy loading with Netlify Large Media by Phil Hawksworth
• Multilingual sites with Eleventy (i18n, Internationalization) by Jérôme Coupé
• Language switcher for multilingual Jamstack sites (i18n, Internationalization) by Jérôme Coupé
• Adding Algolia Search to Eleventy and Netlify by Raymond Camden. (Also see part two)
• Eleventy and Cloudinary images (Setting up responsive images in Eleventy using Cloudinary) by Sia Karamalegos
• Supporting Multiple Authors in an Eleventy Blog by Raymond Camden. (Also see part two)
• Accessing Eleventy Data on the Client Side by Raymond Camden
• Adding an Email Subscription to Your Jamstack Site by Raymond Camden
• Dynamic Short URLs with Eleventy by Raymond Camden

Using Third Party Data Jump to heading #

• Sample Project: Import your Notist events to an Eleventy site by Phil Hawksworth
• Sample Project: Import your Medium posts to an Eleventy site by Phil Hawksworth
• Import your Disqus Comments into Eleventy by Zach Leatherman
• Static Indieweb pt1: Syndicating Content by Max Böck
• Static Indieweb pt2: Using Webmentions by Max Böck
• An In-Depth Tutorial of Webmentions + Eleventy by Sia Karamalegos
• Using Eleventy to Generate a Ghost Blog by David Darnes
• Consuming a headless CMS GraphQL API with Eleventy by Jérôme Coupé
• Import Tweets from Twitter API by Dennis Hagemeier
• Convert a WordPress blog to Eleventy by Josh Cunningham
• Integrating Contentful with Eleventy to create static sites by Shy Ruparel
• Creating an 11ty Photo Gallery with Contentful and GitHub actions by Shy Ruparel
• Adding Google Calendar to your JAMStack by Raymond Camden
• Integrating Google Analytics with Eleventy by Raymond Camden
• Hooking Up FaunaDB to Eleventy by Raymond Camden
• Building a Database Driven Eleventy Site by Raymond Camden
• Integrating Eleventy with GitHub Flat Data by Raymond Camden

Other pages in Getting Started:

• 在命令行下使用
• Tutorials
  • 小技巧
• Starter Projects
• 部署网站
• 调试模式
• 编程式 API