Publishing directly from Obsidian to WordPress

31st Dec, 2021

This post relates to the Obsidian WP plugin that I've developed to address the bottleneck of publishing Obsidian notes to WordPress.

I have written this in Obsidian and I'm using the plugin to publish this note to my WordPress website without any of the extra steps that I've mentioned below.

Once I've completed testing of the plugin, I will submit it to the Obsidian community plugins library for review, so that you can use it too.

Manually copying markdown from Obsidian to WordPress is a headache

The workflow to get a markdown document into WordPress isn't straightforward.

I use Obsidian every day for taking notes, but once I've got a note in a state that's ready for publication there's a roadblock to publishing it.

Currently, I need to install a Markdown plugin in WordPress then copy a note over from Obsidian manually - and again every time there's a change. If you don't use a markdown plugin in WordPress, then the process is even more laborious.

Building an Obsidian plugin to make the publication process smoother

Issues encountered

CORS

Because we are making XHR requests, the server running WordPress needs to allow cross origin requests (CORS).

This is the one big step that will probably cause the biggest headaches for most non-technical users. If you're stuck getting CORS set-up then it'd be best to speak to your WordPress hosting provider for a resolution.

There are a few ways to enable CORS, but they are all server specific. I did write a small WordPress plugin that should allow CORS but it remains untested. If you are interested you can try it out by adding the following snippet to your theme or plugin files:

add_action('init', function () {
    $origin = get_http_origin();
    if ($origin === "app://obsidian.md") {
        header("Access-Control-Allow-Origin: {$origin}");
        header("Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE");
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Headers: Origin, X-Requested-With");
    }
});

WordPress Application Passwords

WordPress has limited support for authentication options out-of-the-box.

I went for WordPress's built-in (since WordPress v.5.6) Application Password authentication mechanism.

This works quite nicely, but because Obsidian is an Electron app with no public-facing URL, we can't automatically return the generated application password back to Obsidian. This means that the user needs to copy the password and paste it into the plugin's settings manually.

WordPress REST Authentication

When authenticating with application passwords, the HTTP request passes the credentials in the authorization header using the Basic schema. Because the credentials are only Base64 encoded, only requests served over HTTPS can be used with application passwords (this is a good thing).

TypeScript

This was my first project using TypeScript. While it slowed me down initially with somewhat cryptic error messages that required a bit of Googling, I think TypeScript has really helped keep things in check by catching issues before they become problems. I'll be continuing to use it for future projects.

WordPress.com websites

I don't know if this will work with WordPress.com websites, as I don't know whether they support the same REST API and Application Password functionality that this plugin uses.

If you're interested in testing it out or think it's possible with a few tweaks, let me know and I will consider implementing it.

Future To-dos

Add support for custom fields and taxonomies
Add support for publishing to multiple WordPress websites
Add support for image uploading