Val Town Blog

The Val Town Blog is now hosted directly on Val Town! The blog combines new posts written directly in this project with proxied content from our legacy blog.

• New Posts: Blog posts are written in markdown with YAML frontmatter and stored in the /posts directory
• Legacy Posts: Older blog posts are proxied from the original blog hosted at Cloudflare Pages (val-town-blog.pages.dev)
• Homepage: The homepage dynamically displays posts by:
  1. Reading local markdown files from the /posts directory
  2. Combining them with posts from the old blog
  3. Sorting all posts by date
  4. Rendering the content with a clean, custom design

• /index.ts: Main entry point that sets up Hono routing and middleware
• /components/: React components for rendering the blog
  • Layout.tsx: Shared layout with header, footer, and styling
  • HomePage.tsx: Renders the blog homepage with featured and recent posts
  • BlogPost.tsx: Renders individual blog posts
  • Head.tsx: Manages metadata, styles, and SEO
• /routes/: Hono route handlers for different parts of the blog
  • home.ts: Homepage route
  • blog.ts: Individual blog post routes
  • proxy.ts: Proxy to the old blog for legacy content
  • rss.ts: RSS feed generation
  • favicon.ts & og-image.ts: Asset routes
• /utils/: Utility functions for post processing, caching, etc.
• /posts/: Markdown files for blog posts
• /styles/: CSS styling

• React: For server-side rendering components
• Hono: Lightweight web framework for routing
• Custom CSS: For styling (no external frameworks)
• Unified/Remark/Rehype: For markdown processing with GitHub Flavored Markdown support
• Gray Matter: For parsing YAML frontmatter

To add a new blog post to the Val Town Blog:

1. Create a markdown file in the /posts directory with YAML frontmatter:

---
title: My New Blog Post
description: A brief description of the post
pubDate: 2025-04-01T00:00:00.000Z
author: Your Name
---

Content of your blog post in markdown format...

2. The post will automatically appear on the homepage and be accessible at /blog/[slug]

The blog supports GitHub Flavored Markdown (GFM) with:

• Code syntax highlighting
• Tables
• Lists
• Images
• And other standard markdown features

The blog includes a live reload feature that automatically refreshes the page when changes are made to the project. This works when viewing the blog on a .val.run domain during development.

The blog implements efficient caching:

• Cache headers are set for Cloudflare CDN but not for browsers
• Cache TTL is set to 5 minutes by default
• Domains ending with .val.run are excluded from caching

• Server-side rendering for fast initial page loads
• Efficient proxy for legacy content
• Minimal CSS with no external frameworks
• Optimized image handling

The blog is deployed directly on Val Town, with the production version available at blog.val.town.