danurbanowicz / eleventy-netlify-boilerplate

A template for building a blog with the Eleventy static site generator and Decap CMS

Eleventy Netlify Boilerplate

Click the button below to try it out!

What is it?

A simple template for building a fast, pre-generated HTML website using the Eleventy static site generator. With Decap CMS (formerly 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).

Demo Site

Features

• Uses Eleventy v2.0.1
• Sample pages and a blog with tag support
• Decap 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 your 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

Want to try it out now?

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 Decap CMS
• Process form data with Netlify Forms

Set Up Authentication

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?

Set Up Identity Email Templates

In order for Netlify Identity service emails (Signup, Reset Password etc) to function correctly with Decap 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!

Gotchas

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 Decap CMS, you can reach out to the Netlify team in the Decap CMS Gitter.

Local development

1. Clone this repository:

git clone https://github.com/danurbanowicz/eleventy-netlify-boilerplate.git my-blog-name

2. Navigate to the directory

cd my-blog-name

Specifically have a look at .eleventy.js to see if you want to configure any Eleventy options differently.

3. Install dependencies locally

npm install @11ty/eleventy

4. Edit _data/metadata.json

This file contains your site title and author details, and can be used to store any other commonly used site data.

5. Run Eleventy (builds the site)

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

Bug reports, feature requests, etc

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 Decap CMS, you can reach out to the Netlify team in the Decap CMS Gitter.

eleventy-netlify-boilerplate's Issues

v2 beta update

Hello and thanks for all the work here. With the v2 beta being out I am wondering if there are plans to update this starter or an appetite for contributions in that vein yet.

https://www.11ty.dev/blog/eleventy-v2-beta/

Trying to decide whether to start here or with Eleventy Base Blog v8.

https://www.11ty.dev/blog/bbv8/

Preview of a post in netlifycms broken

Without any change on my side since a few days/weeks ago there is the following error in Safari-Console:

Failed to load resource: Cross-origin redirection to https://unpkg.com/[email protected]/dist/htm.module.js?module denied by Cross-Origin Resource Sharing policy: Origin https://www.domainnamechangedforthisissue.de is not allowed by Access-Control-Allow-Origin. https://www.domainnamechangedforthisissue.de/.netlify/git/github/contents/.gitattributes?ts=1573207213206&ref=master

Is this a unpkg.com-related problem? I’m a bit lost and cannot find any pointers to this...

Use minifyCSS and minifyJS options in html-minifier instead?

I noticed that html-minifier includes both clean-css and UglifyJS, which can be turned on with an option.
Wouldn't doing all of this in a single pass improve build time?

Is the tag post really necessary?

