Growing up in the 1990s was a magical time for the early web—a gloriously pixelated experience filled with vibrant (yet limited) 256-color palettes. As a teenager, I spent hours crafting blink tags and experimenting with HTML on my trusty Aptiva at home and the school’s fancy Macs. Fast-forward a few decades, and my vintage-computer-adjacent band, The Stop Bits, needed a website to promote our upcoming shows.
Naturally, I wanted the site to evoke the nostalgic charm of the ’90s web but with modern conveniences like feed readers and Markdown-based editing (no more AOL Press!). In this article, I’ll walk you through how I built a retro-inspired yet functional website using 11ty, my favorite static site generator.
What Is a Static Site Generator?
Before diving into the details, let’s clarify what a static site generator (SSG) does. Unlike dynamic websites (e.g., WordPress, Drupal, or Wix), which generate pages on-the-fly using databases and server-side processing, static sites consist of pre-rendered HTML, CSS, and JavaScript files.
Why Choose a Static Site?
- Speed: No database queries or server-side rendering delays.
- Simplicity: Easier to host and maintain.
- Security: Fewer vulnerabilities compared to dynamic CMS platforms.
- Control: No reliance on third-party services or bloated frameworks.
11ty (or Eleventy) is a flexible, JavaScript-based SSG that converts Markdown files and templates into a fully functional static website. Unlike some SSGs, 11ty doesn’t force you into a specific workflow—you can use your preferred templating engine (Nunjucks, Liquid, Handlebars, etc.) and structure your project however you like.
Building a ’90s-Themed Website with 11ty
Step 1: Setting Up 11ty
I started with the 11ty base starter template, which includes:
- A basic blog structure.
- Nunjucks templating (similar to Django/Flask).
- Automatic Atom feed generation.
Installation:
npm init -y
npm install @11ty/eleventy --save-dev
Step 3: Structuring Content
11ty processes Markdown files stored in the content folder. Each post includes front matter (metadata) like this:
### Step 3: Structuring Content
11ty processes Markdown files stored in the `content` folder. Each post includes **front matter** (metadata) like this: Step 2: Stripping Down for Retro Authenticity
Since I wanted a true ’90s aesthetic, I made a few key adjustments:
Removed JavaScript: No client-side scripts—just pure HTML.
Ditched Modern CSS: Instead, I used inline styles and <font> tags (a cardinal sin in modern web dev, but period-appropriate!).
Simplified Layout: No responsive design—just a single-column, fixed-width layout.
markdown
title: “Upcoming Show at VCF Southeast!”
date: 2025-06-15
description: “We’re playing live in Atlanta—don’t miss it!”
The Stop Bits are hitting the stage on June 21, 2025 at VCF Southeast!
### Step 4: Local Development
11ty’s built-in server auto-reloads changes: bash
npx @11ty/eleventy –serve
“`
This watches for file updates and rebuilds the site instantly.
Step 5: Deployment
Since static sites are just files, you can host them almost anywhere:
- Apache/Nginx: Traditional web servers.
- GitHub Pages: Free hosting for open-source projects.
- Netlify/Vercel: Automated deployments from Git.
I opted for Apache for that classic self-hosted feel.
Why 11ty Beats WordPress (for This Use Case)
- No Databases: Faster, more secure, and easier to back up.
- No Plugins: No bloat or security risks.
- Markdown Workflow: Write in simple text files instead of a clunky editor.
- Full Control: No corporate overlords or forced updates.
FAQ
Q: Can I use 11ty for a non-blog site?
A: Absolutely! 11ty works for portfolios, documentation, and even e-commerce (with a bit of extra setup).
Q: How do I add a contact form without JavaScript?
A: Use a third-party service like Formspree or a serverless function (e.g., Netlify Forms).
Q: Is this site accessible on old computers?
A: Yes! It loads perfectly on my Power Mac 9600 from 1997.
Final Thoughts
The modern web is drowning in complexity—tracking scripts, bloated frameworks, and endless dependencies. By embracing static sites and tools like 11ty, we can reclaim simplicity, performance, and ownership of our little corner of the internet.
Whether you’re nostalgic for the ’90s web or just tired of today’s over-engineered mess, try building a static site. It’s liberating.
Disclaimer:
The opinions expressed here are my own. 11ty is an open-source project, and I’m not affiliated with its development team.
#KeepTheWebWeird #StaticSitesRock #OldSchoolCool #DIYWeb
