Digital Garden Starter Kit

Project Overview

Digital Garden Starter Kit is a complete, batteries-included template for launching your own digital garden in minutes. Built on Hugo with the Vitis theme, it includes everything you need to start cultivating knowledge immediately.

What’s Included

🌱 Content Templates

Pre-built archetypes for common content types:

hugo new posts/my-article.md       # Blog post
hugo new notes/quick-thought.md    # Quick note  
hugo new projects/my-project.md    # Project page
hugo new series/tutorial-1.md      # Series content

Each template includes:

• Frontmatter with all available options
• Example content structure
• Markdown tips and tricks
• Wiki-link examples

📊 Sample Content

35+ example pages demonstrating:

• Blog posts - Various writing styles and structures
• Technical tutorials - Code examples and explanations
• Project showcases - Portfolio pieces
• Quick notes - Fleeting thoughts and ideas
• Evergreen content - Continuously updated pages

All interlinked to show how a mature graph looks!

🛠 Development Tools

Pre-configured Scripts

{
  "scripts": {
    "dev": "hugo server -D --disableFastRender",
    "build": "hugo --minify",
    "deploy": "npm run build && netlify deploy",
    "new:post": "hugo new posts/$(date +%Y-%m-%d)-post.md",
    "analyze": "node tools/analyze-links.js"
  }
}

Link Analysis Tool

Analyze your content connections:

npm run analyze

Output:
📊 Graph Statistics
   Total pages: 45
   Total links: 127
   Broken links: 3
   Average links per page: 2.8
   Most connected: "Digital Garden Basics" (15 links)
   
⚠️  Broken Links Found:
   [[Future Post]] referenced in 2 pages
   [[Todo Article]] referenced in 1 page

Content Quality Checker

Validates your content:

node tools/quality-check.js

Checks:
✅ Frontmatter completeness
✅ Image optimization  
✅ Reading time accuracy
✅ Tag consistency
✅ Link validity
⚠️  SEO metadata

🎨 Pre-built Components

Shortcodes for rich content:

Callout Boxes

Example syntax for callout boxes:

{{ < callout type="info" > }}
Important information for readers
{{ < /callout > }}

Renders as styled info/warning/success boxes.

Image Galleries

Example syntax for image galleries:

{{ < gallery > }}
  {{ < img src="image1.jpg" alt="Description" > }}
  {{ < img src="image2.jpg" alt="Description" > }}
{{ < /gallery > }}

Responsive image grids with lightbox.

Roadmap Visualization

Example roadmap syntax:

- [x] Learn HTML basics
- [~] Learn CSS  
- [ ] Learn JavaScript

Visual progress indicators with checkboxes.

Graph Embed

Embed filtered graph views in any page with custom filters.

⚙️ Configuration Presets

Multiple config files for different use cases:

config/
  _default/          # Base configuration
  development/       # Dev server settings  
  production/        # Optimized for deploy
  examples/
    personal-blog/   # Blog-focused setup
    documentation/   # Docs site setup
    portfolio/       # Project showcase

Just copy the preset you want!

🚀 Deployment Configs

One-click deploy configs included:

• Netlify - netlify.toml
• Vercel - vercel.json
• GitHub Pages - .github/workflows/deploy.yml
• GitLab Pages - .gitlab-ci.yml
• Cloudflare Pages - Configuration guide

📚 Comprehensive Documentation

Detailed guides for:

1. Quick Start - Get running in 5 minutes
2. Configuration - Customize every aspect
3. Content Creation - Best practices
4. Wiki-Links Guide - Master interconnections
5. Graph Configuration - Customize visualization
6. Deployment - Go live with confidence
7. Troubleshooting - Common issues solved

Design Philosophy

1. Opinionated but Flexible

Includes sensible defaults while remaining fully customizable:

✅ Works great out of the box
✅ Customize anything you want  
✅ Progressive complexity

2. Learning by Example

Every feature demonstrated with real content:

Don't just tell users about wiki-links...
Show them 50+ examples in context!

3. Modern Best Practices

Built with current web standards:

