Billeder i blog post fra Obsidian

Plan for opbygning

Plan er at lave en temp i Obsidian hvor jeg kan have mine “docs”/guide liggede som jeg nemt kan over føre til min site sådan jeg kan tilgå det alle steder fra og andre også kan se med.

Krav

Hjemmeside med SSH adgang
Maskine med Hugo og Obsidian

Billeder

En af grunde jeg godt kan lig at bruge Obsidian er jeg jeg nemt kan indsætte billeder ind i min markdown fil. Det gør det meget naturligt for mig da jeg godt kan lige at se ting med billeder og grafer og sådan.

For at kunne få det over på en hjemmeside bruger jeg dette python script fra networkchuck [^1] som jeg har ændret lidt i.

import os

import re

import shutil

  

# Paths

posts_dir = "/Users/rasmus/Library/Mobile Documents/iCloud~md~obsidian/Documents/Blog/"

attachments_dir = "/Users/rasmus/Library/Mobile Documents/iCloud~md~obsidian/Documents/Blog/"

static_images_dir = "/Users/rasmus/Library/Mobile Documents/iCloud~md~obsidian/Documents/Pics/"

  

# Step 1: Process each markdown file in the posts directory

for filename in os.listdir(posts_dir):

if filename.endswith(".md"):

filepath = os.path.join(posts_dir, filename)

with open(filepath, "r") as file:

content = file.read()

# Step 2: Find all image links in the format ![Image Description](/images/Pasted%20image%20...%20.png)

images = re.findall(r'\[\[([^]]*\.png)\]\]', content)

# Step 3: Replace image links and ensure URLs are correctly formatted

for image in images:

# Prepare the Markdown-compatible link with %20 replacing spaces

markdown_image = f"![Image Description](/images/{image.replace(' ', '%20')})"

content = content.replace(f"[[{image}]]", markdown_image)

# Step 4: Copy the image to the Hugo static/images directory if it exists

image_source = os.path.join(attachments_dir, image)

if os.path.exists(image_source):

shutil.copy(image_source, static_images_dir)

  

# Step 5: Write the updated content back to the markdown file

with open(filepath, "w") as file:

file.write(content)

  

print("Markdown files processed and images copied successfully.")

Image Description

Links [^1] https://blog.networkchuck.com/posts/my-insane-blog-pipeline/