·
Long Luong · 3 min read · Technology
How to Use Obsidian to Write Content for a Website
Obsidian is a powerful WYSIWYG markdown editor. In this post, I will document my setup and workflow about using Obsidian as a writer.

About Obsidian and Markdown
Obsidian is a powerful note-taking tool with various templates and plug-ins. The best thing about Obsidian is it uses Markdown to store content, which is great because Markdown:
- Is easy to edit and store.
- Is supported by many static site generators/blog frameworks.
- Supports
syntax. - Can be easily converted to HTML and displayed on the web with custom styling.
Using symlinks to link content folder to Obsidian vault
Problem
The source code of my website is in the ~src/
folder. The project structure looks like this:
├── assets│ ├── favicons│ ├── images│ └── styles├── components│ ├── blog│ ├── common│ ├── gallery│ ├── ui│ └── widgets├── content├── data│ ├── gallery│ └── post├── layouts├── pages│ ├── [...blog]│ │ ├── [category]│ │ └── [tag]│ └── gallery└── utils
My contents are in the data/
folder, where all blog posts are markdown files in the data/post/*.md
folder and most of my images are linked from either in the assets/
or data/gallery/
folders.
Obsidian allows us to open that data/post/
folder to edit Markdown files directly, but this approach has one major drawback. Obsidian can not see linked images in these images directories.
If we use Obsidian to open the whole ~src/
directory, then the javascript, CSS, and other unrelated files and folders will also show up in our vault. What I want is to focus on writting contents in Obsidian, because otherwise, I can edit the whole project in Visual Studio Code.
Solution
My solution is to use symlinks to create mirrors of assets
, gallery
, and post
folders inside my Obsidian vault.
cd "Obsidian_Vault/"ln -s "~/src/data/post/" postln -s "~/src/data/gallery/" galleryln -s "~/src/assets/" assets
This solution achieves two things. First, the source Markdown files are still in my website’s folder, connected to Git with version control. Second, the Obsidian vault correctly shows relevant mirrors of these files. When I edit or create a new post in Obsidian, the change will automatically appear in the source folder.
Solution 2
The solution above has one major disadvantage. We can not access blog posts from phone.
An alternative solution is to store all the assets
, gallery
, and post
inside the Obsidian Vault, then copy the posts to the src
folder when we want to push new posts to the remote server and trigger build.
To do this, in my package.json
in src
, I add the following scripts:
"scripts": { "content-copy": "cp -r 'Obsidian/post' src/data/ && cp -r 'Obsidian/gallery' src/data/ && cp -r 'Obsidian/assets' src/",
"content-commit": "git add . && git commit -m 'add contents'",
"content-push": "git push",
"content-deploy": "npm run content-copy && npm run content-commit && npm run content-push",},
This way, we can run npm run content-deploy
to trigger automatically copy contents, commit, and push this code to Git Hub.
Enhance the experience in Obsidian
Now that I can write content using Obsidian, I use the following Templater to automatically create md
files with the correct frontmatter used in my web builder.
<%*const postTitle = await tp.system.prompt("Post Title");const postExcerpt = await tp.system.prompt("Post Excerpt");const today = tp.date.now("YYYY-MM-DD");// Generate slug by replacing unwanted characters and spaces with hyphensconst slug = postTitle .toLowerCase() .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens .replace(/^-|-$/g, ''); // Remove leading and trailing hyphensawait tp.file.move(`999 Post/post/${slug}`);%>---publishDate: <% today %>updateDate: <% today %>draft: truetitle: <% postTitle %>excerpt: <% postExcerpt %>image: "~/assets/images/default-blog-image.png"category: Blog Posttags: untitleauthor: Long Luong---
That’s it. Now, I can focus on writing content inside Obsidian without worrying about the coding side of the project.