·

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.

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.
  • Supportssyntax.
  • Can be easily converted to HTML and displayed on the web with custom styling.

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/" post
ln -s "~/src/data/gallery/" gallery
ln -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.

Templater
<%*
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 hyphens
const slug = postTitle
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens
.replace(/^-|-$/g, ''); // Remove leading and trailing hyphens
await tp.file.move(`999 Post/post/${slug}`);
%>---
publishDate: <% today %>
updateDate: <% today %>
draft: true
title: <% postTitle %>
excerpt: <% postExcerpt %>
image: "~/assets/images/default-blog-image.png"
category: Blog Post
tags: untitle
author: Long Luong
---

That’s it. Now, I can focus on writing content inside Obsidian without worrying about the coding side of the project.

Back to Blog

Related Posts

View All Posts »