{title === \"Val Town Blog\" ? title : `${title}

\n \n

\n\nIn Val Town, a save *is* a deploy, and it happens in about 100ms. We go to great technical lengths to make this possible. This means no waiting minutes to see what your post looks like live. You get the fast local dev experience, but with production. And this goes for branches too. Every edit of every branch is instantly deployed in a shareable URL.\n\n## Simple, browser-based workflow\n\nVal Town lets you use fewer tools. It replaces:\n\n* your local text editor,\n* git + GitHub for version control\n* whatever you use for deployment and hosting, Cloudflare, Vercel, Render, Railway, Heroku, Digital Ocean, Hertzner, etc\n\nSimpler, browser-based workflows are particularly important for casual contributors, such as less technical folks on your team or strangers on the internet. Val Town is a single website for code to be edited, versioned, collaborated on, and deployed. No need for anyone to install or use git, clone the repo locally, install programming languages and dependencies, or use a local text editor. \n\nFor example, here's how to make a change to this blog that you're reading right now:\n\n

\n \n

\n\nVal Town is uniquely positioned to allow anyone see their changes deployed live in their remix, because we host both your source code *and* your deployments. \n\n## A fast migration\n\nHow did we migrate 65 blog posts – with images, videos, and intricate formatting and styles – to an entirely new blog in a single day?\n\nWe didn't. We left them where they are, and proxy to them.\n\nWriting a proxy in Val Town (or any functions platform with the ['fetch handler' interface](https://blog.val.town/blog/the-api-we-forgot-to-name/)) is a delight:\n\n```ts\nconst OLD_BLOG_HOST = \"https://val-town-blog.pages.dev/\";\nexport async function proxy(req: Request): Promise {\n const url = new URL(req.url);\n return fetch(OLD_BLOG_HOST + url.pathname + url.search, {\n method: req.method,\n headers: req.headers,\n });\n}\n```\n\nSo if you go to view [blog.val.town/blog/val-town-newsletter-24](https://blog.val.town/blog/val-town-newsletter-24)\nyou'll see exactly what you would at [val-town-blog.pages.dev/blog/val-town-newsletter-24](https://val-town-blog.pages.dev/blog/val-town-newsletter-24). I find it eerie that proxies work so well.\n\nWe've had reasonable success with this technique of migrating to Val Town quickly by proxying most old content, and only rebuilding the homepage and new posts. I first used this technique on my personal website, [stevekrouse.com](https://stevekrouse.com), and was pleased to see it continue to work here.\n\n## Good reasons *not* to blog on Val Town\n\n1. 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 mature blogging tools like Astro and Cloudflare Pages.\n2. Val Town doesn't have good workflows for bundlers or build steps, so it's hard to use anything that requires vite, etc.\n3. Val Town doesn't (yet) have pull request comments.\n\nPersonally, I value simplicity, so I don't mind building a basic blog from scratch without a bundler with some help from AI. I do miss pull requests comments though. We plan on building them soon.\n\n## Bad reasons *not* to blog on Val Town\n\n1. **Lock-in**. Val Town is built on Deno and web standards, so you can easily leave for another deployment platform like Cloudflare, Vercel, or Deno Deploy. We'll even help you migrate. We believe in the open web.\n\n2. **Price**. We have a generous free tier, so your blog can go viral on HN, get 100k hits in a day, and you pay $0. It's $10 / month for 1m code runs per day. Need additional scale beyond that? It's still $10 / month while our Scale Plan is in beta. When ready, our scale pricing will be in line with other FaaS providers.\n\n## Get yourself a Val Town blog\n\nIf you are starting a new blog from scratch, remix [this markdown blog starter](https://www.val.town/x/stevekrouse/markdownBlogStarter).\n\nIf you are migrating an existing blog, feel free to remix [the Val Town blog](https://www.val.town/x/valdottown/blog). It comes with good patterns for proxying to old content.",[],[180,382],"eab578b4-1fa3-11f0-8b49-569c3dd06744","2025-04-02-post-mortem-db-migration.md","ef330ea5-bfd4-47fd-ba15-6793ad5c8ad1",["D",1745344932574],"---\ntitle: \"Post-mortem: A Backward Incompatible Database Migration\"\ndescription: Val runs failed due to a database migration that was not backward compatible\npubDate: 2025-04-02T00:00:00.000Z\nauthor: Sophie Houser\n---\n\nToday at 10:11am we experienced a 12-minute outage, which caused HTTP vals to return 503 errors and other types of vals to fail. In the end, the root cause was a deployment timing issue where database migrations were deployed successfully, but our application code deployment hung for several minutes. The new database migrations were incompatible with the old application code and crashed the process. \n\nWe aim to make all database migrations maintain backward compatibility, but in this case, we only discovered through the delayed deployment feedback that the new migrations were not compatible with previous versions.\n\n## Timeline\n\n- **10:11AM ET** - We merged the new migration and application code\n- **10:16AM ET** - We got pinged for downtime\n- **10:17AM ET** - We posted that HTTP vals are down in the new #service-status channel\n- **10:18AM ET** - The new application code deployment was still lagging\n- **10:19AM ET** - We rolled back to an earlier deployment on Render, which Render rejected because the earlier migration had succeeded, so the ‘old migration’ check prevented it from entering production.\n- **10:22AM ET** - We pushed something we thought could be a fix\n- **10:28AM ET** - We notified everyone that we’re back up.\n\n## Impact\n\n- HTTP vals returned 503 errors for ~12 minutes, and all other val types did not run.\n- The [val.town](http://val.town) site remained up.\n\n## Next Steps\n\nReliability is important to us and we’ve taken steps to make sure this doesn’t happen again. We’ve added a test to ensure database migrations are backward compatible, which we’ll run before we deploy any new code that includes database migrations.",[],[180,389],["D",1745344932574],[213,214,215],[180],"eab57210-1fa3-11f0-8b49-569c3dd06744","util.tsx","d527fc29-c536-4655-8444-2c794381d24c",["D",1745344932574],"export function formatDate(dateString: string): string {\n try {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n } catch (e) {\n return dateString;\n }\n}\n\nexport function dayOfWeek(dateString: string): string {\n try {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n });\n } catch (e) {\n return \"\";\n }\n}\n",[],[185,399],"eab569a0-1fa3-11f0-8b49-569c3dd06744","icons.tsx","4252ff0a-46bd-4dc2-b19b-f1f6a8f6049f",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function RSSIcon (props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\n\nexport function TwitterIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nexport function GitHubIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nexport function BlueskyIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nexport function DiscordIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\n",[],[185,406],"eab56766-1fa3-11f0-8b49-569c3dd06744","SocialLinks.tsx","257ed951-ed14-4197-94a8-fafe85f13875",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { BlueskyIcon, DiscordIcon, GitHubIcon, RSSIcon, TwitterIcon } from \"./icons.tsx\";\n\nexport default function SocialLinks() {\n return (\n

\n \n View source\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n );\n}",[],[185,413],"eab530c0-1fa3-11f0-8b49-569c3dd06744","OGImage.tsx","431b501b-2e95-47b3-882e-5bfb0fb97517",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport wrap from \"https://esm.sh/word-wrap@1.2.5\";\n\nconst LINE_HEIGHT = 72;\n\nexport default function OGImage({\n title = \"Val Town Blog\",\n ...props\n}: React.SVGProps & {\n title?: string;\n}) {\n const wrapped = wrap(title, { width: 44 });\n const lines = wrapped.split(/\\n/g);\n\n return (\n \n \n {lines.map((line, i) => (\n \n {line}\n \n ))}\n\n \n\n \n Blog\n \n\n \n \n \n \n \n );\n}",[],[185,420],"eab52df0-1fa3-11f0-8b49-569c3dd06744","LogoMark.tsx","edb33117-5675-46cf-84cf-95aa9cfc33b7",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function(props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\n\nexport function Favicon(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n );\n}",[],[185,427],"eab5150e-1fa3-11f0-8b49-569c3dd06744","Logo.tsx","ffea26d3-00fe-4950-820e-c7cd89a6d1ec",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function (props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\n",[],[185,434],"eab51392-1fa3-11f0-8b49-569c3dd06744","Layout.tsx","4bfea2e7-ca38-460a-81aa-33798e616e92",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { BlogPost } from \"../utils/types.ts\";\nimport Footer from \"./Footer.tsx\";\nimport Head from \"./Head.tsx\";\nimport Logo from \"./Logo.tsx\";\nimport LogoMark from \"./LogoMark.tsx\";\nimport SocialLinks from \"./SocialLinks.tsx\";\n\ninterface LayoutProps {\n title: string;\n children: React.ReactNode;\n post?: BlogPost;\n}\n\nexport function Layout({ title, post, children }: LayoutProps) {\n return (\n \n \n \n

