Having a website is great! So how do you make one using Obsidian?
There are multiple ways to create one, most are free, some are more complex than others but give you more customization options.
Obsidian is a note-taking tool built on top of markdown files, so what we are actually doing is creating a website based on markdown files. Instead of Obsidian you could also use any program that can edit markdown files, like MarkText, Visual Studio Code, HedgeDoc, or anything else.
Overview of different ways to make a website with Obsidian
| Tool name | Description | Complexity | Cost |
|---|---|---|---|
| Obsidian Publish | The simplest way to create your site. This feature is offered by the Obsidian team as part of a monthly subscription. | Low | Monthly subscription |
| Quartz | Converts markdown content into a website. Built to work with Obsidian vaults. Integrates well with Obsidian syntax, e.g. [[]] links. | Medium | Free |
| Astro Starlight | Use a web framework / static-site framework with an existing “theme” such as Astro Starlight. | Medium ~ Higher | Free |
| Custom coded website | Fully develop the website yourself and use a library or framework to render your markdown files. | Maximum | Free |
Will mention further alternatives to these in the following sections of the respective tool.
1) Obsidian Publish
The most simple and straightforward way to get your Obsidian vault online as a website is through Obsidian Publish. It’s an official feature included in the Obsidian subscription.
Negatives here are the price of the monthly subscription and that customization is limited.
2) Quartz
Quartz turns markdown files into a website. It has been built to work with Obsidian.
It’s not a professional project, but the end result is still nice.
Quartz is a bit more difficult to set up than Obsidian Publish, but overall still easy. You just need to go through the setup guide and create a GitHub repository for it.
3) Astro Starlight & other static-site generators
Astro is a web framework used to build websites, Starlight is a pre-built documentation theme for Astro. With this approach you get a beautiful looking “documentation” site, and all of the features of the Astro web framework, plus everything you can do with a custom coded website if you want to.
Steps needed then:
- Create a project using Astro Starlight.
- Go through the setup guide.
- I prefer including the Obsidian vault as a GitHub submodule, I wrote a guide on how to do that. OR: You can just make the folder that contains the markdown files into a Obsidian vault and leave it at that.
- Put it online. Hosting static websites is free on providers such as Cloudflare
This is how I work on ToLearnKorean.com and my web development guide.
Possible alternatives
There are other “simple” static site generators that use markdown that you could use instead:
- Jekyll
- There’s also this pre-built template for Jekyll called Digital Garden
- Hugo
- Eleventy
Similar to Starlight, there are other pre-built documentation tools for different web frameworks that utilise markdown or MDX as well:
- Nextra - Uses Next.js and MDX. You will need this Obsidian plugin to use .mdx in Obsidian.
.mdxis very similar to.md. - VitePress - Uses Vue as its framework.
4) Custom coded
You can use something like Astro without the Starlight theme, then you will have to code everything yourself. This gets you the most degree of customization you can get, now you can do anything, but also you will have to do everything.
This blog, BryanHogan.com, has been built this way. This blogs GitHub repository is here.
For this blog I also use the GitHub submodule approach.
I want to hear your feedback! Was something confusing? Did you get stuck? Did you find this post amazingly helpful? Was it all very mid? Let me know per e-mail or at any of my social media spaces!
