HAP's Learning Lab: Starting from eleventy-base-blog

eleventy-base-blog/
├── _config/
│   └── filters.js          # Custom date formatting (readableDate, htmlDateString)
├── _data/
│   └── metadata.js         # Site title, author, URL — CHANGE THIS FIRST!
├── _includes/
│   ├── layouts/
│   │   ├── base.njk        # The HTML skeleton (header, nav, footer)
│   │   ├── post.njk        # Blog post wrapper (extends base)
│   │   └── home.njk        # Home page wrapper (extends base)
│   └── postslist.njk       # Reusable "list of posts" component
├── content/
│   ├── blog/               # Your blog posts go here!
│   │   ├── firstpost.md    # Sample posts to study then delete
│   │   └── blog.11tydata.js # Sets defaults for all posts in this folder
│   ├── index.njk           # Home page content
│   ├── blog.njk            # Archive page content
│   └── about.md            # About page — customize this!
├── css/
│   └── index.css           # All the styles (298 lines)
├── public/                 # Static files copied as-is
├── eleventy.config.js      # The brain — plugins, filters, settings
└── package.json            # Dependencies and npm scripts

export default {
    title: "Eleventy Base Blog v9",
    url: "https://example.com/",
    language: "en",
    description: "I am writing about my experiences as a naval navel-gazer.",
    author: {
        name: "Your Name Here",
        email: "youremailaddress@example.com",
        url: "https://example.com/about-me/"
    }
}

Change every value here to make the site yours! The title appears in the browser tab, the description shows in search results, and the author info appears in the RSS feed.

export default {
    tags: [
        "posts"
    ],
    "layout": "layouts/post.njk",
};

Because of this file, I don't need to add tags: posts or layout: layouts/post.njk to every single blog post. The directory data cascade handles it automatically! This is the data cascade in action from Station 3.

---
title: This is my first post.
description: This is a post on My Blog about agile frameworks.
date: 2018-05-01
tags: another tag
---
Leverage agile frameworks to provide a robust synopsis...

Notice how simple the front matter is! The layout and tags: posts come from the directory data file. I only add what's unique to this specific post.

import { IdAttributePlugin, InputPathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy";
import { feedPlugin } from "@11ty/eleventy-plugin-rss";
import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import pluginNavigation from "@11ty/eleventy-navigation";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

When I realized all this was already set up, I understood why Prof. Teeters insisted on starting from a template. I would have spent WEEKS figuring out image optimization alone. Instead, I get to focus on my content and design!

### Attribution

This Eleventy site was originally built from [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog) by Zach Leatherman ([@zachleat](https://github.com/zachleat)): "A starter repository showing how to build a blog with the Eleventy site generator (using the v3.0 release)."