Adding a Blog to a Static TailwindCSS Site with Eleventy

Published on 18 April 2025

Adding a Blog to a Simple Static Site

When I first created the SillyStarfish website, it was a bare-bones static HTML page that used TailwindCSS for styling. While that approach was perfect for a simple landing page, I wanted to share more content by adding a blog. This post details how I enhanced my basic static site with blogging capabilities using Eleventy (11ty), all while maintaining the simplicity and performance of the original design.

The Original Setup

My original site was a simple structure:

index.html
favicon.png
SillyStarfish.png
css/
  styles.css

The entire site was contained in a single HTML file that loaded TailwindCSS from a CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SillyStarfish</title>
    <link rel="icon" href="favicon.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Custom TailwindCSS theme configurations -->
</head>
<body class="min-h-screen bg-amber-50 text-amber-900">
    <div class="flex-grow flex flex-col items-center justify-center p-4 md:p-8">
        <main role="main" class="w-full flex justify-center">
            <img class="w-4/5 md:w-3/5 lg:max-w-2xl xl:max-w-3xl h-auto"
                 src="SillyStarfish.png"
                 alt="Silly Starfish - A Self Portrait">
        </main>
    </div>
    <footer class="w-full py-3 text-center mt-12">
        <div class="text-xs text-amber-600">
            <span>&copy; SillyStarfish.com - 2025</span>
        </div>
    </footer>
</body>
</html>

Why I Chose Eleventy

As I wanted to add blog content and more dynamic features to my site, I needed a solution that would:

Maintain simplicity: Keep the straightforward development experience
Support content management: Allow for easy blog post creation using Markdown
Enable templating: Reuse layouts and components across pages
Stay fast: Produce static HTML that loads quickly

Eleventy (11ty) was the perfect choice because:

It's a simple static site generator with minimal complexity
It has no client-side JavaScript requirements
It offers flexible templating options
It works great with existing technologies like TailwindCSS

The Migration Process

1. Setting up Eleventy

First, I installed Eleventy as a dev dependency:

npm init -y
npm install --save-dev @11ty/eleventy

Then I created an eleventy.config.js file to configure the build process:

module.exports = function(eleventyConfig) {
  // Copy static assets to the output directory
  eleventyConfig.addPassthroughCopy("src/favicon.png");
  eleventyConfig.addPassthroughCopy("src/SillyStarfish.png");

  // Add a date formatting filter for blog posts
  eleventyConfig.addFilter("readableDate", dateObj => {
    return new Date(dateObj).toLocaleDateString('en-US', 
      { year: 'numeric', month: 'long', day: 'numeric' });
  });

  // Set up blog post collection
  eleventyConfig.addCollection("posts", function(collectionApi) {
    return collectionApi.getFilteredByGlob("src/blog/*.md").sort(function(a, b) {
      return b.date - a.date; // Sort by date, newest first
    });
  });

  return {
    passthroughFileCopy: true,
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data",
      output: "_site"
    },
    htmlTemplateEngine: "njk",
    markdownTemplateEngine: "njk"
  };
};

2. Creating a Proper Directory Structure

I organized my project with the following structure:

src/
  _includes/
    layouts/
      base.njk     # Base template with common elements
      post.njk     # Template for blog posts
  _data/           # For global data files
  blog/            # Blog posts as Markdown files
  index.html       # Homepage
  favicon.png
  SillyStarfish.png

3. Creating Reusable Templates

The base layout (base.njk) contains the common HTML structure shared by all pages:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding a Blog to a Static TailwindCSS Site with Eleventy</title>
    <link rel="icon" href="/favicon.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    
    <!-- TailwindCSS theme customization -->
    <script>
      tailwind.config = { 
        theme: { 
          extend: { 
            typography: {
              DEFAULT: {
                css: {
                  '--tw-prose-body': '#713f12',
                  '--tw-prose-headings': '#b45309',
                  /* ...other typography customizations... */
                }
              }
            }
          } 
        } 
      }
    </script>
</head>
<body class="min-h-screen bg-amber-50 text-amber-900">
    
</body>
</html>

And a specialized post layout (post.njk) for blog content:

---
layout: layouts/base.njk
---

