|
| 1 | +--- |
| 2 | +title: "From Obsidian Vault to Static Site: Automating with PowerShell & Jekyll" |
| 3 | +date: 2025-05-01 09517:20 -0500 |
| 4 | +categories: |
| 5 | + - tutorial |
| 6 | +tags: |
| 7 | + - githubpages |
| 8 | + - obsidian |
| 9 | + - powershell |
| 10 | + - jekyll |
| 11 | +--- |
| 12 | +> This tutorial is a continuation of my "Building a Website with GitHub Pages" post found [here](https://www.dearing.dev/posts/Building-a-Website-with-GitHub-Pages/). |
| 13 | +{: .prompt-info } |
| 14 | + |
| 15 | +Obsidian is a fantastic tool for note-taking and personal knowledge management. But what about sharing that knowledge? While Obsidian offers publishing option, I’m going to show you how I use a PowerShell script to synchronize my Obsidian vault to a Jekyll-powered website hosted with GitHub Pages. |
| 16 | + |
| 17 | +## Setting up your environment |
| 18 | + |
| 19 | +### Download Obsidian |
| 20 | + |
| 21 | +Download the latest version of [Obsidian](https://obsidian.md/) from their website. |
| 22 | + |
| 23 | +### Create a new vault |
| 24 | + |
| 25 | +Create a new vault in your desired location. |
| 26 | + |
| 27 | +### Create new directories in the vault |
| 28 | + |
| 29 | +1. Create a folder named `posts` |
| 30 | +2. Create a folder named `assets` |
| 31 | + 1. Create a subfolder named `img` |
| 32 | +3. Create a folder named `templates` |
| 33 | + |
| 34 | +### Update Obsidian Settings |
| 35 | + |
| 36 | +#### Files and Links |
| 37 | + |
| 38 | +1. Change **New Link Format** to `Absolute path in vault` |
| 39 | +2. Uncheck `Use [[Wikilinks]]` |
| 40 | +3. Set the **Default ocation for new attachments** to be `In the folder specified below` |
| 41 | + 1. Set the **Attachment folder path** to be `assets/img` |
| 42 | + |
| 43 | +Your settings should look something like this: |
| 44 | + |
| 45 | + |
| 46 | + |
| 47 | +#### Templates |
| 48 | + |
| 49 | +Set your **Template folder location** to `templates` |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +### Create a new template |
| 54 | + |
| 55 | +Create a new note and name it `Blog Template` or whatever you would like to call it. We are going to use this template to bootstrap our posts with the necessary frontmatter that Jekyll requires. You can start creating properties by typing `---` at the top of your new note. |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +Create the following properties: |
| 60 | +- **Title** (leave empty) |
| 61 | +- **Date** (`{{date}} {{time:HH:mm:ss}} -0500`) |
| 62 | + - You can adjust the offset to match your location |
| 63 | +- **Categories** (leave empty) |
| 64 | +- **Tags** (leave empty) |
| 65 | + |
| 66 | +When you are finished it should look like this: |
| 67 | + |
| 68 | + |
| 69 | +You can add other things to your templates if you'd like but we are going to leave it at that for now. |
| 70 | + |
| 71 | +### Back to the settings |
| 72 | + |
| 73 | +We are going to leverage the built in **Daily notes** plugin to help us create a new blog post and call the template we just created. |
| 74 | + |
| 75 | +1. Change the **Date format** to `YYYY-MM-DD-` |
| 76 | +2. (Optional:) Change the **New file location** to `drafts` (or another desired folder) |
| 77 | +3. Change the **Template file location** to `templates/Blog Template` |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | +## Writing Your First Post with Obsidian |
| 82 | + |
| 83 | +Now that all of the settings are out the way, you are ready to create your first post with Obsidian. |
| 84 | + |
| 85 | +Open **today's daily note**. |
| 86 | + |
| 87 | + |
| 88 | + |
| 89 | +You will see a note similar to the one below: |
| 90 | + |
| 91 | + |
| 92 | + |
| 93 | +Add in your title, categories, and tag and start writing your post! |
| 94 | + |
| 95 | +## Using PowerShell to Sync Your Vault to GitHub |
| 96 | + |
| 97 | +> There are definitely some better options out there, however I wanted to challenge myself to use PowerShell to automate my website deployment process. |
| 98 | +
|
| 99 | +The script automates the following tasks: |
| 100 | + |
| 101 | +1. **Post Synchronization:** Copies posts from a local Obsidian vault directory to a remote repository. |
| 102 | +2. **Image Synchronization:** Copies images referenced in the posts to the same repository and encodes the image file names. |
| 103 | +3. **Stale Image Removal:** Removes images from the repository that are no longer referenced in the published posts. |
| 104 | +4. **Git Commit and Push:** Commits the changes to the repository and optionally pushes them to a remote repository. |
| 105 | + |
| 106 | +The script can be found on my GiHub [here](https://github.com/DearingDev/toolbelt/blob/main/obsidian_sync.ps1). |
| 107 | + |
0 commit comments