Redeem Tomorrow has a new site. Please let me know if you have any trouble with it.

I had a few goals in rebuilding the site over the last few weeks:

• High availability without admin burden
• Power to shape the product
• Tidiness and credibility
• Approximate feature parity with Ghost

I was thrilled to hit all of these marks. In the process, I’ve been struck by just how much the web has evolved over the last 20 years. So here’s a walkthrough of the new powers you have for building a modern site, and how much fun it is.

In the beginning

WordPress is the farm tractor of the internet.

Nothing comes close to its versatility and overall power. But it was architected for a different time. In the beginning of the last cycle, we still thought comments sections were a universally good idea, for example.

Pursuing the nimbleness of a lively, reactive machine, WordPress is built to constantly respond to user activity, updating the contents of the website when appropriate.

To do this, WordPress needs run continuously, demanding a computing environment that provides things like a database, web server, and runtime for executing php code. Reasonable enough.

The wrinkle is this: for most websites, most of that infrastructure is sitting idle most of the time. It swings to life when an admin logs in to write and publish a post, then sits quietly again, serving pages when requested.

Nevertheless, you pay for the whole month, idle or not, when you host a web application built in the WordPress style. It’s not that much money. DigitalOcean will sell you a perfectly reasonable host for $6 a month that can do the job. Still, at scale, that’s not the best use of resources.

Technologists hate inefficiency.

Enter the static site generator

Meanwhile, storage is cheap. Serving static content to the web can happen in volume. There are efficiencies to be found in bulk hosting.

Under the static site paradigm, you use time-boxed, live computing on the few occasions where it’s actually needed: when you’re authoring new content to be inserted into your website. On these occasions, the raw contents of your site are converted, according to various templating rules, into real, styled HTML that anyone can use.

Even better, because your content has been simplified into the raw basics of static files, it can now be served in parallel without any particular effort on your part. Services like Netlify offer workflows with transient computing power to generate your site, then distribute it around the world through Content Delivery Networks (CDNs). With a CDN, a network of hosts around the world all maintain copies of your content.

With your content on a CDN, your visitors experience less delay between making a request and your site fulfilling it. Even better, through the parallel design of a CDN, it’s much less likely that a spike in traffic will knock your site offline. A drawback with WordPress was that a surge in popularity could overwhelm your computing resources, with a $6 virtual server suddenly handling traffic better suited to a $100 machine.

When a CDN backs your content, you don’t have this category of problem. Of course, it was always possible to bolt this kind of performance onto a WordPress installation, but this required special attention and specialist knowledge.

In the realm of static site generation, you don’t need to know anything about that sort of thing. The hosting provider can abstract it away for you.

Having fun with SvelteKit

The issue I’ve had with static site frameworks is this:

The ergonomics never sat right for me. Like a pair of pants stitched with some subtle but fundamental asymmetry, I could never become comfortable or catch a stride. Either the templating approach was annoying, or the abstractions were too opaque to have fun with.

Then, in my last months at Glitch, I saw mention of SvelteKit, which had just hit 1.0. I was working with some of the smartest people in web development, so I asked: “What do you think?”

The glowing praise I heard convinced me to plow headlong into learning, and I’ve been having a blast ever since. Here’s how Svelte works:

<script>
	//You can code what you want inside the `script` tag. This is also where you define input arguments that bring your components to life.

	export let aValue;
</script>

<div>
	<!-- Use whatever script values you want, just wrap them in curly braces and otherwise write HTML -->
	Here is some content: {aValue}
</div>

Components and Layouts can encapsulate their own scriptable functionality. Just write JavaScript.

If you need more sophisticated behavior—to construct pagination, for example—you can write dedicated JS files that support your content.

This stuff can get as complex as you like. Make API requests, even expose your own API endpoints. Best of all, for me, is that SvelteKit’s routing is completely intuitive. Make a directory structure, put files into it, and then your site will have the same structure.

But what’s really badass is that all of it can be designed to generate static content. I don’t really understand or even care about the many layers of weird shit going on to support JS web development, and with SvelteKit, I don’t have to. The abstractions are tidy and self-contained enough that I can see results before becoming an expert.

All I have to do is make a fresh commit to my site’s GitHub repo, and Netlify will update my site with the new content. Whatever automated tasks I want to do during this phase, I can. I feel like I have all the power of what we’d call “full-stack” applications, for my blogging purposes, but with none of the costs or maintenance downsides.

Sounds neat, but what can you do with it in practice?

OpenGraph preview cards

For one thing, every post on this site now provides a unique OpenGraph card, based on its title and excerpt. When you share a post with a friend or your feed, a preview appears that reflects the contents of the link.

To accomplish this, my SvelteKit app:

• Loads font assets into memory
• Transforms an HTML component into vector graphics
• Renders that SVG into a PNG
• Plugs the appropriate information into OpenGraph and Twitter meta tags.

All of this on a fully automated basis, running as part of the generator process. I don’t need to do anything but write and push to GitHub. Special thanks to Geoff Rich, whose excellent walkthrough explained the technology and got me started on the right path.

Converting Markdown to HTML and RSS

As standard with static site generators, I write my posts in Markdown, including metadata like title and date at the top.

From this, I can convert everything into the fully-realized site you’re reading right now. In this I owe another debt, to Josh Collinsworth, whose excellent walkthrough of building static sites with SvelteKit provides the foundation for my new home on the web. It explained everything I needed to know and do, and I wouldn’t have escaped the straitjacket of Ghost without this help.

Access a treasure trove of resources

I’ve found icon libraries, a date formatter, and even a component for building the newsletter subscription modal that pops up when you click the “subscribe” link.

Svelte’s community has put serious love into the ecosystem, so there’s always a helping hand to keep your project moving.

The power to build a product

I’ve been building digital products for 20 years, but never got to the fluency I wanted on the web.

This feels different. I feel like I can imagine the thing I want, and then make it happen, and then hand it to you.

For example, I always wanted to do link-blogging posts on my Ghost site, but Ghost was quite rigid about how it structured posts.

Now, I can imagine exactly how I want a link post to behave, down to its presentation and URL structure, and then build that. I can even decide I want to offer you two versions of the RSS feed: with and without link posts. It’s all here and working.

But despite this power, I don’t have to worry about a server falling over. Someone else holds the pager.

I feel like I’ve been struck by lightning. I feel like I’m in love. Contentment and giddiness all at once.

Anyway, call it a 1.0. Hit me up if you see any bugs.