blog

Today we migrated our blog to Val Town 🥳

We completed this migration in about one full day of work. Now our deployments, and preview deployments, are instant (100ms), and we've greatly simplified our blogging stack.

The upsides:

• super tight feedback loop with the deployed environment
• easier workflow for more casual contributors
  • browser-based, nothing to install or download
  • no git
  • branch previews work in your deployed environment (cloudflare previews are off for contributors)

The downsides:

• Val Town Projects are beta software, so you'd be on the cutting-edge alongside us.
  • We're coming up with patterns that you'd get for free from Astro
  • We haven't yet figured out a great story for image hosting and caching (right now we're just uploading to cloudflare out of band and linking; no images in source control yet; coming soon)
• Val Town doesn't yet have pull-request comments like Github does
• We don't have good workflows for bundlers or build steps, so it's harder to use anything that requires vite, etc.

Previously, our blog was:

• Built with Astro, a modern static site generator
• Deployed to Cloudflare Pages
• Updated through a GitHub workflow

While this setup worked well, we wanted:

1. A browser-based editor
2. Instant deploys (on feature branches and production)
3. To dogfood

The new blog:

1. Hosts new blog posts directly on Val Town as markdown files
2. Proxies requests for old blog posts to the original Cloudflare Pages deployment
3. Generates the full lists of posts (for the homepage) by splicing together the new posts and the old posts, which it gets via the old blog's RSS feed

We implemented the new blog system using:

• React for rendering components
• Tailwind CSS for styling
• Unified/Remark/Rehype for markdown processing
• RSS Parser for fetching posts from the old blog

Proxying is as easy as:

Create val
const OLD_BLOG_URL = "https://val-town-blog.pages.dev/";
const response = await fetch(
  new Request(OLD_BLOG_URL + url.pathname + url.search, {
    method: request.method,
    headers: new Headers({ ...Object.fromEntries(request.headers) }),
  }),
);

We fetch old posts via the https://val-town-blog.pages.dev/rss.xml, and combine them with the locally-hosted posts. We cache them both in-memory on server startup.

Create val
// Example of how we fetch blog posts
async function getAllBlogPosts() {
  // Get local posts from markdown files
  const localPosts = await getLocalBlogPosts();
  
  // Get posts from RSS feed
  const rssPosts = await getRssBlogPosts();
  
  // Merge and sort by date
  return [...localPosts, ...rssPosts].sort((a, b) => {
    return new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime();
  });
}

So far we've had reasonable success with this technique of migrating to Val Town quickly by proxying most old content, and only rebuilding the homepage. I first used this technique on my personal website, stevekrouse.com, and was pleased to see it continue to work here. If you, dear reader, have a blog you'd like to migrate to Val Town in this way and get stuck, shoot me an email at steve@val.town – I'd be happy to help.