I'm trying to wrap my head around this:
The tag "post" is specified in all posts/*.md files and also in the posts/posts.json file. As far as I understand this would allow to access collections.post, thought it would be unnecessary to specify the tag for all post md files. Anyway, I notice that a collection "posts" is added in the .eleventy.js config file which is then used to display the list of posts under blog.
I'm trying to understand all this because I'm having issues using collections.[tagname] when specifying that tagname only in the directory configuration file.
Any help and clarification on this would be much appreciated.
Thanks!

Markdown widget not wrapping output with HTML

Hi, I'm using your boilerplate for my project and is using many markdown widgets on a single collection.

In my config.yml, i have this as one of my fields:
- { label: "Description", name: "featureDescription", widget: "markdown" }
I have a multi-paragraph content which then saves to my file.md's frontmatter like this:

and using {{ projectInformation.projectDescription }} it gets displayed in my site like this:

Also saw this in the netlifycms doc:
Please note: The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.

Can you help me out? Thanks!

MarkdownItAnchor is not defined.

Can you please delete this issue.

Feature Requests

Is there something you wish Eleventy Netlify Boilerplate did that it doesn't, or do you have an idea to make it better?

If so, please add it here!

Small typo

Hi,

When I cloned the repro there was a small typo at:
eleventy-netlify-boilerplate/admin/config.yml

Line 27 should be:
create: false (without the single quotes)

Thanks for the starter project, it works great!

date time issues

I'm aware of the Eleventy pitfall with datetime. Did you find a way to get around it using Netlify CMS's datetime widget? I haven't resolved it and would love any pointers if you have them.

Thanks!

Auto-redirect doesn't work

On production (netlify) there is a problem with the redirect after the login in admin area.
I tried to insert this in homepage... it's works fine but just on local:
<script> if (window.netlifyIdentity) { window.netlifyIdentity.on("init", user => { if (!user) { window.netlifyIdentity.on("login", () => { document.location.href = "/admin/"; }); } }); } </script>

in production I still have to press the button: "Login with Netlify Identity"

support for images

hey Im trying to just add images to posts and the home page

i added the png to the /img folder and referencing them in the home.md and the firstpost.md with the following format

![](/img/CryptoArtDigestLogo.png)

is there anything else I need to do? they wont show up and im used to this working on another gatsbyJS site I use.

TemplatePassthroughManagerCopyError

`TemplatePassthroughManagerCopyError` was thrown
> EPERM: operation not permitted, open 'C:\Users\kyles\Desktop\moonface\_site\static\img\715580bf-9f2c-4e74-b0c5-7649f02ebfa1.webm'

Error: EPERM: operation not permitted, open 'C:\Users\kyles\Desktop\moonface\_site\static\img\715580bf-9f2c-4e74-b0c5-7649f02ebfa1.webm'

Here is my templateformats in .eleventy.js

return {
 templateFormats: ["md", "njk", "html", "liquid", "jpg", "png", "webm", "webp", "ico", "svg", "gif"],

 // If your site lives in a different subdirectory, change this.
 // Leading or trailing slashes are all normalized away, so don’t worry about it.
 // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
 // This is only used for URLs (it does not affect your file structure)
 pathPrefix: "/",

 markdownTemplateEngine: "liquid",
 htmlTemplateEngine: "njk",
 dataTemplateEngine: "njk",
 dir: {
   input: ".",
   includes: "_includes",
   data: "_data",
   output: "_site"
 }

Windows 10

error in building after changing the image at homepage (maybe template syntax error)

Describe the bug
After I change the homepage image, the site is not longer building

To Reproduce
Steps to reproduce the behavior:

1. change homepage image by uploading new image from the cms.
2. website no longer builds

Expected behavior
website should build and deploy with new uploaded image.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser edge
• Version 120.0.2210.91 (Official build) (64-bit)

Security Issue warnings

as soon as I forked this repo (as part of the Netlify setup) I got security warnings on Github. Not sure how to fix it...

Using TailwindCSS

Hey man, I've been looking into Tailwind x Eleventy projects all day and so far they have all been based off of skeleton templates of Eleventy. Do you have any idea how I could use Tailwind with this template: set up, required plugin etc.

Thanks for your help.

Making images work when posts have a year/month/title structure

Hi,

I am trying to use this boilerplate, but I have an issue with images. My structure is as follows:

/posts
  /2023
    /08
      /post-title
        index.md

To display posts in Netlify CMS, I have to add path in config.yml like this, otherwise, it shows "No entry":
path: "{{year}}/{{month}}/{{month}}/{{slug}}/index"

But then, if I upload an image, it places it in /posts/2023/08/post-title/ instead of /static/img. And in the Markdown editor, it generates ![](image.jpg) instead of ![](/static/img/image.jpg

If I remove path from config.yml, I can create a new post (but then it goes into /posts/new-post.md), and the image is correctly placed in /static/img/

Than you.

Can't get tags and author to work on another repo

Hello, I cannot add the tags or author feature to this repository. Could someone help me and do a pull request? I also have a question on regards the layout template, I have it configured a different way, can someone help me configure everything to match my repo: https://github.com/talmax1124/DrKhan

Default title for tag page

Hello @danurbanowicz

I was wondering if you could give me a hint on how to change the default title for the tag pages. I've tried to add different versions of "title" to the front of the tags.njk-file but non succeeded.

Cheers,
Peter

Moving rooted templates to directories.

I have moved authors.njk , author.njk and tags.njk to my layouts directory and it is causing strange behaviour, is there something I need to update in order to do this.

I have also added 404.md to my pages directory and this also is causing some strange things to happen.

I moved these files purely to clean things up a little bit so if there is absolutely no way to get around this then let me know and I'll just keep the files where they are.

CMS access for private forked repo

Describe the bug
Not able to use Netlify CMS when forked as private repo.

To Reproduce
Steps to reproduce the behavior:

1. Fork repo as Private and access <siteurl>/admin
2. Not able to login using Netlify auth

Expected behavior
Should be able to access /admin for private repo too

Desktop (please complete the following information):

• OS: Not OS specific, but tested in Ubuntu and Win10
• Browser: all browsers
• Version: 9 Dec 2020

Smartphone (please complete the following information):

• Device: Not specific
• OS: Not specific
• Browser: Chrome
• Version: 9 Dec 2020

Additional context
Posted same question in Netlify Community: https://community.netlify.com/t/allowing-git-gateway-for-single-private-repo/28933

'Invalid DateTime' in article

Describe the bug
Hi. I'm using the boilerplate to render a static version of a Wordpress site I'm wanting to mothball, but the outputted date seems to be different between the blog postslist page and an individual post.

On the postslist page, I think the boilerplate is using postlists.njk to output a post.date, whereas on an individual post/article, it uses post.njk and tries to use machineDate and readableDate (but outputs "Invalid DateTime").

date outputs a date on the individual post/article page, but not in the same format as the postslist page. I'm hoping to display the date in the same format on both types of page.

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://coderkind-eleventy.netlify.app/blog/
2. See dates are in a format similar to "06 Aug 2019"
3. Go to individual post page: https://coderkind-eleventy.netlify.app/2019/08/06/13-npm-tricks-for-faster-javascript-development/
4. Date displays as "Invalid DateTime"

Expected behavior
The date should be in a similar format on postslists and individual post pages

Additional context
Markdown format of posts: https://github.com/coderkind/coderkind-eleventy-netlify/blob/master/posts/2019/08/06/13-npm-tricks-for-faster-javascript-development/index.md

Multiple authors ?

Hi there;
thank you very much for your great boilerplate. I'm super new with 11ty+netlify CMS (coming from Jekyll+prose) and it looks amazing.

I see there's one author displayed on every post I create which is you. I understood it comes from metadata.json data file but how does it work if I have a multi-authors blog? Let's say there a few people with their own netlify identity who connect to the CMS and write their own post: is it possible to have their name in author then and if yes, how?

Thanks a lot

Add Sass support

Hello, im still new to javascript. Can you help me add a Sass preprocessor in here? We really need it in our process. The Sass folder layout in the root looks like this

Can it be added in the .eleventy.js file so it will still be watched on "eleventy --serve" ?

const { DateTime } = require("luxon");
const CleanCSS = require("clean-css");
const UglifyJS = require("uglify-es");
const htmlmin = require("html-minifier");

module.exports = function(eleventyConfig) {
  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");

  // Date formatting (human readable)
  eleventyConfig.addFilter("readableDate", dateObj => {
    return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy");
  });

  // Date formatting (machine readable)
  eleventyConfig.addFilter("machineDate", dateObj => {
    return DateTime.fromJSDate(dateObj).toFormat("yyyy-MM-dd");
  });

  // Minify CSS
  eleventyConfig.addFilter("cssmin", function(code) {
    return new CleanCSS({}).minify(code).styles;
  });

  // Minify JS
  eleventyConfig.addFilter("jsmin", function(code) {
    let minified = UglifyJS.minify(code);
    if (minified.error) {
      console.log("UglifyJS error: ", minified.error);
      return code;
    }
    return minified.code;
  });

  // Minify HTML output
  eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
    if (outputPath.indexOf(".html") > -1) {
      let minified = htmlmin.minify(content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true
      });
      return minified;
    }
    return content;
  });

  // only content in the `posts/` directory
  eleventyConfig.addCollection("posts", function(collection) {
    return collection.getAllSorted().filter(function(item) {
      return item.inputPath.match(/^\.\/posts\//) !== null;
    });
  });

  // Don't process folders with static assets e.g. images
  eleventyConfig.addPassthroughCopy("static/img");
  eleventyConfig.addPassthroughCopy("img");
  eleventyConfig.addPassthroughCopy("_redirects");
  eleventyConfig.addPassthroughCopy("sitemap.xml");
  eleventyConfig.addPassthroughCopy("robots.txt");
  eleventyConfig.addPassthroughCopy("admin");
  eleventyConfig.addPassthroughCopy("_includes/assets/");

  /* Markdown Plugins */
  let markdownIt = require("markdown-it");
  let options = {
    html: true,
    breaks: true,
    linkify: true
  };
  let opts = {
    permalink: true,
    permalinkClass: "direct-link",
    permalinkSymbol: "#"
  };

  return {
    templateFormats: ["md", "njk", "html"],

    // If your site lives in a different subdirectory, change this.
    // Leading or trailing slashes are all normalized away, so don’t worry about it.
    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
    // This is only used for URLs (it does not affect your file structure)
    pathPrefix: "/",

    markdownTemplateEngine: "liquid",
    htmlTemplateEngine: "njk",
    dataTemplateEngine: "njk",
    passthroughFileCopy: true,
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }
  };
};

