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}","deleted","label","dprn",[99],"permalink","https://www.val.town/x/angeltapes/dprn-remix/code/index.ts","extension","actionData","errors"]

Why Eleventy?

What to Expect

Key Features

Multiple Template Languages

Best Practices

Basic Syntax

Headers

Text Formatting

Tips for Better Writing

All Posts

About This Blog

About the Author

About the Technology

Get in Touch

Welcome to My Blog

Recent Posts

About This Site