\n \n \n \n

\n \n

\n \n Blog\n \n

\n {children}\n

\n \n \n );\n}",[],[185,441],"eab50eec-1fa3-11f0-8b49-569c3dd06744","HomePage.tsx","e7c20496-8c06-4ac6-94b0-1baf11780ea1",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { BlogPost } from \"../utils/types.ts\";\nimport { Layout } from \"./Layout.tsx\";\nimport Byline from \"./Byline.tsx\";\n\nexport function HomePage({ posts }: { posts: BlogPost[] }) {\n const latest = posts.at(0);\n const top = posts.slice(1, 3);\n const rest = posts.slice(3);\n\n return (\n \n

\n Latest\n

\n \n {latest.title}\n \n

\n \n

{latest.description}

\n Recent\n

\n {top.map((post, i) => (\n

\n {post.title}\n

\n \n

\n {post.description}\n

\n ))}\n

\n More posts\n

\n
\n {post.title}\n
\n \n
\n {post.description}\n
\n

\n \n );\n}\n",[],[185,448],"eab50744-1fa3-11f0-8b49-569c3dd06744","Head.tsx","f8c28d3f-7d6a-4331-b013-221fb4e5d202",["D",1745344932574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { BLOG_URL, SITE_DESCRIPTION } from \"../utils/constants.ts\";\nimport type { BlogPost } from \"../utils/types.ts\";\n\nconst css = await readFile(\"styles/index.css\", import.meta.url);\nconst HLJS_CSS_URL = \"https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/base16/solar-flare-light.css\";\n\nexport default function Head({ title, post }: {\n title: string;\n post?: BlogPost;\n}) {\n const description = post?.description ?? SITE_DESCRIPTION;\n const ogImage = new URL(\"/og-image.png\", BLOG_URL);\n ogImage.searchParams.append(\"title\", title);\n\n return (\n \n \n \n \n\n {title === \"Val Town Blog\" ? title : `${title} | Val Town Blog`}\n \n\n {/* Open Graph / Facebook */}\n \n \n \n \n\n \n\n {/* Twitter */}\n \n \n \n \n\n \n\n {\n /* Sitemap\n \n */\n }\n\n \n

Branches2

Branches
2