Bulky netlify-identity-widget script include

netlify-identity-widget.js is adding 184kb (unminified) js to each page. Is it possible to restrict that to only necessary pages?
https://github.com/danurbanowicz/eleventy-netlify-boilerplate/blob/master/_includes/components/head.njk#L6

I like to keep the page weight low :)

Images and text are not fully responsive/cut off on mobile

Not sure if its a CSS issue or you'd need to use something like the Eleventy image responsiver plugin, but it would be nice for the text and images to be fully responsive and not cut off on mobile and browser resize.

Taken on my computer (not zoomed):

Taken on my phone (not zoomed):

Thank you!

Add a thanks page for the contact form to redirect to after submission

Netlify Forms supports showing a custom thanks page instead of the default Netlify thanks page.

I am just about to send a PR to add this to the repo.

Problem writing eleventy templates (more info in DEBUG output)

I keep getting this error in the terminal after build.

Here is the DEBUG output:

Error with passthrough copy: (more in DEBUG output)

Having trouble copying './static/img'

TemplatePassthroughManagerCopyError was thrown

EPERM: operation not permitted, open 'C:\Users\kyles\Desktop\moonface_site\static\img\715580bf-9f2c-4e74-b0c5-7649f02ebfa1.webm'

Error was thrown:

Unhandled rejection in promise ([object Promise]): (more in DEBUG output)