<div class="flex-grow flex flex-col items-center p-4 md:p-8">
    <main role="main" class="w-full max-w-3xl mx-auto prose lg:prose-xl"> 
        <h1 class="text-3xl font-bold text-amber-600 mb-2">Adding a Blog to a Static TailwindCSS Site with Eleventy</h1>
        
            <p class="text-sm text-amber-500 mt-0 mb-6">
                Published on <time datetime="&quot;2025-04-18T00:00:00.000Z&quot;">18 April 2025</time>
            </p>
        

        

        <p class="mt-8">
            <a href="/" class="text-amber-600 hover:underline">&larr; Back to Home</a>
        </p>
    </main>
</div>

<footer><!-- Footer content --></footer>

4. Enhancing the Home Page

I updated the home page to include a blog section that displays recent posts:

---
layout: layouts/base.njk
title: SillyStarfish
---

<!-- Main starfish image section -->
<div class="flex-grow flex flex-col items-center justify-center p-4 md:p-8">
    <main role="main" class="w-full flex justify-center">
        <img class="w-4/5 md:w-3/5 lg:max-w-2xl xl:max-w-3xl h-auto"
             src="SillyStarfish.png"
             alt="Silly Starfish - A Self Portrait">
    </main>
</div>

<!-- Blog posts section with scroll reveal animation -->
<section id="blog-section" class="w-full max-w-4xl mx-auto px-4 py-12 opacity-0 transform translate-y-5 transition-all duration-1000 ease-out">
    <h2 class="text-3xl font-bold text-center mb-8 text-amber-500">Latest Posts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><article class="bg-amber-50 p-6 rounded-lg shadow-md border border-amber-200 hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-xl font-semibold mb-2 text-amber-700">
                    <a href="/blog/eleventy-migration/" class="hover:underline">Adding a Blog to a Static TailwindCSS Site with Eleventy</a>
                </h3>
                
                    <p class="text-sm text-amber-600 mb-3">
                        <time datetime="&quot;2025-04-18T00:00:00.000Z&quot;">18 April 2025</time>
                    </p>
                
            </article></div>
</section>

<!-- JavaScript for scroll animations -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const blogSection = document.getElementById('blog-section');
    const revealThreshold = 300;
    
    function checkScroll() {
      if (window.scrollY > revealThreshold) {
        blogSection.classList.add('opacity-100', 'translate-y-0');
        blogSection.classList.remove('opacity-0', 'translate-y-5');
      }
    }
    
    window.addEventListener('scroll', checkScroll, { passive: true });
    checkScroll();
    
    // Dynamic copyright year
    const yearElement = document.getElementById('copyright-year');
    if (yearElement) {
      yearElement.textContent = new Date().getFullYear();
    }
  });
</script>

Key Benefits of the New Architecture

1. Content Management

Writing blog posts is now as simple as creating Markdown files in the src/blog/ directory. The front matter at the top of each file provides metadata like title, date, and tags:

---
title: "Adding a Blog to a Static TailwindCSS Site with Eleventy"
date: 2025-04-18
tags: ["eleventy", "tailwindcss", "blog"]
layout: layouts/post.njk
---

## Adding a Blog to a Simple Static Site

Content goes here...

2. Improved Developer Experience

DRY Code: Templates eliminate the need to repeat HTML structure
Simple Build Process: Running npm run build generates the entire static site
Live Reload: Using npm start provides a dev server with instant updates

3. Enhanced Site Features

Blog with Collections: Easily organize and display blog posts
Responsive Design: Maintained TailwindCSS for responsive layouts
Performance: Still generates pure HTML/CSS with minimal JavaScript

Future Improvements

Now that the site architecture is more flexible, I'm planning to:

Add tag pages for filtering blog posts by topic
Implement pagination for when the number of posts grows
Add an RSS feed for subscribers
Create a custom image optimization pipeline

Conclusion

Migrating from a simple static HTML site to Eleventy has been a straightforward process that now allows the SillyStarfish site to grow organically. The combination of Eleventy's simplicity with TailwindCSS's utility-first approach creates an ideal development environment—maintaining the performance benefits of static HTML while adding the conveniences of a modern static site generator.

If you're considering a similar migration for your project, I highly recommend Eleventy for its flexibility and ease of use!

← Back to Home