Show HN: Blogs shouldn't be slow or bloated – I built a lightweight alternative

🚀 The fastest way to launch a modern, SEO-optimized blog with 11ty.
100/100 Lighthouse scores, built-in SEO audits, and ready-to-deploy in minutes.

🌐 Live Demo •

WebNami is an open source, SEO-focused blogging website generator built with 11ty (Eleventy). It is designed for anyone who wants to create a fast, modern, and highly customizable blog with minimal setup. WebNami is ideal for developers, writers, and teams who value performance, accessibility, and clean design.

• ⚡ Lightning Fast: Built with 11ty for optimal performance and instant page loads.
• 🔍 SEO Audit: On-page SEO errors are displayed in the console during build, so you can fix issues before deploying.
• 📊 Perfect Performance: Achieves 100/100 on Core Web Vitals for speed, accessibility, and best practices.
• 📡 RSS Feed: Automatic RSS feed generation for easy syndication.
• 🗺️ Sitemap: Auto-generated XML sitemap for better search engine indexing.
• 🤖 Robots.txt: SEO-friendly robots.txt included by default.
• 🚫 Custom 404 Page: Beautiful error page for a better user experience.
• 🔗 Canonical Links: Proper canonical URL management to avoid duplicate content.
• 📱 Meta Tags: Complete title, description, and Open Graph tags for social sharing.
• 💻 Syntax Highlighting: Built-in code syntax highlighting.
• 📋 Structured Data Markup: Rich snippets and structured data for enhanced SEO and search engine visibility.
• 🌙 Dark/Light Theme: Toggle between dark and light modes with automatic system preference detection.
• 🎨 Minimal Design: Clean, beautiful, and fully responsive design out of the box.

• SEO Audit in Terminal:

  
  _{SEO issues and warnings are displayed in the terminal during build.}

• Core Web Vitals (Lighthouse):

  
  _{WebNami achieves perfect scores on Core Web Vitals.}

• pages/: Only Markdown files for static pages (e.g., about, contact)
• posts/: Only Markdown files for blog posts
• images/: Store your image assets here
• custom.css: Use this file for all your custom styles
• _site/: This is the build output folder (generated automatically)

• Add static pages (like About, Contact) in pages/ as Markdown (.md) files only.
• Example: pages/about.md

• Create blog posts in posts/ using Markdown (.md) files only.
• Each post must start with frontmatter. See Frontmatter Reference for details.

• Customize your site's look by editing custom.css in the project root.
• Override colors for both light and dark themes (primary, background, content, accent, and footer colors)

Both pages and posts require frontmatter at the top of each Markdown file. Here are the required fields and their explanations:

• metadata.title: The page title (required)
• metadata.description: Short description for SEO and meta tags (recommended)
• metadata.img: Image for and meta tags (recommended)
• permalink: The URL path for the page (required)

• metadata.title: The post title (required)
• metadata.description: Short summary for SEO and meta tags (recommended)
• heading: Main heading for the post (displayed on the post page)
• img: Main image URL for the post (used in previews and social sharing)
• imgAlt: Alt text for the main image (accessibility and SEO)
• tags: List of tags for the post (optional, used for tag pages)
• category: Category name (optional, used for category pages)
• author: Author name (optional)
• date: Publish date in YYYY-MM-DD format (required)

The config.js file controls your site's settings. Here is an explanation of the main fields:

• site: Core site information
  • name: The name of your site
  • url: The base URL for your site
  • language: The language code for your site (e.g., "en")
  • csp: Content Security Policy (CSP) settings
    • enabled: Set to true to enable CSP headers for your site, or false to disable them.
    • policy: The CSP policy string. This defines the allowed sources for content on your site.
• branding: Visual identity settings
  • favicon: Path to your favicon
  • logo: Object with src (image path) and alt (alt text)
• listings: Settings for listing/archive pages
  • pagination.postsPerPage: Number of posts per page
  • postPreview.showAuthorInListing: Show author in post previews
  • postPreview.showDateInListing: Show date in post previews
  • postPreview.showCategoryInListing: Show category in post previews
  • postPreview.showExcerptInListing: Show excerpt in post previews
• pages: Page-specific settings
  • homepage: Settings for the homepage
    • showHeading: Show the main heading
    • centerHeading: Center the heading text
    • heading: Homepage heading text
    • subheading: Homepage subtitle
    • showCategoryNavigation: Show category navigation
    • metadata.title: Title for SEO/meta tags
    • metadata.description: Description for SEO/meta tags
    • metadata.image: Social sharing image URL
• navbar: Navigation bar links
  • links: Array of navigation links (each with name, href, and optional cta for call-to-action)
• footer: Footer configuration
  • socialLinks: Array of social media links (each with name and href)
  • linkGroups: Array of grouped footer links (each with title, displayGroupTitle, and links)

• Node.js v20 or higher
• npm v10 or higher (or use yarn/pnpm)

• Edit config.js to set your site name, URL, and other settings.
• Add your logo and favicon to the images/ directory.

Visit http://localhost:8080 to see your site.

Note: If you used Option 1 or 2 above, dependencies are automatically installed. Only Option 3 (manual clone) requires running npm install separately.

• Build for production:

  Generates the static site in the _site/ directory.

• Start development server:

  Runs a local server with hot reload.

• Other utility commands:

  • Add your own scripts in package.json as needed.

• Build fails: Make sure you have the correct Node.js and npm version.
• SEO warnings: Review console output during build for SEO issues.
• Images not showing: Confirm image paths in config.js, posts, and pages.

If you run into issues, check the GitHub Issues page.

• WebNami is optimized for speed and SEO.
• Achieves 100/100 on Core Web Vitals in Lighthouse.
• Minimal JavaScript and CSS for fast load times.

• Email: [email protected]
• Report Issues: GitHub Issues

WebNami — The modern, fast, and SEO-friendly way to blog.