Blogging with Obsidian, Gatsby and Nextcloud

Finding the motivation to blog has always been hard for me. Sometimes, because I have nothing to blog about, and that’s fair. But sometimes it is because I’m not on a computer with my Gatsby site setup, or I just want to write something down quick.

Maybe unsurprising, I have the same problem with note-taking and I’ve attempted and abandoned countless platforms. Recently I bought Nextcloud hosting for my photos and I can happily report that my photos and files are synchronized nicely. Then I discovered Obsidian and found that using Nextcloud to sync my notes allowed my to have them everywhere.

Obsidian Example

Obsidian is a markdown editor, with a twist. It offers zeitgeist or outliner features that otherwise were limited to expensive tools or org-mode in Emacs.

I use it for work, for my daily notes, recipies and now recently, blogging. In case you’re curious of the theme, it’s California Coast and a few plugins. Send me a DM if you want the list.

What I wanted from the workflow

Write stuff in Obsidian on any of my computers.
Add frontmatter tags to my blog-post.
Go to bed and have my site automatically updated if there are any new posts.
Wake up the next morning and read comments about my blog post.

If you’re thinking…

Over-engineering

Then you’re absolutely right. But if you can’t overengineer your personal projects, then there is something wrong with the world. Image credit.

Before we get started

You can skip this if you don’t plan on repeating my experiment.

I must add that this isn’t exactly production ready, since I had to modify some plugins to make this work. Proceed at your own risk.

Install or sign up for Nextcloud
Install Nextcloud client
Install Obsidian
Setup a new Gatsby site or use an existing one.

Setting up your vault

I have a one big vault in Obsidian and source my blog posts from blog/. So anything in there will get picked up by Gatsby (more on that later). Nextcloud will sync your files across all of your computers.

Writing Markdown is easy, but if you want to know more, I recommend Github’s Mastering Markdown.

Obsidian also supports drag-and-drop on images, so I just drop them into my editor and Obsidian copies the files.

Note: By default, Obsidian puts them in the root of your vault. I have “Files & Links > Default Location for New Attachments” set to “Same folder as current file”. Also be sure to set “Use [[Wikilinks]]” to “false”.

Writing blog posts

At this point you have Obsidian setup and Nextcloud syncing your files to a server. Create a new file in blog/2021/testing.md and add some frontmatter data to it.

```md
---
title: Overriding blog title
tags: ["gatsby", "nextcloud", "obsidian"]
---

## I am a test blog post

Fear my grammar skills!

```

Syncing to Nextcloud

After you’ve created your first blog-post, check your Nextcloud instance to verify the changes were synced.

This blog post on my Nextcloud instance

I use a seperate user that only has read-access to my blog directory for security reasons, but to keep things simple; I’m going to skip that part.

Enter the Great Gatsby

Installing the plugins

You need to install the following plugins for this to work.

@andrioid/gatsby-source-webdav: Allows us to fetch Gatsby nodes from webdav. This is basically this with a newer version of webdav and support for remark nodes. I tried getting a PR merged, but received no response. I’d be happy to try again if the author wishes me to.
gatsby-remark-webdav: Something i hacked together. Not ready to release on NPM yet. Only use this if you need image assets from webdav. It parses your markdown posts from webdav and searches for images. If then copies the images and makes relative links work during the build process.

npm install --save @andrioid/gatsby-source-webdav

You can copy the other plugin into your plugins/ directory if you want to use it. I may release it on NPM later.

Configuring the plugins

gatsby-config.js (in your plugins section)

[
  {
    resolve: "@andrioid/gatsby-source-webdav"
      options: {
        baseURL: `https://${process.env["BLOGDATA_BASEURL"]}/remote.php/dav/files/${process.env["BLOGDATA_USER"]}`,
        credentials: {
          username: process.env["BLOGDATA_USER]",
          password: process.env["BLOGDATA_PASSWORD"], // Please don't hardcode this
		},
		recursive: true,
		glob: "**/*.{md,jpg,jpeg,png,gif}",
		sharePath: "Documents/MyVault/Blog", // yours will vary
      },
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-webdav", // if you use it
		  "gatsby-remark-images"
        ],
      },
    },
]

When you start your Gatsby dev-server, make sure to add the ENV variables you just configured, like so:

BLOGDATA_BASEURL=https://mynextcloud.example.com \
BLOGDATA_USER=myuser \
BLOGDATA_PASSWORD=secret \
npm start

Gatsby will now connect to your Nextcloud server and process all the files listed in sharePath