A simple template for building a fast, pre-generated HTML website using the Eleventy static site generator. With Netlify CMS baked-in, ready to deploy to Netlify in a couple of clicks.
Use it as a starter for your own JAMstack projects, or as an easy way to get started building websites with Eleventy.
Based on the Eleventy Base Blog repo (see there for additional info on Eleventy usage).
- NEW: Now using Eleventy v2.0 (requires Node 14 or above!)
- Sample pages and a blog with tag support
- Netlify CMS with editor previews (thanks @biilmann!)
- Scores 100/100/100/100 in Lighthouse performance tests 🔥
- Maintenance-free post author archives
- Automatic navigation menus with Eleventy Navigation
- Includes a working contact form
- CSS 2kb minified, inlined for fastest page render
- Optional pipeline for minified inline JS
- Pre-builds and minifies your HTML too
- Uses Markdown files for content
- Uses Nunjucks (or Liquid) templates for layout
- 100% Javascript framework free
- Continuous Deployment workflow via Netlify
Clicking the button above will deploy a copy of the demo website to your Netlify account (you can create an account during this process if you don't have one) and everything needed for running the CMS:
- A new repository in your GitHub account with the code
- Full Continuous Deployment to Netlify's global CDN network
- Control users and access with Netlify Identity
- Manage content with Netlify CMS
- Process form data with Netlify Forms
After deploying this project, Netlify Identity will add you as a CMS user and will email you an invite. It is not necessary to accept this invite if you wish to use an OAuth provider (e.g. Github) to manage authentication for your CMS.
It is recommended to use this method of authentication as it removes the need for an email & password to log in to the CMS and is generally more secure. You will need to add an OAuth provider in your Netlify app settings under "Settings" > "Identity" > "External providers".
Once you've added an OAuth provider, navigate to /admin on your site, select your provider from the
list, and you should then be logged into your CMS. Cool huh?
In order for Netlify Identity service emails (Signup, Reset Password etc) to function correctly with Netlify CMS, you will need to tell Netlify where your email templates are located.
Inside this repo under /admin/email-templates/ are four Netlify Identity email templates. Inside your Netlify site settings, you will need to navigate to: "Site Settings > Identity" and look there for the four email template configuration boxes: Invitation template, Confirmation template, Recovery template, and Email change template. Inside each, edit the "Path to template" field to match the root-relative path to each template. For example:
/admin/email-templates/invitation.html
Now you're all set; you can invite new CMS users and begin editing content!
If you change the repo that was created at deploy time from public to private, you'll need to regenerate your token, as the token generated using the deploy to Netlify button can only access public repositories. To regenerate your token, head to "Settings" in your Netlify site dashboard, go to the "Identity" section, then scroll to "Services" where you'll see an "Edit settings" button. Click that and you'll see a text link to "Generate access token in GitHub".
If you need any help with setting up Netlify CMS, you can reach out to the Netlify team in the Netlify CMS Gitter.
git clone https://github.com/danurbanowicz/eleventy-netlify-boilerplate.git my-blog-name
cd my-blog-name
Specifically have a look at .eleventy.js to see if you want to configure any Eleventy options differently.
npm install @11ty/eleventy
This file contains your site title and author details, and can be used to store any other commonly used site data.
npx @11ty/eleventy
Or build automatically when a template changes:
npx @11ty/eleventy --watch
Or build and host locally for local development:
npx @11ty/eleventy --serve
Or in debug mode:
DEBUG=* npx @11ty/eleventy
This is an ongoing project and I welcome contributions and suggestions! Feel free to submit a PR.
If you need any help with setting up Netlify CMS, you can reach out to the Netlify team in the Netlify CMS Gitter.