Welcome to my new blog! This is the first post on a site built with Eleventy, a fantastic static site generator.

\n\n

Why Eleventy?

I chose Eleventy for several reasons:

Simple and fast - No complex build processes
Flexible - Works with multiple template languages
Zero-config - Works out of the box
Performance - Generates fast, static HTML

\n\n

What to Expect

On this blog, you can expect to find posts about:

Web development
Technology trends
Programming tutorials
Personal projects

\n\n

Thanks for visiting, and I hope you enjoy the content!

`\n },\n {\n title: \"Building Static Sites with Eleventy\",\n url: \"/posts/building-with-eleventy/\",\n date: new Date(\"2024-01-20\"),\n description: \"A guide to getting started with Eleventy static site generator\",\n tags: [\"eleventy\", \"tutorial\", \"static-sites\"],\n content: `

Eleventy (11ty) is a simpler static site generator that's gained popularity for its flexibility and ease of use. In this post, I'll share some tips for building great static sites with Eleventy.

\n\n

Key Features

Multiple Template Languages

Eleventy supports many template languages out of the box:

Markdown
Nunjucks
Liquid
Handlebars
Mustache
EJS
Haml
Pug

\n\n

Best Practices

Organize your content - Use clear folder structures
Use data files - Store site-wide data in _data/
Create reusable includes - Build modular templates
Optimize images - Use appropriate formats and sizes
Test locally - Always test before deploying

\n\n

Eleventy makes it easy to build fast, maintainable static sites. Give it a try for your next project!

`\n },\n {\n title: \"Markdown Writing Guide\",\n url: \"/posts/markdown-guide/\",\n date: new Date(\"2024-01-25\"),\n description: \"A comprehensive guide to writing in Markdown for blog posts\",\n tags: [\"markdown\", \"writing\", \"tutorial\"],\n content: `

Markdown is a lightweight markup language that's perfect for writing blog posts. Here's a comprehensive guide to using Markdown effectively.

\n\n

Basic Syntax

Headers

# H1 Header\n## H2 Header\n### H3 Header

\n\n

Text Formatting

Bold text with **bold**
Italic text with *italic*
~~Strikethrough~~ with ~~strikethrough~~

\n\n

Tips for Better Writing

Keep it simple - Markdown's strength is its simplicity
Use headers wisely - Create a clear hierarchy
Break up text - Use lists and short paragraphs
Add code examples - Show, don't just tell
Preview your work - Always check how it renders

\n\n

Markdown makes writing for the web enjoyable and efficient. Master these basics, and you'll be creating great content in no time!

`\n }\n ]\n};\n\nfunction formatDate(date: Date): string {\n return date.toLocaleDateString('en-US', { \n year: 'numeric', \n month: 'long', \n day: 'numeric' \n });\n}\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n \n try {\n // Serve CSS files\n if (path.startsWith('/css/')) {\n const cssContent = await readFile(`/src${path}`, import.meta.url);\n return new Response(cssContent, {\n headers: { 'Content-Type': 'text/css' }\n });\n }\n \n // Serve posts list page first (before individual posts)\n if (path === '/posts/' || path === '/posts') {\n const html = `\n\n\n \n \n All Posts - ${mockData.metadata.title}\n \n\n\n

\n \n

All Posts

\n ${post.title}\n ${formatDate(post.date)}\n
\n ${post.tags.map(tag => `#${tag}`).join('')}\n
\n
${post.description}
\n

\n \n \n\n`;\n \n return new Response(html, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n \n // Serve individual blog posts\n if (path.startsWith('/posts/') && path.endsWith('/') && path !== '/posts/') {\n const postSlug = path.slice(7, -1); // Remove /posts/ and trailing /\n const post = mockData.posts.find(p => p.url.includes(postSlug));\n \n if (!post) {\n return new Response('Post not found', { status: 404 });\n }\n \n const html = `\n\n\n \n \n ${post.title} - ${mockData.metadata.title}\n \n \n\n\n

\n \n

${post.title}

\n ${formatDate(post.date)}\n

\n ${post.tags.map(tag => `#${tag}`).join('')}\n

\n \n

\n ${post.content}\n

\n \n \n\n`;\n \n return new Response(html, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n \n // Serve about page\n if (path === '/about/' || path === '/about') {\n const html = `\n\n\n \n \n About - ${mockData.metadata.title}\n \n\n\n

\n \n

About This Blog

Welcome! This is a personal blog built with Eleventy, a simple and powerful static site generator.

\n \n

About the Author

