How to Publish Obsidian Notes for Free (Next.JS / Tailwind CSS)

By the end of this tutorial, you’ll have a github repository that will automatically publish notes to your custom website everytime you upload new notes to the publish folder.

Step-by-step instructions to setup your blog

  1. Fork the repository linked-blog-starter-md repository. This repository is where the publishing occursfork-linked-blog-starter-md.png
  2. Create a Vercel account then go to your dashboard then (Add New… > Project)
  3. Import the repository you just forked
  4. In the “Configure Project” settings (before you deploy), set the “Framework Preset” to Next.JS . Then click the “Deploy” button.configure-project-vercel.png
  5. After clicking the Deploy button, you’ll see that the deploy failed. That’s as expected.
  6. OPTIONAL: Go to your dashboard, then click on the project you created and disconnect the git repository (Settings > Git > Disconnect)disconnect-repo-vercel.png
  7. Then, get the account id, project id and token from vercel
  8. Now with the account id, project id, and token, go back to your forked repository and update Github secrets (Settings > Secrets > Actions). Add the following secrets: VERCEL_ORG_ID, VERCEL_PROJECT_ID, VERCEL_TOKEN github-secrets-vercel.png
  9. Finally, click “Actions”, and enable the workflowenable-actions-github.png
  10. Now whenever any notes are uploaded to the publish directory of the repository, they are automatically published online! You can find the domain in Vercel under Projects.

Note: Make sure you don’t delete the /publish/home.md file as that is your “landing page”

Optionally, you can:

6 Likes

Another alternative: Share the graph view and notes as HTML page for free with obsidian2cosma

4 Likes