This is an incomplete project, contributions welcome while work is completed to implement the netlify/webmention support.
An IndieWeb-ready blog template powered by Eleventy and designed to deploy to Netlify.
Minimalistic, semantic, and easy to customize.
- ✅ IndieWeb Compatible - microformats2, h-card, webmentions
- ✅ Micropub Ready - Post from any Micropub client
- ✅ Syndication - POSSE to Bluesky and the Fediverse via Bridgy
- ✅ Webmentions - Receive and display likes, reposts, and replies
- ✅ Dark Mode - Automatic theme switching
- ✅ Responsive Design - Mobile-first, accessible layout
- ✅ RSS Feed - Standard feed.xml
- ✅ Easy Theming - CSS custom properties for quick customization
Click the button above to deploy your own copy. You'll be prompted to configure all necessary environment variables during the setup process.
# Use this template or clone the repository
git clone https://github.com/miklb/steal-this-repo.git my-blog
cd my-blog
# Install dependencies
npm install
# Start development server
npm startVisit http://localhost:8080
Edit _data/site.js:
export default {
title: "Your Blog Title",
tagline: "A short description",
url: "https://yourdomain.com",
author: {
name: "Your Name",
bio: "A short bio about yourself",
photo: "/assets/img/avatar.jpg",
location: "City, Country",
},
social: {
twitter: "yourusername",
github: "yourusername",
instagram: "yourusername",
mastodon: "https://mastodon.social/@yourusername",
bluesky: "yourdomain.com",
facebook: "https://facebook.com/yourusername",
linkedin: "https://linkedin.com/in/yourusername",
tumblr: "https://yourusername.tumblr.com",
flickr: "yourusername",
foursquare: "yourusername",
},
// Note: All social fields are optional. Only populate the ones you want to display.
// Empty values will not appear in your h-card.
};The entire color scheme is generated from a single brand color. Edit public/assets/css/variables.css:
:root {
--brand-hue: 220; /* 0-360: Change to any color */
--brand-saturation: 60%; /* Color intensity */
--brand-lightness: 50%; /* Brightness */
}Quick Color Reference:
- Red: 0 | Orange: 30 | Yellow: 60 | Green: 120
- Cyan: 180 | Blue: 220 | Purple: 270 | Pink: 330
To add a social platform not listed above:
-
Add to configuration - Edit
_data/site.js:social: { // ... existing platforms yourplatform: process.env.YOURPLATFORM_URL || "", }
-
Add environment variable prompt - Edit
netlify.toml:[template.environment] # ... existing variables YOURPLATFORM_URL = "Your platform profile URL (optional)"
-
Update h-card template - Edit
_includes/h-card.njk:{% if site.social.yourplatform %} <li> <a href="{{ site.social.yourplatform }}" rel="me" title="YourPlatform"> <i class="fa-brands fa-yourplatform"></i> <span>YourPlatform</span> </a> </li> {% endif %}
-
Find icons at Font Awesome - use brand icons for social platforms
Set these in your Netlify dashboard under Site settings → Environment variables:
| Variable | Required | Description |
|---|---|---|
ME |
Yes | Your site URL (e.g., https://yourdomain.com) |
AUTHOR_NAME |
Yes | Your name |
AUTHOR_EMAIL |
Yes | Your email address |
AUTHOR_LOCATION |
Optional | Your location |
TWITTER_USERNAME |
Optional | Twitter username (without @) |
GITHUB_USERNAME |
Optional | GitHub username |
INSTAGRAM_USERNAME |
Optional | Instagram username |
MASTODON_URL |
Optional | Full Mastodon profile URL |
BLUESKY_HANDLE |
Optional | Bluesky handle (your-domain.com) |
FACEBOOK_URL |
Optional | Full Facebook profile URL |
LINKEDIN_URL |
Optional | Full LinkedIn profile URL |
TUMBLR_URL |
Optional | Full Tumblr blog URL |
FLICKR_USERNAME |
Optional | Flickr username |
FOURSQUARE_USERNAME |
Optional | Foursquare username |
GITHUB_TOKEN |
For Micropub | GitHub Personal Access Token with repo scope |
GITHUB_USER |
For Micropub | Your GitHub username (for Micropub) |
GITHUB_REPO |
For Micropub | Repository name |
TOKEN_ENDPOINT |
For Micropub | https://tokens.indieauth.com/token |
WEBMENTION_IO_TOKEN |
For Webmentions | Token from webmention.io |
To enable automatic syndication URL capture:
- Go to Netlify Dashboard → Site settings → Build & deploy → Deploy notifications
- Click Add notification → Outgoing webhook
- Event to listen for: Deploy succeeded
- URL to notify:
https://your-site.netlify.app/post-deploy
This webhook triggers the post-deploy function that sends webmentions to Bridgy and commits syndication URLs back to your posts.
Use any Micropub client to post:
- Web: Quill
- Mobile: Indigenous (iOS/Android)
- Desktop: iA Writer (macOS/iOS)
Create a markdown file in content/notes/ or content/articles/:
---
title: My First Post
date: 2026-01-08
tags:
- hello
- indieweb
---
Your content here. Supports **markdown** formatting.steal-this-repo/
├── _includes/ # Nunjucks templates
│ ├── layouts/ # Page layouts
│ ├── h-card.njk # Author bio card
│ └── webmentions.njk # Webmention display
├── _data/ # Global data files
│ └── site.js # Site configuration
├── content/ # Your content
│ ├── articles/ # Long-form posts
│ ├── notes/ # Short posts
│ └── img/ # Images
├── public/assets/ # Static assets
│ └── css/ # Stylesheets
└── eleventy.config.js # Eleventy configuration
- Go to webmention.io
- Sign in with your domain
- Add the token to your Netlify environment variables
- Visit brid.gy
- Connect your Bluesky and/or Mastodon accounts
- Enable automatic syndication
Test your site at indiewebify.me
# Development server with live reload
npm start
# Production build
npm run build
# Build CSS
npm run build:css
# Watch CSS changes
npm run watch:css- Static Site Generator: Eleventy 3.x
- Template Engine: Nunjucks
- CSS: Native CSS with PostCSS
- Hosting: Netlify
- Micropub: @benjifs/micropub
- Webmentions: netlify-plugin-webmentions (forked for better error handling)
- Post-Deploy Syndication: netlify-post-deploy-syndication
- Icons: @11ty/font-awesome
MIT
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.