Building a Blog with Obsidian, GitHub Actions, and Vercel

August 1, 2024

  • Insights
Thumbnail

How I Built a Scalable Blog System with Obsidian, GitHub Actions, and Vercel

Building a blog isn’t just about writing content—it’s about creating a workflow that’s efficient, scalable, and ready for future growth. For my blog, I combined Obsidian, GitHub Actions, Redis caching, Next.js, and Vercel to create a system that automates updates, delivers content globally, and ensures a smooth experience for readers.

Here’s how it all works.

The Blog System: How It Works

Here’s a step-by-step breakdown of my workflow:

  1. Writing in Obsidian
    • The process starts with Obsidian, where I draft blog posts in markdown.
    • Obsidian’s live preview feature is incredibly useful—it lets me see exactly how my content will look, including embedded elements like images, videos, and interactive charts.
  2. Pushing Markdown to GitHub
    • Once I finish writing, I push the markdown file to my GitHub repository.
  3. Automated Syncing with GitHub Actions
    • A GitHub Actions workflow automatically detects changes in the repo and syncs the updated content with my API.
    • This eliminates the need for manual deployment and ensures the entire pipeline stays in sync.
  4. Markdown Conversion in the API
    • The API reads the markdown files, converts them into HTML, and exposes the rendered content as JSON.
    • This decoupled architecture allows me to reuse the same content across different platforms—not just on my blog.
  5. Redis Caching for Fast API Responses
    • To optimize performance, pre-rendered HTML is cached in Redis.
    • If the content changes, the Redis cache is invalidated, ensuring users always see the latest version without delays.
  6. Rendering and Delivery with Next.js and Vercel
    • The blog frontend, built with Next.js, fetches content from the API and renders it dynamically using custom components.
    • Incremental Static Regeneration (ISR) on Vercel automatically rebuilds pages in the background whenever content is updated.
    • Pages are cached globally at Vercel’s edge locations, ensuring near-instant load times for users.

Here’s a diagram that illustrates the entire system:

Blog System Diagram

Why This Setup Works for Me

  1. Live Previews in Obsidian
    • Writing in markdown is simple, but Obsidian makes it better with its live preview feature.
    • I can embed iframes, images, videos, and other elements directly into my drafts, making it easy to visualize the final post before publishing.
  2. Automation with GitHub Actions
    • Using GitHub Actions to sync content removes manual steps from my workflow.
    • When I push a markdown update, it triggers the API pipeline, keeping everything consistent without extra effort.
  3. Reusable Content with the API
    • Exposing HTML as JSON through an API makes my content incredibly flexible.
    • I can reuse it across different platforms, like a mobile app or future projects, without tying it exclusively to the blog.
  4. Multi-Layered Caching for Speed
    • With Redis caching at the API level and Vercel’s edge caching at the frontend, the system is optimized for performance.
    • Content is always served quickly, no matter where users are located.
  5. Predictive Builds with ISR
    • Using Incremental Static Regeneration (ISR), Vercel automatically regenerates updated pages in the background.
    • My system also leverages predictive builds, ensuring that high-traffic or newly updated pages are rebuilt proactively before users access them.
Demo

What’s Next?

While this system works great, there’s always room for improvement. Here are some future enhancements I’m considering:

  1. Search Functionality: Adding a robust search feature to help users find content more easily.
  2. Real-Time Collaboration: Exploring tools to make Obsidian more collaborative for team-based writing.
  3. Dynamic Features: Introducing user interactions like comments or personalized recommendations.

Final Thoughts

This blog system is more than just a way to write—it’s a workflow designed for efficiency, scalability, and future growth. From writing in Obsidian to automated syncing with GitHub Actions, Redis caching, and Vercel’s edge performance, each tool plays a role in making the process seamless.

If you’re a developer looking to build a flexible, scalable blog system, I hope this inspires you to try something similar. And if you have ideas for further optimizations, I’d love to hear them!

TL;DR

I built a scalable blog system using Obsidian, GitHub Actions, Redis caching, Next.js, and Vercel. Here's how it works:

  1. Write posts in Obsidian using markdown with live previews for embedded content.
  2. Push updates to GitHub, triggering GitHub Actions to sync content with my API.
  3. The API converts markdown to HTML, caches it in Redis, and exposes it as JSON.
  4. Next.js fetches the content, renders it dynamically, and leverages Incremental Static Regeneration (ISR) on Vercel for fast global delivery.
  5. Multi-layered caching (Redis + Vercel edge) ensures speed and scalability.

This setup is efficient, flexible, and future-proof for expanding into new platforms or features.

Latest Entries

All Entries
Profile Photo

Contact

poom.pengcharoen@gmail.com
+66 (0) 93 124 2007
GitHubLinkedIn
Download Resume