Use Astro and Obsidian to boost your personal blog!

Published: at 03:30 PM

Introduction

For a long time, I’ve wanted to create a personal technical blog to share the knowledge I’ve learned and the problems I’ve solved.

Finally, I’ve combined Astro and Obsidian to build a static personal blog.

This allows me to enjoy the excellent Markdown editor of Obsidian while easily and conveniently sharing my content online.

What is Astro?

Astro is an open-source, modern frontend development framework designed for building fast, scalable websites. It offers numerous powerful features. You can check out its Official Documents.

What is Obsidian?

Obsidian is a powerful knowledge management and note-taking software that focuses on building a personal knowledge base. It has a very active community, providing a rich selection of plugins to choose from. It can be described as note-taking software geared towards developers.

Step By Step Guide

Astro Setup

Follow the Astro Official Document for installation.

Template

For simplicity, I highly recommend starting with a template, which significantly accelerates the building process.

For example, the template for this blog is Astro Paper, which already includes predefined themes, content collection, etc.

Content Collection

Follow Extend with Content Collections to set up your posts folder.

If you start with a template, it most likely has this already set up!

Now run npm run dev in your project root directory, and your blog will be running at http://localhost:4321!

Obsidian Setup

Note: This section assumes you’ve already completed the basic setup of Obsidian, such as installation, creating a vault, etc.

Install Markdown Blogger

Markdown Blogger is a community plugin that allows developers to instantly push markdown notes to their local blog, portfolio, or static site project.

Go to Settings > Community Plugins > Browse to find and install the plugin.

After installation, you can configure its local project folder path as the full path to your previously set up content folder.

Configure a Hot Key

You can set up some hot keys to ease syncing between Obsidian and Astro. Personally, I’ve set:

Add Post Template

As the format for defining properties in Obsidian is the same as the schema for each post in Astro, you can enjoy a nice UI supported by Obsidian rather than deal with cumbersome paragraphs to satisfy Astro’s post schema.

You can create an Obsidian template with properties according to the schema, and give them default values, like:

---
title: "My First Blog Post"
pubDate: 2022/02/12
description: "This is the first post of my new Astro blog."
author: "Astro Learner"
image:
    url: "https://docs.astro.build/assets/full-logo-light.png"
    alt: "The full Astro logo."
tags: ["astro", "blogging", "learning in public"]
---

Then, whenever you want to start a new blog, just add a new note, insert the template, and you’re ready to write your post!

Once you’ve finished editing in Obsidian, hit Opt + P (if configured), and boom! Your changes will appear on your website instantly.

Follow Up

Til here, you’ve already build a personal blog and an editing workflow from Obsidian to your blog site.

You can put it online just like deploying other static websites.

For example, Vercel is a fantastic tool to use, which has an official integration with Astro. Check out https://vercel.com/docs/frameworks/astro for more details.