Obsidian Jekyll workflow
tl;dr
Make Obsidian Vault and Jekyll directory the same. Make the notes’ filename and front matter title identical. Use Atom to push changes to Github which feeds Netlify and serves the site.💥
Obsidian is for building my body of work and tending to this digital garden. While my workflow is simple to me, it does require some setup. That’s what we’ll cover in this note.
🌱 This note is intended to help out my fellow digital gardeners who want to setup their own garden and simple workflow on MacOS. This is admittedly the first “technical walkthrough” I’ve ever written so please please please comment below or message me on Twitter with any troubles, challenges, or confusions you ran across. Enjoy!
In essence, my workflow is
Obsidian → Atom → Github → Netlify → https://refinedmind.co
Diving into my setup
This site is running on:
The words are written in Obsidian.
The backend is managed in Atom text editor.
Before getting to Obsidian however, everything starts somewhere in my digital ecosystem. Ideas improve by writing about them not by thinking about them, which is the whole purpose of this site: improving ideas.
While I have been building things on the internet my whole life, I’m not a code from stratch-type person, so I’ve built upon the foundation created by Maxime Vaillancourt, who graciously shared his Jekyll-based digital gardening template in a crystal clear walkthrough.
Here’s how I’ve connected Max’s digital garden template with an Obsidian vault running on my Mac
1. Install your tools and backend systems
- Download the Atom text editor
- Walk through Max’s digital garden setup (this takes time so get comfy and come back here when things are working)
- Install the latest version of Obsidian
- Create a new Vault in Obsidian and set the location to be the
_notesdirectory within your main Jekyll directory - Create a new directory within
_notesand name it_staging
✅ At this point you should have a working Jekyll install (Thanks Max!) and an Obsidian vault setup within the same directory as your Jekyll install.
2. Create and link two notes
Jekyll works by taking any markdown file within _notes and turning it into a static page. Since you’ve put _staging within the _notes directory, your Gibhub repo will sync the folder but it will not interfere with the functionality of Jekyll. You can use this folder for notes you’re working on but are not ready to go live on your public garden.
Make your first note
- Open your Obsidian window, right click on the
_notesfolder within the left sidebar, and make a new note. - Give it the title
my new digital gardenand include the spaces. Jekyll will process them just fine. - Copy and paste the Jekyll “front matter” to the top of the note. You’ll have to add this to every note you want to appear on your site.
--- title: --- - Add the words my new digital garden to
title:so it reads--- title: my new digital garden ---
Now the title of the markdown file (my new digital garden.md) matches the title of the note Jekyll will parse (title: my new digital garden). This is how all your links and backlinks will connect to one another when you push everything to Github.
❗️ If you find links not working when you know the notes exist, make sure the title of the markdown file matches the title within the front matter exactly.
Let’s add some content
Below the front matter copy and paste the following into the body of the note:
Welcome to my garden!
This is where I explore my ideas and share them publicly so others can read and provide feedback to help me improve my thinking.
Link to a new note
Select the text improve my thinking and type double brackets [[ which will automatically wrap that selection in brackets. That’s one way to link to new notes.
While holding COMMAND, click on that newly created link to open a new window containing a blank note that’s automatically been titled improve my thinking.
Once again copy and paste the front matter to the top of the note:
---
title:
---
🚨 Now, this is important: make sure the title of the note matches exactly to the title in the front matter. If it doesn’t, things will not link properly within Jekyll.
Your front matter on this new note should look like this:
---
title: improve my thinking
---
Write your new note
Have some fun writing a few sentences in that note and let’s move on.
3. Setup Atom editor
- Open Atom text editor
- Click File > Add Project Folder
- Select the main directory of your Jekyll installation. If you followed Max’s walkthrough, this will be the
my-digital-gardendirectory. You should now see all your Jekyll files and_noteswithin the Atom editor. - In the right window pane click the button
Create repositoryand follow the prompts to setup a git repository within the main project folder
You should now see a list of the files with Unstaged Changes. Click Stage All and watch them move down to the Staged Changes section.
4. Push changes to Github
- Enter a short note in the text box for
Commit messageJust setting up my dgtl grdn - Click
Commit to master - At the very bottom in the status bar of the editor, click
⇧Push 1to push the changes to Github
💾 Your files are off to the interwebs!
From here it will take a few minutes for Github to recognize the changes and Netlify to deploy them to your site.
Once that’s done, your digital garden should be available on the Internet via a generic Netlify URL, which you can change to a custom domain later if you’d like.
All done! Enjoy your garden!
To wrap up, your workflow for tending your garden is as follows:
- Write, edit, and link notes in Obsidian
- Commit and push changes to Github via Atom
- That’s it! Just wait for Github + Netlify to do their thing and your garden will be updated within minutes!
Thank you for following along with this walkthrough! I hope it was helpful and valuable to you, and not at all confusing.
Have fun gardening!
🌱
If my work helps you in any way, please consider buying me a coffee ☕ !