Making posting to my personal website as easy as tweeting

tl;dr: Publishing to a personal blog doesn't have to be a drag. You don't have to use a platform that someone else built for you. Kaneki is used as a case study for how to build a end to end automation tool.

A Typewriter, A Cup of Black Coffee, An Ashtray, and a Waste Bin

When evening comes around, I feel the urge to write. I've always had my best ideas in the early morning or late in the evening, when my thoughts wander aimlessly and cross-pollinate.

I prefer to write in Obsidian. Obsidian is a focused writing system, that keeps all of my best resources at my fingertips, and has insane levels of customizability to boot.

In my experience, Obsidian allows for unparalleled writing productivity.

Now, writing in Obsidian is all fine and well some evenings, but what if I want to share my writing? What if instead of writing into the void, I choose to plant a flag for a some weary traveler to find some point in the future, whether through a search engine or some social media feed suggested by some cousin or aunt in Missouri?

The obvious answer is of course to publish. But here's the thing.

Publishing is hard.

It's hard because of writing. It's hard because of editing. But mainly, it's hard because it's a very personal process.

Why Build a Tool like Kaneki

Kaneki, like many other of my automation projects, was created to fill a personal need.

I've been working really hard on my personal website for a few months now, after getting tired of posting and spending my life on Substack/YouTube/Twitter/TikTok/any content platform.

These platforms are great at what they do, but at the end of the day, they are just websites.

All these $44billion dollar websites are is some hydrated HTML with state in the backend, and perhaps some image and video hosting. They're praised as if they are "innovation", but this is simply because they're incumbent. Everyone you know is on them, they're all everyone talks or thinks about, yada yada yada.

These platforms are enticing. They're "free", cool, and have created new job titles such as YouTuber or Twitch streamer. But as we all learn early on in life, there is no such thing as a free lunch.

The Marketplace of You

Platforms come with the baggage of being controlled by others with a different incentive structure than you. Platforms exist to make themselves money, and they need you, but not you.

In other words, content platforms need someone to be posting content, which can be you, but it doesn't have to be you. Notice the subtle difference between being rewarded as a creator who owns vs. rents. They make money as long as people continue produce and consume.

In other, other words, social media platforms are licensees of an individuals content. You are not a YouTuber. You are a person who posts your videos on the platform, YouTube. The distinction is important!

All this said, there is a reason that people continue to choose to post/exist within the walled gardens of platforms.

It boils down to this: social media platforms make it stupidly easy to produce content for their platforms, and even easier to consume what others have made.[click to tweet]

Why Personal Websites Fail and Social Media Wins

Let's count the number of steps to post a tweet from your computer being off:

1. Turn on your computer
2. Log in to your computer
3. Open browser_of_choice
4. Navigate to twitter.com
5. Optional: Try really hard to resist the urge to scroll
6. Write less than 280 characters in the "Whats happening?" box
7. Hit the "tweet" button

Seven steps. And more than half of those have nothing to do with Twitter!

I could do the same for posting a blog to a self-hosted domain, but that would be an exercise in masochism.

Twitter and ilk hire interaction designers with six figure salaries to aggressively pare down the friction on the platform. Their job is to make it so easy to post or consume, you could do it in your sleep. Or more likely, within the first 10 minutes after you wake up in the morning.

This means, that as long as it is easier to post on Twitter/FB/TikTok etc. there will be no incentive to self host over simply using the convenient option.

People don’t want to run their own servers, and never will. 

My first impressions of web3

Taking back personal websites mean that you have to be able to interaction design your own process, to bring the meticulous and semi-random creative process into the disinfecting sunlight. You must be able to diagnose, to treat, and finally to maintain. The journey is an arduous one but the rewards are legendary.

As they say, the devil is in the details.

A Light Not Just At The End Of The Tunnel, But In The Tunnel Too

For those like myself, who walk in the intersection of loving to both code and write, I have great news.

We live in a Renaissance of cool tools. Thanks to NextJS, Cloudflare, mdx, etc., building a fully functioning website has never been easier or cheaper. There is a sliding scale of control one can exert with a personal website, from putting a production site up in a few minutes with a website builder like Webflow/Squarespace, all the way down to self hosting and building tools from scratch.

In the 2006-2009 era, many of my age group were fascinated by the creativity afforded by MySpace pages and the CSS/HTML we could inject. From rawr XD girls to an early iteration of the business mogul boy we see on the Internet today, everyone could carve out their own personal brand on the internet.

NB: I hate waxing nostalgic, because it implies that today is worse than yesterday. That is not true. They were both equally good and bad in their own unique way.