Hi, I'm a developer passionate about web technologies, static sites, and sharing knowledge through writing. This blog is where I document my learning journey and share insights about:

Web development
Static site generators
Programming tutorials
Technology trends
Personal projects

\n \n

About the Technology

This blog is built with:

Eleventy - Static site generator
Markdown - For writing posts
Nunjucks - Template engine
CSS - Custom styling
Val Town - Hosting platform

\n \n

Get in Touch

Feel free to reach out if you have questions about any of the posts or want to discuss web development topics!

Email: ${mockData.metadata.author.email}
Website: ${mockData.metadata.author.url}

\n \n

Thanks for reading!

\n \n \n\n`;\n \n return new Response(html, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n \n // Serve homepage\n if (path === '/' || path === '') {\n const recentPosts = mockData.posts.slice(0, 3);\n \n const html = `\n\n\n \n \n ${mockData.metadata.title}\n \n \n\n\n

\n \n

Welcome to My Blog

This is a static blog built with Eleventy, a simpler static site generator.

\n \n

About This Site

This blog is built with:

Eleventy - A simpler static site generator
Markdown - For writing posts
Nunjucks - For templating
CSS - For styling

\n \n

Feel free to explore the posts and learn more about various topics!

\n \n \n\n`;\n \n return new Response(html, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n \n // 404 for other paths\n return new Response('Page not found', { \n status: 404,\n headers: { 'Content-Type': 'text/plain' }\n });\n \n } catch (error) {\n console.error('Error:', error);\n return new Response(`Error: ${error.message}`, { \n status: 500,\n headers: { 'Content-Type': 'text/plain' }\n });\n }\n}","dprn",[209],"d75c816e-3ec4-11f0-9976-76b3cceeab13",["D",1748767559607],"# Democratic People's Republic Of Noise\n\nNo Gods, No Masters, just salads and pasta. \n\nDPRN are a loose collective of punk, grind and noise bands. We put on shows in Glasgow, Scotland. \n\n## Project Structure\n\n```\n├── src/\n│ ├── _data/ # Global data files\n│ │ └── metadata.json # Site metadata\n│ ├── _includes/ # Layout templates and partials\n│ │ ├── layouts/\n│ │ │ ├── base.njk # Base layout template\n│ │ │ └── post.njk # Post layout template\n│ │ └── postslist.njk # Post list partial\n│ ├── posts/ # Blog posts (markdown)\n│ │ ├── posts.json # Post defaults\n│ │ ├── welcome-to-my-blog.md\n│ │ ├── building-with-eleventy.md\n│ │ └── markdown-guide.md\n│ ├── css/ # Stylesheets\n│ │ ├── index.css # Main stylesheet\n│ │ └── prism-base16-monokai.dark.css # Code highlighting\n│ ├── index.md # Homepage\n│ ├── posts.md # Posts archive page\n│ ├── about.md # About page\n│ └── feed.njk # RSS feed template\n├── .eleventy.js # 11ty configuration\n├── package.json # Dependencies\n├── index.ts # Val Town HTTP handler\n└── README.md\n```\n\n## Features\n\n- ✅ **Working Blog** - Fully functional with multiple posts\n- ✅ **Responsive Design** - Mobile-friendly layout\n- ✅ **Post Collections** - Organized blog posts with metadata\n- ✅ **Navigation** - Header navigation between pages\n- ✅ **Tags System** - Posts can be tagged and categorized\n- ✅ **Date Formatting** - Human-readable post dates\n- ✅ **SEO-Friendly** - Proper meta tags and descriptions\n- ✅ **Modern CSS** - Clean, professional styling\n- ✅ **Code Highlighting** - Syntax highlighting for code blocks\n\n## Live Pages\n\nThe blog includes these working pages:\n\n- **Homepage** (`/`) - Welcome page with recent posts\n- **All Posts** (`/posts/`) - Complete list of blog posts\n- **Individual Posts** (`/posts/[slug]/`) - Full post content\n- **About Page** (`/about/`) - Information about the blog\n- **CSS Styling** (`/css/index.css`) - Responsive stylesheet\n\n## Current Implementation\n\nThis implementation uses a simplified approach that works within Val Town's constraints:\n\n- **Static Content Serving** - Serves pre-built HTML content\n- **Mock Data** - Uses JavaScript objects to simulate 11ty collections\n- **Template Processing** - Basic template engine for dynamic content\n- **File Serving** - Serves CSS and other static assets\n- **Responsive Design** - Mobile-first CSS with modern styling\n\n## Sample Blog Posts\n\nThe blog comes with three sample posts:\n\n1. **Welcome to My Blog** - Introduction post about Eleventy\n2. **Building Static Sites with Eleventy** - Tutorial on 11ty features\n3. **Markdown Writing Guide** - Guide to writing in Markdown\n\n## Adding New Posts\n\nTo add new blog posts, you can:\n\n1. Add new post objects to the `mockData.posts` array in `index.ts`\n2. Include proper metadata (title, date, description, tags)\n3. Write content in HTML format\n4. Update the URL routing if needed\n\n## Customization\n\n- **Styling** - Modify `/src/css/index.css` for visual changes\n- **Content** - Update the mock data in `index.ts`\n- **Layout** - Adjust the HTML templates in the response handlers\n- **Metadata** - Update site information in the `mockData.metadata` object\n\n## Technical Notes\n\nThis implementation demonstrates 11ty concepts while working within Val Town's serverless environment. The original 11ty configuration files are preserved to show the intended structure, but the actual serving is handled by a custom TypeScript handler that mimics 11ty's output.\n\nThe blog is fully functional and demonstrates all the key features you'd expect from an 11ty static site!",[109],"9dad65e6-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"const { DateTime } = require(\"luxon\");\n\nmodule.exports = function(eleventyConfig) {\n // Copy static assets\n eleventyConfig.addPassthroughCopy(\"src/css\");\n eleventyConfig.addPassthroughCopy(\"src/js\");\n eleventyConfig.addPassthroughCopy(\"src/images\");\n\n // Date filters\n eleventyConfig.addFilter(\"readableDate\", dateObj => {\n return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat(\"dd LLL yyyy\");\n });\n\n eleventyConfig.addFilter(\"htmlDateString\", (dateObj) => {\n return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');\n });\n\n // Get the first `n` elements of a collection\n eleventyConfig.addFilter(\"head\", (array, n) => {\n if(!Array.isArray(array) || array.length === 0) {\n return [];\n }\n if( n < 0 ) {\n return array.slice(n);\n }\n return array.slice(0, n);\n });\n\n // Return the smallest number argument\n eleventyConfig.addFilter(\"min\", (...numbers) => {\n return Math.min.apply(null, numbers);\n });\n\n // Create a collection for blog posts\n eleventyConfig.addCollection(\"posts\", function(collectionApi) {\n return collectionApi.getFilteredByGlob(\"src/posts/*.md\").sort((a, b) => {\n return b.date - a.date; // Sort by date descending\n });\n });\n\n // Create a collection for featured posts\n eleventyConfig.addCollection(\"featuredPosts\", function(collectionApi) {\n return collectionApi.getFilteredByGlob(\"src/posts/*.md\")\n .filter(post => post.data.featured)\n .sort((a, b) => b.date - a.date);\n });\n\n return {\n templateFormats: [\n \"md\",\n \"njk\",\n \"html\",\n \"liquid\"\n ],\n markdownTemplateEngine: \"njk\",\n htmlTemplateEngine: \"njk\",\n dir: {\n input: \"src\",\n includes: \"_includes\",\n data: \"_data\",\n output: \"_site\"\n }\n };\n};",[137],"9dad63de-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],[174],"pulls","branches","forks","envVars",{"_260":20,"_407":20},"connections",{"_260":20,"_406":20},"unfilledCount","emptyCount",{"_32":396,"_13":174,"_95":173,"_42":-5,"_34":35,"_376":39,"_377":312,"_36":535,"_38":20,"_98":167,"_379":-5,"_99":24,"_381":-5,"_433":536,"_348":537},{"_32":531,"_13":181,"_95":180,"_42":173,"_34":35,"_376":39,"_377":312,"_36":532,"_38":20,"_98":167,"_379":-5,"_99":24,"_381":-5,"_433":533,"_348":534},{"_32":526,"_13":202,"_95":201,"_42":180,"_34":35,"_376":39,"_377":312,"_36":527,"_38":20,"_98":53,"_379":528,"_99":24,"_381":-5,"_433":529,"_348":530},{"_32":522,"_13":166,"_95":165,"_42":173,"_34":35,"_376":39,"_377":312,"_36":523,"_38":20,"_98":167,"_379":-5,"_99":24,"_381":-5,"_433":524,"_348":525},{"_32":518,"_13":231,"_95":230,"_42":165,"_34":35,"_376":39,"_377":312,"_36":519,"_38":20,"_98":167,"_379":-5,"_99":24,"_381":-5,"_433":520,"_348":521},{"_32":513,"_13":159,"_95":158,"_42":230,"_34":35,"_376":39,"_377":312,"_36":514,"_38":20,"_98":53,"_379":515,"_99":24,"_381":-5,"_433":516,"_348":517},{"_32":508,"_13":123,"_95":122,"_42":230,"_34":35,"_376":39,"_377":312,"_36":509,"_38":20,"_98":53,"_379":510,"_99":24,"_381":-5,"_433":511,"_348":512},{"_32":503,"_13":130,"_95":129,"_42":165,"_34":35,"_376":39,"_377":312,"_36":504,"_38":20,"_98":53,"_379":505,"_99":24,"_381":-5,"_433":506,"_348":507},{"_32":499,"_13":188,"_95":187,"_42":173,"_34":35,"_376":39,"_377":312,"_36":500,"_38":20,"_98":167,"_379":-5,"_99":24,"_381":-5,"_433":501,"_348":502},{"_32":494,"_13":224,"_95":223,"_42":187,"_34":35,"_376":39,"_377":312,"_36":495,"_38":20,"_98":53,"_379":496,"_99":24,"_381":-5,"_433":497,"_348":498},{"_32":489,"_13":245,"_95":244,"_42":187,"_34":35,"_376":39,"_377":312,"_36":490,"_38":20,"_98":53,"_379":491,"_99":24,"_381":-5,"_433":492,"_348":493},{"_32":485,"_13":238,"_95":237,"_42":173,"_34":35,"_376":39,"_377":312,"_36":486,"_38":20,"_98":167,"_379":-5,"_99":24,"_381":-5,"_433":487,"_348":488},{"_32":480,"_13":265,"_95":264,"_42":237,"_34":35,"_376":39,"_377":312,"_36":481,"_38":20,"_98":53,"_379":482,"_99":24,"_381":-5,"_433":483,"_348":484},{"_32":475,"_13":116,"_95":115,"_42":237,"_34":35,"_376":39,"_377":312,"_36":476,"_38":20,"_98":53,"_379":477,"_99":24,"_381":-5,"_433":478,"_348":479},{"_32":470,"_13":97,"_95":96,"_42":237,"_34":35,"_376":39,"_377":312,"_36":471,"_38":20,"_98":53,"_379":472,"_99":24,"_381":-5,"_433":473,"_348":474},{"_32":465,"_13":152,"_95":151,"_42":237,"_34":35,"_376":39,"_377":312,"_36":466,"_38":20,"_98":53,"_379":467,"_99":24,"_381":-5,"_433":468,"_348":469},{"_32":460,"_13":259,"_95":258,"_42":173,"_34":35,"_376":39,"_377":312,"_36":461,"_38":20,"_98":53,"_379":462,"_99":24,"_381":-5,"_433":463,"_348":464},{"_32":455,"_13":145,"_95":144,"_42":173,"_34":35,"_376":39,"_377":312,"_36":456,"_38":20,"_98":53,"_379":457,"_99":24,"_381":-5,"_433":458,"_348":459},{"_32":450,"_13":252,"_95":251,"_42":173,"_34":35,"_376":289,"_377":312,"_36":451,"_38":275,"_98":53,"_379":452,"_99":24,"_381":-5,"_433":453,"_348":454},{"_32":445,"_13":195,"_95":194,"_42":173,"_34":35,"_376":39,"_377":312,"_36":446,"_38":20,"_98":53,"_379":447,"_99":24,"_381":-5,"_433":448,"_348":449},{"_32":392,"_13":137,"_95":136,"_42":-5,"_34":35,"_376":39,"_377":312,"_36":442,"_38":20,"_98":138,"_379":394,"_99":24,"_381":-5,"_433":443,"_348":444},{"_32":388,"_13":109,"_95":108,"_42":-5,"_34":35,"_376":268,"_377":312,"_36":439,"_38":39,"_98":53,"_379":390,"_99":24,"_381":-5,"_433":440,"_348":441},{"_32":383,"_13":209,"_95":208,"_42":-5,"_34":35,"_376":39,"_377":312,"_36":436,"_38":20,"_98":210,"_379":385,"_99":24,"_381":386,"_433":437,"_348":438},{"_32":375,"_13":217,"_95":216,"_42":-5,"_34":35,"_376":296,"_377":312,"_36":432,"_38":39,"_98":53,"_379":380,"_99":24,"_381":-5,"_433":434,"_348":435},["D",1748768629460],"children",[],[217],["D",1748767462792],[],[209],["D",1748767559607],[],[109],["D",1748767462792],[],[137],"9dad5d30-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"---\nlayout: layouts/base.njk\neleventyNavigation:\n key: Archive\n order: 2\n---\n\n# All Posts\n\n{% set postslist = collections.posts %}\n{% include \"postslist.njk\" %}",[],[174,195],"2cdf1890-3ec5-11f0-a64d-76b3cceeab13",["D",1748767703069],"---\nlayout: layouts/base.njk\neleventyNavigation:\n key: Home\n order: 1\n---\n\n# Democratic People's Republic Of Noise\n\nNo Gods, No Masters, just salads and pasta. \n\nDPRN are a loose collective of punk, grind and noise bands. We put on shows in Glasgow, Scotland. \n\n## Recent Posts\n\n{% set postslist = collections.posts | head(-3) %}\n{% set postslistCounter = collections.posts | length %}\n{% include \"postslist.njk\" %}\n\n

