Publish from Obsidian to Github

Objective:

Create and edit a Jekyll website in Obsidian. Publish to Github without friction.

(Disclaimer: I don’t know how to code)

Note: This process also allows to publish from Obsidian to Gitbook, via Github Sync. Create a Gitbook, sync with Github, then use Github Desktop to sync with Obsidian 🤓.

Installing Jekyll on MacOS Mojave

It was a pain in the ass, but it worked eventually.

I needed:

To preview the website locally:

Uploading Code to Github

That was easy, because I did this before, and Github has a good manual on how to do it.

The website is now live at heymichal.github.io, but there are still a few things to do.

Editing with Obsidian

Open the local folder with my github page as a vault in obsidian. That was super easy. I’m now editing this post in Obsidian, then commit changes and merge via Github desktop.

Note that it takes some time for the changes to appear on the live site.

💡 I later moved the entire local folder with my site into a /web folder inside my main obsidian vault.

Setting up Netlify

The next step is to fix tags not working at all on the site. I suppose it’s because of some incompatibility between the template I started with and Github pages. I know that the template was using Netlify to deploy the site, so I guess I’ll do the same.

Super easy and works like a charm.

I now have a funky netlify url: https://sleepy-mahavira-46dee4.netlify.app/ which I can change into a custom domain with SSL, which is the obvious next step.

I also tested the speed of publishing and it works instantly. I edit in Obsidian, push with Github Desktop and it’s live.

The only trouble is that images don’t seem to be showing at all in previews on social media (I’m using this tool and twitter card validator to test). I checked the YAML frontmatter and it all seems fine to my eye:

layout: post
title: The Red Caped Girl
description: The magic happens when I tune into myself.
image: /assets/touch-of-universe.jpg
tags: [letters]

and yet, I keep getting this error:

og:image can't be found at the defined URL

I’ll troubleshoot it later.

Setting up custom domain

This was quite straightforward, even if the manual from Netlify was a bit overwhelming.

Set up custom domain, when you get the new DNS configuration login to your domain registrar and setup the new DNS configuration, and then wait for some time for the website to show up at the new address. It took around 2 hours in my case, and the site is now operational!

🎉

Troubleshooting SSL Certificate

It turns out that while the site was live, something didn’t work with the automatic SSL encryption. I went to domain settings in Netlify, clicked on “renew certificate” and less than a minute later it was working properly.

Optimising Obsidian <> Github Flow

For now I’ve been using a separate obsidian vault for my website, but actually, why not keep it all together?

I’ve created a new folder /web in my main obsidian vault and I moved the folder with website files heymichal.github.io inside.


· documentation · about