Today, websites are much faster, and the web is a much more streamlined place. There is much less room for creativity, at least amongst the titans who would prefer, again, that you stay within their domain.

The bullets of the Internet are everything corporations do to keep personal websites from attracting attention. They are thousands of articles telling Internet users that everywhere outside corporate walled gardens is unsafe. They are search engines providing only tiny numbers of search results for personal websites, even when their owners write articles the way the search engine companies want, design their websites the way the search engine companies want, and refrain from posting links to other websites the search engine companies don't like.

The bullets are social media sites defining articles on personal websites as blog spam and blocking accounts of website owners who try to post links. They are armies of web-crawling robots stealing bandwidth from personal web servers, making them harder for actual humans to reach during high-traffic periods. If the robots are not blocked, they can grow to nearly all of the traffic on a personal server.

The Joys and Sorrows of Maintaining a Personal Website

But thanks to the plethora of tools available, creativity can flourish again if you're willing to take the leap. You can be the creator and the distributor these days.

Now that we've sufficiently appreciated the landscape, let's zoom in on Kaneki and see how I used it to make posting to my personal site as easy as posting a tweet.

Project Constraints

Kaneki needed to do three things to be a successful project. It needed to:

1. minimize time and effort from idea to launch
2. not get in the way of writing flow
3. blocking stuff that's isn't ready for production

Minimizing time and effort from idea to launch meant studying the steps I undergo between idea and launch without judgment.

From my previous projects, I knew I strongly preferred to collect/research in Obsidian, and from there create a post in my NextJS repo where my blog is hosted.

This involved a lot of copying and pasting, renaming and tweaks. Finally, I would spin up a local server to check it out. That gave me the first vector to attack. I could start by copying what's in an Obsidian markdown file directly to VSC, or even better, I could write some logic that would transform it into the right format.

To not get in the way of writing flow, I needed a way to write in a focused place but easily see what the finished product looked like. I knew Obsidian had a plugin API so my idea was to attach to that and have a one-click deploy type functionality.

Finally, for blocking stuff that's isn't ready for production, I came up with a way to modify the yaml in VSC to follow Obsidian's lead. This would allow for me to keep projects in a draft state as long as I want them to be.

With all of these three constraints laid out in front of me, I began to work on the blogging/CMS companion tool of my dreams.

NB: If you've read this far, the next two sections discuss some of the technical details of Kaneki and are okay to skip. I think it's much more important to understand the mentality I had building Kaneki, and not get too lost in the technical details. Ideally, a tool like Kaneki will get you thinking about what you can build for yourself, since Kaneki relies greatly on a NextJS + Obsidian stack and was made, well...for me. But if you're curious, read on, soldier!

How Kaneki Works

Simply put, Kaneki is a server that reads a file from one part of my file system and writes it to another folder.

Since both NextJS and Obsidian are backed by markdown files this was relatively simple matter of upserting from a file path and extracting the relevant frontmatter:

Kaneki also has two other responsibilities:

1. starting the node server in NextJS
2. opening Chrome to the right page.

Respectively:

How Kaneki Obsidian Works

Kaneki Obsidian is a companion app to Kaneki. It's sole purpose is to call Kaneki.

I used the Obsidian plugin API because the command palette is super performant and easy to interface with inside Obsidian.

the command palette Kaneki options

Kaneki Obsidian issues two commands over a network request:

1. posting files with content and frontmatter from Obsidian. This is a "hot reload" type functionality
2. telling Kaneki what slug to open in Chrome

To post files, I made a Send to Kaneki command:

Don't Forget the MDX!

Since I'm using MDX in NextJS, I also have a list of components that I use like <Image />, <Video /> etc. To use these in Obsidian I found a great plugin called TextSnippets that remembers the syntax for me!

In Sum

I wrote Kaneki to solve a problem, and was able to introspect on my own writing and coding habits along the way.

A good tool works seamlessly, and stays out of the way so you can focus on what's important.

Let's find out how I did against my claim about making posting to my blog as easy as a tweet (from my computer being off):

1. Turn on my computer
2. Log in to my computer
3. Open Obsidian
4. Write a post
5. Add the required YML at the top of the post
6. Start Kaneki server with Alfred (i didn't talk about this, but i have a command that spins up a Kaneki server in Aflred)
7. Hit cmd+p , type "Kaneki: Send", and hit enter
8. Hit cmd+p , type "Kaneki: Open", and hit enter
9. Look at the result in Chrome, if happy with it
10. git push!

10 steps! Not bad at all :).

The takeaway: follow the lead of the interaction designers at Twitter/FB/YT/etc. They know what's up in terms of barriers of production!

---

and yes Kaneki is named after the titular character of Tokyo Ghoul