メインコンテンツへスキップ

HugoとPageBundleとObsidian

·1371 文字·3 分
Hugo Obsidian Templater
目次

はじめに
#

普段、Obsidianでメモを作成し、それをHugoで静的ページとして公開しています。その際、内部リンクの変換やリソースの配置場所について検討が必要です。特に画像については、一旦自分の中で最適解が出たので、その方法をまとめます。

画像ファイルの置き場所
#

Hugoの記事内で画像を参照する方法は、絶対パスでリンクする方法と、Page Bundleを利用する方法があります。画像と記事の関連性をフォルダ構造で明確にしたかったため、Page Bundleを利用することにしました。

Page Bundleには、Branch BundleとLeaf Bundleの2種類があります。Branch Bundleの方が、同じフォルダに記事のリソースのみが存在する状態になるため、削除時の管理が容易になると考え、こちらを採用しました。

参考サイト: Hugo PageBundles

記事作成の効率化
#

記事作成時には、クリップボードにある画像をエディタ(主にObsidianかVSCode)に貼り付けることが多いです。

VSCodeでは、デフォルトでファイルと同じフォルダに添付ファイルが保存されます。Obsidianの場合も、設定で新規添付ファイルの作成場所を現在のファイルと同じフォルダに指定しています。

ここで問題となるのは、Obsidianで作成したメモをHugoの記事として公開する際に、毎回記事用のフォルダを作成する必要があることです。以前は、permalinkを利用してフォルダを全て直下に配置していましたが、フォルダ作成の手間を省きたいと考えていました。

例えば、以下のようなフォルダ構造を想定した場合、my-postフォルダを作成し、その下に移動する作業が煩雑です。

content/
├── about
│   └── index.md
└── posts
    ├── my-post
    │   ├── content-1.md
    │   ├── content-2.md
    │   ├── image-1.jpg
    │   ├── image-2.png
    │   └── index.md
    └── my-other-post
        └── index.md

そこで、ObsidianのプラグインであるTemplaterを利用して、この作業を効率化しました。

template用のフォルダを作成し、その中に以下のコードを記述します。Frontmatterの部分は必要に応じて調整してください。Templaterの設定でこのテンプレートを呼び出すように設定すると、メモ作成中にコマンドパレットからOpen insert template modelを実行することで、メモが投稿用のフォルダに移動し、ファイル名がindex.mdに変更されます。

この方法で、手元のメモはDaily noteとして管理し、Hugo用の記事はTemplaterで移動するというワークフローが確立できました。

<%*
let qcFileName = await tp.system.prompt('フォルダ名')
let titleName = qcFileName
await tp.file.rename('index')
let baseFolder = "/contents/post/"
let dayPreffix = tp.date.now("YYYY-MM-DD") + '_'
let newFolder = `${baseFolder}/${dayPreffix}${titleName}/` 
await tp.file.move(newFolder + `index`);
let title = titleName
let description = ""
let date = tp.date.now("YYYY-MM-DD")
let image = ""
let tags = ""
let draft = false
setTimeout(() => { app.fileManager.processFrontMatter(tp.config.target_file, frontmatter =>{ frontmatter["title"] = title; 
frontmatter["description"] = description; 
frontmatter["date"] = date; 
frontmatter["image"] = image; 
frontmatter["categories"] = categories; 
frontmatter["tags"] = tags;
frontmatter["draft"] = draft;
}) }, 200)
-%>

参考サイト: Obsidian Forum: Creating Page Bundles in One Click

まとめ
#

現在、ObsidianとHugoを両方同時に使用する方法を試していますが、内部リンクの問題や、index.mdでファイルが統一されているためにGraph Viewが正常に表示されないなど、Obsidianの利点を十分に活かせていないと感じています。今後は、メモ用と投稿用のファイルを明確に分け、変換ツールを利用して投稿用のファイルを作成するのが理想的だと考えています。

関連記事

Obsidian VaultをGoogle Driveで同期する
·455 文字·1 分
Obsidian Google Drive Sync