Having trouble copying

TemplateWriterWriteError was thrown

Having trouble copying './static/img'

TemplatePassthroughManagerCopyError was thrown

EPERM: operation not permitted, open 'C:\Users\kyles\Desktop\moonface_site\static\img\715580bf-9f2c-4e74-b0c5-7649f02ebfa1.webm'

Error was thrown:

    Error: EPERM: operation not permitted, open 'C:\Users\kyles\Desktop\moonface_site\static\img\715580bf-9f2c-4e74-b0c5-7649f02ebfa1.webm'

    Error: EPERM: operation not permitted, open 'C:\Users\kyles\Desktop\moonface_site\static\img\715580bf-9f2c-4e74-b0c5-7649f02ebfa1.webm'

Problem writing Eleventy templates: (more in DEBUG output)

Output conflict: multiple input files are writing to _site/authors/the-moonface-team/index.html. Use distinct permalink values to resolve this conflict.

  1. ./author.njk

  2. ./author.njk

DuplicatePermalinkOutputError was thrown:

    (Repeated output has been truncated...)

        at TemplateMap.checkForDuplicatePermalinks (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateMap.js:547:13)

        at TemplateMap.cache (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateMap.js:308:10)      

        at processTicksAndRejections (internal/process/task_queues.js:93:5)

        at async TemplateWriter._createTemplateMap (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateWriter.js:170:5)

        at async TemplateWriter.writeTemplates (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateWriter.js:203:5)

        at async TemplateWriter.write (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateWriter.js:254:25)

        at async Eleventy.write (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\Eleventy.js:743:13)      

        at async Eleventy._watch (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\Eleventy.js:488:5)      

        at async Timeout._onTimeout (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\Eleventy.js:678:11)  