View all posts →

\n\n## About This Site\n\nThis blog is built with:\n- **Eleventy** - A simpler static site generator\n- **Markdown** - For writing posts\n- **Nunjucks** - For templating\n- **CSS** - For styling\n\nFeel free to explore the posts and learn more about various topics!",[],[174,252],"9dad5682-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"---\npermalink: /feed.xml\neleventyExcludeFromCollections: true\n---\n\n\n {{ metadata.title }}\n {{ metadata.description }}\n \n \n {{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}\n {{ metadata.url }}\n \n {{ metadata.author.name }}\n {{ metadata.author.email }}\n \n {%- for post in collections.posts | head(10) %}\n \n {{ post.data.title }}\n \n {{ post.date | dateToRfc3339 }}\n {{ metadata.url }}{{ post.url }}\n {{ post.templateContent | htmlToAbsoluteUrls(metadata.url) }}\n \n {%- endfor %}\n",[],[174,145],"9dad5506-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"---\nlayout: layouts/base.njk\ntitle: About\neleventyNavigation:\n key: About\n order: 3\n---\n\n# About This Blog\n\nWelcome! This is a personal blog built with [Eleventy](https://www.11ty.dev/), a simple and powerful static site generator.\n\n## About the Author\n\nHi, I'm a developer passionate about web technologies, static sites, and sharing knowledge through writing. This blog is where I document my learning journey and share insights about:\n\n- Web development\n- Static site generators\n- Programming tutorials\n- Technology trends\n- Personal projects\n\n## About the Technology\n\nThis blog is built with:\n\n- **Eleventy** - Static site generator\n- **Markdown** - For writing posts\n- **Nunjucks** - Template engine\n- **CSS** - Custom styling\n- **Val Town** - Hosting platform\n\n## Get in Touch\n\nFeel free to reach out if you have questions about any of the posts or want to discuss web development topics!\n\n- Email: [your.email@example.com](mailto:your.email@example.com)\n- Website: [your-website.com](https://your-website.com)\n\nThanks for reading!",[],[174,259],"9dad49bc-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"---\ntitle: Welcome to My Blog\ndescription: An introduction to this new blog built with Eleventy\ndate: 2024-01-15\ntags:\n - welcome\n - eleventy\n - blogging\nfeatured: true\n---\n\nWelcome to my new blog! This is the first post on a site built with [Eleventy](https://www.11ty.dev/), a fantastic static site generator.\n\n## Why Eleventy?\n\nI chose Eleventy for several reasons:\n\n- **Simple and fast** - No complex build processes\n- **Flexible** - Works with multiple template languages\n- **Zero-config** - Works out of the box\n- **Performance** - Generates fast, static HTML\n\n## What to Expect\n\nOn this blog, you can expect to find posts about:\n\n- Web development\n- Technology trends\n- Programming tutorials\n- Personal projects\n\n## Getting Started\n\nThis blog supports:\n\n- Markdown for writing posts\n- Syntax highlighting for code\n- Tags and categories\n- RSS feeds\n- Responsive design\n\nThanks for visiting, and I hope you enjoy the content!\n\n```javascript\n// Here's some sample code with syntax highlighting\nfunction welcomeMessage(name) {\n return `Welcome to the blog, ${name}!`;\n}\n\nconsole.log(welcomeMessage(\"reader\"));\n```",[],[174,238,152],"9dad47b4-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"{\n \"layout\": \"layouts/post.njk\",\n \"tags\": [\"posts\"]\n}",[],[174,238,97],"9dad4444-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"---\ntitle: Markdown Writing Guide\ndescription: A comprehensive guide to writing in Markdown for blog posts\ndate: 2024-01-25\ntags:\n - markdown\n - writing\n - tutorial\n---\n\nMarkdown is a lightweight markup language that's perfect for writing blog posts. Here's a comprehensive guide to using Markdown effectively.\n\n## Basic Syntax\n\n### Headers\n```markdown\n# H1 Header\n## H2 Header\n### H3 Header\n```\n\n### Text Formatting\n- **Bold text** with `**bold**`\n- *Italic text* with `*italic*`\n- ~~Strikethrough~~ with `~~strikethrough~~`\n\n### Lists\n\nUnordered lists:\n- Item 1\n- Item 2\n - Nested item\n - Another nested item\n\nOrdered lists:\n1. First item\n2. Second item\n3. Third item\n\n### Links and Images\n- [Link text](https://example.com)\n- ![Alt text](image-url.jpg)\n\n## Advanced Features\n\n### Code Blocks\n\nInline code: `const variable = \"value\"`\n\nBlock code:\n```javascript\nfunction greet(name) {\n return `Hello, ${name}!`;\n}\n```\n\n### Tables\n\n| Column 1 | Column 2 | Column 3 |\n|----------|----------|----------|\n| Row 1 | Data | More data|\n| Row 2 | Data | More data|\n\n### Blockquotes\n\n> This is a blockquote. It can span multiple lines and is great for highlighting important information or quotes from other sources.\n\n### Horizontal Rules\n\n---\n\n## Tips for Better Writing\n\n1. **Keep it simple** - Markdown's strength is its simplicity\n2. **Use headers wisely** - Create a clear hierarchy\n3. **Break up text** - Use lists and short paragraphs\n4. **Add code examples** - Show, don't just tell\n5. **Preview your work** - Always check how it renders\n\nMarkdown makes writing for the web enjoyable and efficient. Master these basics, and you'll be creating great content in no time!",[],[174,238,116],"9dad4160-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"---\ntitle: Building Static Sites with Eleventy\ndescription: A guide to getting started with Eleventy static site generator\ndate: 2024-01-20\ntags:\n - eleventy\n - tutorial\n - static-sites\n---\n\nEleventy (11ty) is a simpler static site generator that's gained popularity for its flexibility and ease of use. In this post, I'll share some tips for building great static sites with Eleventy.\n\n## Key Features\n\n### Multiple Template Languages\nEleventy supports many template languages out of the box:\n- Markdown\n- Nunjucks\n- Liquid\n- Handlebars\n- Mustache\n- EJS\n- Haml\n- Pug\n\n### Collections\nCollections are a powerful way to group related content:\n\n```javascript\n// In .eleventy.js\neleventyConfig.addCollection(\"posts\", function(collectionApi) {\n return collectionApi.getFilteredByGlob(\"src/posts/*.md\");\n});\n```\n\n### Filters\nCustom filters help transform data:\n\n```javascript\neleventyConfig.addFilter(\"readableDate\", dateObj => {\n return DateTime.fromJSDate(dateObj).toFormat(\"dd LLL yyyy\");\n});\n```\n\n## Best Practices\n\n1. **Organize your content** - Use clear folder structures\n2. **Use data files** - Store site-wide data in `_data/`\n3. **Create reusable includes** - Build modular templates\n4. **Optimize images** - Use appropriate formats and sizes\n5. **Test locally** - Always test before deploying\n\n## Performance Tips\n\n- Minimize CSS and JavaScript\n- Optimize images\n- Use semantic HTML\n- Implement proper caching headers\n- Consider a CDN for static assets\n\nEleventy makes it easy to build fast, maintainable static sites. Give it a try for your next project!",[],[174,238,265],"9dad4b9c-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],[420,421,422,423],[174,238],"9dad3c42-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"/* PrismJS 1.23.0\nhttps://prismjs.com/download.html#themes=prism-base16-monokai.dark&languages=markup+css+clike+javascript */\n/**\n * prism.js Base16 Monokai Dark theme for JavaScript, CSS and HTML\n * Based on Base16 Monokai (https://github.com/chriskempson/base16)\n * @author highlightjs/base16-monokai.dark\n * @version 1.0\n */\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tcolor: #f8f8f2;\n\tbackground: none;\n\tfont-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n\tfont-size: 1em;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tword-wrap: normal;\n\tline-height: 1.5;\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n\tborder-radius: 0.3em;\n\tbackground: #272822;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tbackground: #272822;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n\twhite-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: #75715e;\n}\n\n.token.punctuation {\n\tcolor: #f8f8f2;\n}\n\n.token.namespace {\n\topacity: .7;\n}\n\n.token.property,\n.token.tag,\n.token.constant,\n.token.symbol,\n.token.deleted {\n\tcolor: #f92672;\n}\n\n.token.boolean,\n.token.number {\n\tcolor: #ae81ff;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n\tcolor: #a6e22e;\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.style .token.string,\n.token.variable {\n\tcolor: #f8f8f2;\n}\n\n.token.atrule,\n.token.attr-value,\n.token.function,\n.token.class-name {\n\tcolor: #e6db74;\n}\n\n.token.keyword {\n\tcolor: #66d9ef;\n}\n\n.token.regex,\n.token.important {\n\tcolor: #fd971f;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}",[],[174,188,245],"9dad3436-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"/* Reset and base styles */\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n color: #333;\n background-color: #fff;\n line-height: 1.6;\n}\n\n/* Layout */\nbody {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\nmain {\n flex: 1;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem 1rem;\n}\n\n/* Header and Navigation */\nheader {\n background-color: #f8f9fa;\n border-bottom: 1px solid #e9ecef;\n padding: 1rem 0;\n}\n\nnav {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n}\n\nnav h1 {\n margin: 0;\n font-size: 1.5rem;\n}\n\nnav h1 a {\n text-decoration: none;\n color: #333;\n}\n\nnav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n gap: 1.5rem;\n}\n\nnav a {\n text-decoration: none;\n color: #666;\n font-weight: 500;\n transition: color 0.2s;\n}\n\nnav a:hover {\n color: #007bff;\n}\n\n/* Typography */\nh1, h2, h3, h4, h5, h6 {\n margin-top: 2rem;\n margin-bottom: 1rem;\n line-height: 1.3;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-top: 0;\n}\n\nh2 {\n font-size: 2rem;\n border-bottom: 2px solid #e9ecef;\n padding-bottom: 0.5rem;\n}\n\nh3 {\n font-size: 1.5rem;\n}\n\np {\n margin-bottom: 1rem;\n}\n\n/* Links */\na {\n color: #007bff;\n text-decoration: underline;\n}\n\na:hover {\n color: #0056b3;\n}\n\n/* Lists */\nul, ol {\n margin-bottom: 1rem;\n padding-left: 2rem;\n}\n\nli {\n margin-bottom: 0.5rem;\n}\n\n/* Code */\ncode {\n background-color: #f8f9fa;\n padding: 0.2rem 0.4rem;\n border-radius: 3px;\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;\n font-size: 0.9em;\n}\n\npre {\n background-color: #f8f9fa;\n padding: 1rem;\n border-radius: 5px;\n overflow-x: auto;\n margin-bottom: 1rem;\n}\n\npre code {\n background-color: transparent;\n padding: 0;\n}\n\n/* Tables */\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 1rem;\n}\n\nth, td {\n border: 1px solid #dee2e6;\n padding: 0.75rem;\n text-align: left;\n}\n\nth {\n background-color: #f8f9fa;\n font-weight: 600;\n}\n\n/* Blockquotes */\nblockquote {\n border-left: 4px solid #007bff;\n margin: 1rem 0;\n padding-left: 1rem;\n color: #666;\n font-style: italic;\n}\n\n/* Post list */\n.postlist {\n list-style: none;\n padding: 0;\n}\n\n.postlist-item {\n margin-bottom: 2rem;\n padding: 1.5rem;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n background-color: #fafafa;\n}\n\n.postlist-item-active {\n background-color: #e3f2fd;\n border-color: #007bff;\n}\n\n.postlist-link {\n font-size: 1.25rem;\n font-weight: 600;\n text-decoration: none;\n color: #333;\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.postlist-link:hover {\n color: #007bff;\n}\n\n.postlist-date {\n color: #666;\n font-size: 0.9rem;\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.postlist-description {\n color: #666;\n margin: 0.5rem 0 0 0;\n}\n\n/* Tags */\n.tags, .postlist-tags {\n margin-top: 0.5rem;\n}\n\n.tag {\n display: inline-block;\n background-color: #e9ecef;\n color: #495057;\n padding: 0.25rem 0.5rem;\n border-radius: 3px;\n font-size: 0.8rem;\n margin-right: 0.5rem;\n margin-bottom: 0.25rem;\n}\n\n/* Post content */\n.tmpl-post article {\n max-width: none;\n}\n\n.tmpl-post header {\n margin-bottom: 2rem;\n padding-bottom: 1rem;\n border-bottom: 1px solid #e9ecef;\n}\n\n.tmpl-post h1 {\n margin-bottom: 0.5rem;\n}\n\n.tmpl-post time {\n color: #666;\n font-size: 0.9rem;\n}\n\n.post-content {\n margin-bottom: 3rem;\n}\n\n/* Post navigation */\n.post-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 2rem;\n border-top: 1px solid #e9ecef;\n margin-top: 2rem;\n}\n\n.prev-post, .next-post {\n text-decoration: none;\n color: #007bff;\n font-weight: 500;\n padding: 0.5rem 1rem;\n border: 1px solid #007bff;\n border-radius: 5px;\n transition: all 0.2s;\n}\n\n.prev-post:hover, .next-post:hover {\n background-color: #007bff;\n color: white;\n}\n\n.next-post {\n margin-left: auto;\n}\n\n/* Footer */\nfooter {\n background-color: #f8f9fa;\n border-top: 1px solid #e9ecef;\n padding: 2rem 0;\n text-align: center;\n color: #666;\n margin-top: auto;\n}\n\nfooter p {\n margin: 0;\n max-width: 800px;\n margin: 0 auto;\n padding: 0 1rem;\n}\n\nfooter a {\n color: #007bff;\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n nav ul {\n gap: 1rem;\n }\n \n main {\n padding: 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n h2 {\n font-size: 1.5rem;\n }\n \n .post-nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n .next-post {\n margin-left: 0;\n }\n}",[],[174,188,224],"9dad3ff8-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],[417,418],[174,188],"9dad2ed2-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"