• ⚡ Performance optimized
• 📱 Mobile-first responsive
• ♿ Accessibility compliant (WCAG AA)
• 🔒 Security headers configured
• 🎯 SEO ready

Technical Features

Performance

Out-of-the-box optimizations:

• Hugo minification - HTML, CSS, JS compressed
• Image processing - Automatic resizing and WebP conversion
• Lazy loading - Images load on scroll
• Critical CSS - Above-fold styles inlined
• Font optimization - Variable fonts with fallbacks

Lighthouse scores: 95+ across all metrics!

SEO

Pre-configured for discoverability:

<!-- Open Graph tags -->
<meta property="og:title" content="...">
<meta property="og:image" content="...">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">

<!-- Structured Data -->
<script type="application/ld+json">
{
  "@type": "BlogPosting",
  "headline": "...",
  "author": "..."
}
</script>

Analytics

Privacy-respecting analytics ready:

• Plausible - Lightweight, GDPR compliant
• Simple Analytics - Minimalist tracking
• GoatCounter - Open source alternative

Just add your ID to config!

Search

Full-text search included:

• Instant search - Results as you type
• Fuzzy matching - Finds close matches
• Keyboard navigation - Ctrl/Cmd+K
• No backend required - Runs client-side

Use Cases

Personal Knowledge Base

Perfect for:

• Zettelkasten method
• Personal wiki
• Learning notes
• Research organization

Technical Blog

Great for:

• Programming tutorials
• Code snippets
• [[API documentation]]
• Technical deep-dives

Project Portfolio

Showcase:

• Development projects
• Design work
• Case studies
• Client work

Team Documentation

Use for:

• Internal knowledge base
• Onboarding guides
• Runbooks
• Process documentation

Getting Started

1. Create Your Garden

# Clone the starter kit
git clone https://github.com/yourusername/digital-garden-starter my-garden

cd my-garden

# Install dependencies
npm install

# Start developing
npm run dev

Your site is now running at http://localhost:1313

2. Customize Configuration

Edit hugo.toml:

baseURL = "https://yourdomain.com"
title = "My Digital Garden"

[params]
author = "Your Name"
description = "My personal knowledge garden"

3. Create Your First Post

npm run new:post

# Opens: content/posts/2024-02-27-post.md

Start writing! Use [[Wiki Links]] to connect ideas.

4. Deploy

# Build for production
npm run build

# Deploy to Netlify (one-time setup)
netlify init
npm run deploy

Your garden is live! 🌱

Community & Support

Resources

• Documentation: Full docs site
• Discord: Join our community server
• Forum: GitHub Discussions

Contributing

We welcome:

• 🐛 Bug reports and fixes
• ✨ New feature suggestions
• 📝 Documentation improvements
• 🎨 Theme contributions
• 🌍 Translations

See CONTRIBUTING.md for guidelines.

Success Stories

“Went from idea to published site in 30 minutes. The examples helped me understand wiki-links immediately.”
— Sarah K., Developer

“Perfect for our team docs. The search and graph features are game-changers.”
— Mike T., Engineering Manager

“I’ve tried 5 digital garden tools. This is the only one that just worked.” — Alex R., Researcher

Roadmap

Recently Added ✅

• GitHub Actions deploy workflow
• Link analysis tool
• Quality checker script
• 35+ example pages

Coming Soon 🔄

• VSCode extension for wiki-links
• Mobile app companion
• Import from Obsidian/Roam
• Advanced graph algorithms

Under Consideration 💭

• Multi-language support
• Comments system integration
• Newsletter signup components

Technical Stack

Links

• Repository: github.com/yourusername/digital-garden-starter
• Live Demo: garden-starter.netlify.app
• Documentation: Comprehensive Guide
• Showcase: Sites Using This Starter

Related Projects

• [[Vitis Hugo Theme]] - The underlying theme
• [[Knowledge Graph Visualizer]] - Graph engine
• [[Wiki Link Parser]] - Link processing library

Everything you need to start your digital garden today. Just add content and watch it grow! 🌿