Obsidian + Digital Garden + Github + Cloudflare or Vercel = Free Publishing!
1. Install & Configure Digital Garden Plugin
- Installation: Go to Obsidian Settings -> Community plugins -> Browse, search for "Digital Garden" and install it.
- Configuration:
Digital Garden > GitHub Repo:Enteryour-github-username/your-repo-name. Create an empty repo on Github if you don't have one.Digital Garden > GitHub Token:Create a Github Personal Access Token (PAT) withreposcope. Store this token carefully.Digital Garden > Domain:Use the free domain from Cloudflare Pages (see next step).
2. Prepare your article
- Frontmatter: Add frontmatter to the beginning of each note you want to publish. For example:
---
dg-publish: true
title: My first article
description: Introduction to Digital Garden.
---
Article content goes here...
- Publish: Right-click on the note, select "Digital Garden: Publish current file". The plugin will automatically commit and push to Github.
- Wait about one minute for Cloudflare to update the article. Then, use
Command palette > Digital Garden: Copy Garden URLand open the copied link in your browser to view the article.
- Wait about one minute for Cloudflare to update the article. Then, use
3. Configure Cloudflare Pages
- Create project: Log in to Cloudflare, go to Pages, select "Create project".
- Connect Github: Select your Github repo.
- Build settings:
- Production branch:
main(or the branch you use for publishing). - Build command:
npm run build - Build output directory:
dist
- Production branch:
- Deploy: Cloudflare will automatically deploy your website.
4. Configure Domain (optional)
- If you already have a domain, point your DNS to Cloudflare.
- If you don't have one, Cloudflare Pages provides a free domain
your-project-name.pages.dev.
Notes:
- Links: Internal links in Obsidian will automatically be converted to web links.
- Templates: Create templates for new notes to automatically add frontmatter, using Templater Obsidian Templater
- Customization: Learn more about other configuration options of the Digital Garden plugin to customize the interface and functionality.
