A recent concept I shared on Farcaster garnered some interest, so I wanted to dive deeper into the details. This approach leverages several tools and services to create a decentralized, git-based “CMS” that enables editing content from virtually anywhere.
The core of the system is an Obsidian template that includes structured YAML frontmatter. File names use a Zettelkasten-inspired millisecond timestamp tag, along with a created timestamp and the initial post title.
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-meta">---</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">title:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">&quot;1671418753342&quot;</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">created:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">&quot;1671418753342&quot;</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">longform:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-literal">false</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">published:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-literal">false</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-meta">---</span></span>
Using the timestamp as the title allows most content to exist as a “journal” entry. More descriptive titles can be set when needed.
Obsidian is configured to automatically sync content with a private Github repo shortly after editing, providing continuous backup and versioning. A published flag in the frontmatter determines if an entry should be displayed publicly.
Upon pushing to the repo, a Github Action runs to upload any assets from the designated folder to a Cloudflare R2 bucket (similar to Amazon S3 but with a generous free tier).
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">name:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">Cloudflare</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">on:</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">push:</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">branches:</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-bullet">-</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">main</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">workflow_dispatch:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-literal">null</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">jobs:</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">deploy:</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">runs-on:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">ubuntu-latest</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">steps:</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-bullet">-</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">uses:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">actions/checkout@v3</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-bullet">-</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">name:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">R2</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">Directory</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">Upload</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">uses:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">willfurstenau/r2-dir-upload@main</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">with:</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">accountid:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">&quot;$<span</span> <span class="hljs-string">class="hljs-template-variable">{{</span> <span class="hljs-string">secrets.CF_ACCOUNT_ID</span> <span class="hljs-string">}}</span>&quot;</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">accesskeyid:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">&quot;$<span</span> <span class="hljs-string">class="hljs-template-variable">{{</span> <span class="hljs-string">secrets.CF_ACCESS_KEY</span> <span class="hljs-string">}}</span>&quot;</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">secretaccesskey:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">&quot;$<span</span> <span class="hljs-string">class="hljs-template-variable">{{</span> <span class="hljs-string">secrets.CF_SECRET_KEY</span> <span class="hljs-string">}}</span>&quot;</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">bucket:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">iam-bucket</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">source:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">&quot;$<span</span> <span class="hljs-string">class="hljs-template-variable">{{</span> <span class="hljs-string">github.workspace</span> <span class="hljs-string">}}</span>/Assets&quot;</span></span>
<span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-attr">destination:</span></span> <span class="hljs-string"><span</span> <span class="hljs-string">class="hljs-string">/</span></span>
With content in the repo and assets on Cloudflare, we turn to NextJS to build the frontend. Two key queries come into play: getObsidianEntries and getObsidianEntry.
getObsidianEntries fetches all entries from the designated repo and directory:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">export</span><<span class="hljs-regexp">/span> <span class="hljs-keyword">default</</span>span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>async<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>getObsidianEntries<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> token = process.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-property"</span>>env<<span class="hljs-regexp">/span>.<span class="hljs-property">NEXT_PUBLIC_GITHUB</</span>span>;
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>data<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>repository<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>object<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: { entries },
},
},
} = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>fetch<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`https://api.github.com/graphql`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>, {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>method<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`POST`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>headers<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&quot;</span>Content-Type<span class="hljs-symbol">&quot;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`application/json`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Authorization<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`Bearer <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-subst"</span>></span>${token}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
},
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>body<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>JSON<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>stringify</span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>query<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`
query fetchEntries($owner: String!, $name: String!) {
repository(owner: $owner, name: $name) {
object(expression: <span class="hljs-symbol">&quot;</span>HEAD:Content/<span class="hljs-symbol">&quot;</span>) {
... on Tree {
entries {
name
object {
... on Blob {
text
}
}
}
}
}
}
}
`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>variables<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>owner<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`GITHUB_USERNAME`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>name<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`REPO_NAME`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>first<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>100<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
},
}),
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>next<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>revalidate<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> * <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>30<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
},
}).<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>then<<span class="hljs-regexp">/span>(<span class="hljs-function">(<span class="hljs-params">res</</span>span>) =&gt;<<span class="hljs-regexp">/span> res.<span class="hljs-title function_">json</</span>span>());
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>return<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> entries;
}
A Github access token is required to query private repos via GraphQL (see Authenticating with GraphQL). Drilling into the repository object, filtered by the Content directory on the main branch, returns the desired entries. Next13’s revalidation flag keeps the content fresh.
Once entries are fetched, the content can be manipulated as needed. I parse the YAML frontmatter with gray-matter and render Markdown using react-remark, part of the expansive Unified/Remark ecosystem.
The second query, getObsidianEntry, is used for individual post pages:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">export</span><<span class="hljs-regexp">/span> <span class="hljs-keyword">default</</span>span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>async<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>getObsidianEntry<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span>slug: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-built_in"</span>></span>any<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> paths = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>getObsidianEntries<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>();
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> _paths = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Promise<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>all</span>(paths);
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> entry = _paths.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>find<<span class="hljs-regexp">/span>(<span class="hljs-function">(<span class="hljs-params">entry: <span class="hljs-built_in">any</</span>span><<span class="hljs-regexp">/span>) =&gt;</</span>span> entry.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-property"</span>>slug</span> === slug);
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>return<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> entry;
}
Ideally this would directly query GraphQL for the specific entry needed, but I haven’t yet gotten that filter to work. As a temporary solution, the appropriate entry is filtered out using the page slug (Zettelkasten tag) as the key.
And there you have it - a decentralized approach to using Obsidian as a lightweight CMS. I hope these notes prove useful for anyone interested in setting up a similar system.