\n \n {% if post.data.title %}\n {{ post.data.title }}\n {% else %}\n {{ post.url }}\n {% endif %}\n \n {{ post.date | readableDate }}\n {% if post.data.tags %}\n
\n {% for tag in post.data.tags %}\n {% if tag != \"posts\" %}\n #{{ tag }}\n {% endif %}\n {% endfor %}\n
\n {% endif %}\n {% if post.data.description %}\n
{{ post.data.description }}
\n {% endif %}\n

",[],[174,166,130],"9dad2a9a-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"---\nlayout: layouts/base.njk\ntemplateClass: tmpl-post\n---\n\n

\n {{ date | readableDate }}\n {% if tags %}\n

\n {% for tag in tags %}\n {% if tag != \"posts\" %}\n #{{ tag }}\n {% endif %}\n {% endfor %}\n

\n {% endif %}\n

\n\n

\n {{ content | safe }}\n

\n\n \n

",[],[174,166,231,123],"9dad2658-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"\n\n \n \n \n {% if title %}{{ title }} - {% endif %}{{ metadata.title }}\n \n \n {#- Atom and JSON feeds included by default #}\n \n \n \n {#- Uncomment this if you'd like folks to know that you used Eleventy to build your site! #}\n {#- #}\n \n \n \n \n \n \n \n

\n \n

\n\n \n {{ content | safe }}\n \n\n \n\n \n \n",[],[174,166,231,159],"9dad2cc0-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],[413,414],[174,166,231],"9dad315c-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],[412,415],[174,166],"9dad1938-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],"{\n \"title\": \"My 11ty Blog\",\n \"url\": \"https://your-val-town-url.web.val.run/\",\n \"language\": \"en\",\n \"description\": \"A personal blog built with Eleventy static site generator\",\n \"author\": {\n \"name\": \"Your Name\",\n \"email\": \"your.email@example.com\",\n \"url\": \"https://your-website.com/\"\n }\n}",[],[174,181,202],"9dad2446-3ec4-11f0-9574-76b3cceeab13",["D",1748767462792],[410],[174,181],["D",1748767462792],[409,411,416,419,424,425,426,427],[174],["D",1748767462792],{"_11":12,"_347":102},{"_11":12,"_343":-5,"_101":102,"_25":100,"_344":345,"_346":24},{"_38":296,"_13":16,"_32":35,"_335":301,"_336":-5,"_337":-5,"_338":-5,"_339":-5,"_340":-5,"_341":14,"_342":12},"ctx",{"_51":-5,"_367":575,"_576":577,"_578":579,"_580":24,"_581":24,"_582":24,"_583":312,"_584":-5,"_585":-7,"_586":-7,"_587":20,"_588":24,"_589":24,"_590":-5,"_591":24,"_592":24,"_593":24,"_594":-5},"ENV",{"_546":547,"_548":549,"_550":16,"_551":552,"_553":554,"_555":556,"_557":558,"_559":560,"_561":562,"_563":564,"_565":566,"_567":568,"_569":570,"_571":572,"_573":574},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History