Copied 19 files / Wrote 0 files in 1.78 seconds (v0.11.1)

Watching...

[Browsersync] Reloading Browsers...

File changed: posts\christmas-wishes-from-moonface.md

Problem writing Eleventy templates: (more in DEBUG output)

    (Repeated output has been truncated...)

        at TemplateMap.checkForDuplicatePermalinks (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateMap.js:547:13)

        at TemplateMap.cache (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateMap.js:308:10)      

        at runMicrotasks ()

        at processTicksAndRejections (internal/process/task_queues.js:93:5)

        at async TemplateWriter._createTemplateMap (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateWriter.js:170:5)

        at async TemplateWriter.writeTemplates (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateWriter.js:203:5)

        at async TemplateWriter.write (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\TemplateWriter.js:254:25)

        at async Eleventy.write (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\Eleventy.js:743:13)      

        at async Eleventy._watch (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\Eleventy.js:488:5)      

        at async Timeout._onTimeout (C:\Users\kyles\Desktop\moonface\node_modules@11ty\eleventy\src\Eleventy.js:678:11)  

Copied 34 files / Wrote 0 files in 0.98 seconds (v0.11.1)

Watching...

Error npm installing this on WSL bash on Win10

verbose stack Error: ENOENT: no such file or directory, rename '/c/Users/Osbor/Dropbox/www/ssg-11ty/eleventy-netlify-boilerplate/node_modules/lodash' -> '/c/Users/Osbor/Dropbox/www/ssg-11ty/eleventy-netlify-boilerplate/node_modules/.lodash.DELETE'

npm.log

node version is 10.16.3
Ubuntu version is 18.04 LTS

How can I activate drafts?

Hi there,
I'm trying to make it work. Our setting is that we're a few people just wanting to blog easily. But for that, we definetely need to be able to write drafts. From Netlify CMS I see there should be that kind of feature but it doesn't seem to show on my side. Is it coming from the way your boilerplate is structured? And if yes, would you know what's to change in order to activate that kind of features on Netlify CMS please?

Thanks a lot :)

How was the /about page generated?

The about page seems to be generated with nonsense phrases but is much more interesting than the standard "lorem ipsum" text. What was used to generate that (or was it all handwritten 😮 )?

"reset password" function is inavailable

"reset password" function is inavailable

markdownit options are created but not used

eleventy-netlify-boilerplate/.eleventy.js

Lines 59 to 65 in f3dabf6

	/* Markdown Plugins */
	let markdownIt = require("markdown-it");
	let options = {
	html: true,
	breaks: true,
	linkify: true
	};

I ended up getting a bit confused by the presence of this block given the removal of the call to
eleventyConfig.setLibrary("md", markdownIt(options)); (removed in 42084ba, perhaps as collateral when removing markdownit-anchor?)

I think it'd be clearer either to make the call to set the options, or remove the block containing the options. In my case this was confusing because at first pass I was expecting breaks to be enabled, but they weren't as the default config was being used, which has breaks: false

(If removing the config, I think the block below can go too)

Form submissions not working

Describe the bug
I deployed this project to Netlify, but the form submissions were not working for me. The "forms" tab in my Netlify dashboard also didn't show any active forms.

Solution
On the <form> tag, I replaced netlify with data-netlify="true" and that fixed the problem. The Netlify forms documentation still seems to support the netlify attribute alone, so I'm not sure why this was an issue. Either way, I'm just leaving a note here in case anyone else runs into the same issue.

Thanks for the boilerplate 👍

Notice: Temporary interaction limits

Due to a large number of spam pull requests on this repo (which may or may not be related to Hacktorberfest) I have temporarily disabled new issues and PRs to collaborators only. Thanks and apologies for any inconvenience.