Eleventy Blog Starter

A starter repository showing how to build a blog with the Eleventy and Tailwind CSS.

View demo: https://eleventy-blog-starter-demo.netlify.app/

Deploying to Netlify

If you click “Deploy to Netlify” button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify.

Getting Started

1. Clone this Repository

git clone https://github.com/netlify-templates/eleventy-blog-starter.git

2. Install dependencies

npm install

3. Run Eleventy locally

npm run dev

4. Generate a production-ready build

npm run build

Or you can run debug mode to see all the internals.

Project Structure

• content/blog/ has the blog posts but really they can live in any directory. They need only the posts tag to be included in the blog posts collection.
• Use the eleventyNavigation key (via the Eleventy Navigation plugin) in your front matter to add a template to the top level site navigation. This is in use on content/index.njk and content/about/index.md.
• Content can be in any template format (blog posts needn’t exclusively be markdown, for example). Configure your project’s supported templates in eleventy.config.js -> templateFormats.
• The public folder in your input directory will be copied to the output folder (via addPassthroughCopy in the eleventy.config.js file). This means ./public/* will live at ./_site/* after your build completes.
• This project uses three Eleventy Layouts:
  • _includes/layouts/base.njk: the top level HTML structure
  • _includes/layouts/home.njk: the home page template (wrapped into base.njk)
  • _includes/layouts/post.njk: the blog post template (wrapped into base.njk)
• _includes/postslist.njk is a Nunjucks include and is a reusable component used to display a list of all the posts. content/index.njk has an example of how to use it.