WARNING
この記事はQuartz v3時点での情報です。v4での構築ログはこちら
私は普段 Obsidian でメモを取るようにしています。 ある程度まとまった内容ができたら都度 Zenn やブログに書くようにしていたのですが、記事にするぞ!と思うときちんと書かないといけないと思い腰が重くてなかなかできていませんでした。
そこで、取ったメモを雑なままでいいから公開しようと思いました。
まず選択肢としてあがるのは Obsidian Publish ですが、月$8(2023/06現在)が自分には高く、機能もそこまで必要としていないので、多少手間がかかっても無料で公開できる方法を調べました。
できたもの
- brandonkboswell/obsidian-export を使って、公開していいファイルだけをexportするようにしました
- Quartz のテンプレートを使って、マークダウンをHTMLで表示するだけでなくバックリンクやグラフも生成されるようにしました
参考にしたサイト
- Publishing your Obsidian Vault Online with Quartz
- Quartz: Create and publish your Obsidian Vault for free! : r/ObsidianMD
同様のことをしているサイト
- https://jzhao.xyz
- https://nick.groenen.me
- https://elaraks.github.io/dampcapital/
- https://blu3mo.github.io/blu3mo-quartz
Quartz のセットアップ
- Obsidian VaultをWebサイトにするツール
- バックリンクやマップに対応している
- Hugo を使っている
セットアップは基本的にドキュメントに書いてあるとおりですが、以下のように進めました。
リポジトリの作成
Obsidian Vaultを直接公開するのではなく、公開用リポジトリを別途作ってそちらにコピーすることにします。そうすることで、公開範囲を絞ったり、Vault側にはなるべく影響を与えないようにしています。
https://github.com/jackyzha0/quartz をForkして作成しました。
このとき、 Copy the
hugo branch only
のオプションはチェックを外します。
リポジトリ名は digitalgarden
としました。これをGitHub Pages で公開するとhttps://ikorihn.github.io/digitalgarden/
でアクセスできるようになります。
GitHub Pages で公開するための設定
- Branchをmain、ディレクトリを/rootに設定
.github/workflows/deploy.yaml
のname: Deploy
を修正しますhugo
ブランチにpushすると、GitHub Actionsでビルドしたファイルがmain
ブランチの/public
ディレクトリに置かれるようになっていますpublish_branch
をmain、cname
をikorihn.github.io
にしました
- GitHubリポジトリのSettings > Pagesで公開対象を設定します
Obsidian Vaultから公開したいファイルのみをコピーする
公開したいファイルのみを Hugo で扱えるファイルに変換して、公開用リポジトリにコピーします。 それにはこちらを使いました。
- Rust製
- Obsidian Vault内のファイルを標準的なMarkdownに変換して別のディレクトリにコピーする(
[[]]
を標準のリンクに変えるなど) .export-ignore
を置くことで、export対象から除外することができる
git cloneして cargo install --path .
して ~/.cargo/bin
にPATHを通したら、
公開用リポジトリのルートで以下を実行して、 ./content
配下にObsidianの中身をコピーします。
content
は HugoでWebサイトのコンテンツを配置するディレクトリ です。
コピーができたら hugo
ブランチにcommitしてpushしましょう。
これでGitHub Actionsが動いて、少し経つとGitHub Pagesのドメインで見れるようになっているはずです。
公開フローを整える
Obsidian Vaultからファイルをコピーする → commitしてpushする
のをそれぞれmakeで実行できるようにしておきます。
自分の場合は、Obsidianを ~/memo
においているのでこちらのようになります。
その他やったこと
基本的に公開するために必要なことはここまでとなります。
自分の場合、過去作成してきたマークダウンファイルの書き方がよろしくなかったりHugoの都合に合わなかったりしたため、まとめて修正を行いました。
ファイル修正
- Hugo のためにfrontmatterを整備しました
title
(ページタイトル)date
(作成日)lastmod
(更新日) を各ファイルに入れましたtitle
は元々入れていたので、抜けているファイルに手動で追加- https://github.com/brandonkboswell/obsidian-export/tree/title_frontmatter を使って
--add-titles
オプションによってexport時に付与するのもアリ
- https://github.com/brandonkboswell/obsidian-export/tree/title_frontmatter を使って
date
をyyyy-MM-ddTHH:mm:ssZの形式に変換- 元々
yyyy-MM-dd HH:mm
っていう変な形式にしちゃってた fd -e md | xargs -i sed -i -r 's/^date: (.*) (.*)$/date: "\1T\2:00+09:00"/' {}
- 元々
date updaed
をlastmod
に変換fd -e md | xargs -i sed -i -r 's/^date updated: (.*) (.*)$/lastmod: "\1T\2:00+09:00"/' {}
- 画像ファイル名のスペースを除去
- Hugo で埋め込むときにスペースがある場合、
![Pasted image 22222222222.png](</images/Pasted image 22222222222.png>)
のように<>
で囲む必要がある rename 's/ /-/g' *
- https://github.com/reorx/obsidian-paste-image-rename を使って、今後画像を貼り付けるときにはスペース除去するようにする
- obsidian-export がスペースを%エンコードしてくれたので結果的には不要だったが、取り扱いはしやすいのでこのままにする
- Hugo で埋め込むときにスペースがある場合、
サブディレクトリにあるファイルへのリンクが貼られない
Vaultのルート直下にあるファイルについてはちゃんとリンクが機能するのですが、ディレクトリの下のファイルに関しては遷移できませんでした。
最初に試したこと
- Hugo relative link で説明してくれている内容をrender-links.html, render-images.htmlに書いたらOKだった
- ただgraphやbacklinkの方は、ノードをクリックするとルートからの相対に遷移してしまい、サブディレクトリには遷移しなかった。
直した
絶対パスでないとだめと公式に書いてありました…
- Set the New link format to Absolute Path in vault. If you have a completely flat vault (no folders), this step isn’t necessary.
- Turn on the Automatically update internal links setting.
Wikilink([[note/xxxx]]
)でも問題なさそうなのですが、自分の環境ではリンクされなかったため、Markdownの絶対パスでのリンク([xxxx](note/xxxx.md)
)に変えたところ、graphが正しく表示されるようになりました。
これのために、全ファイルのWikilinkをMarkdown Linkに変更しました。。
Obsidian WikilinkをMarkdown linkに変更した
外部リンクをカードで表示する
Zennとかで見るやつ
感想
無事Obsidianを公開できるようになりました。 更新の手間が若干ありますが、簡単なコマンドで更新できるのでさほど苦ではないでしょう。
今までブログを書いたりするのは億劫でなかなかできていなかったのですが、メモのついでに公開しているというスタンスであれば気軽に続けられそうです。
Obsidian Publishと比べてどうかというと、 まず自分でいろいろ調べて作るのが面白かったので個人的にはよかったです。 QuartzのベースはHugoですので、テーマやテンプレートのカスタマイズも自分で行えます。
ただし万人にはおすすめしません… まず構築がそこそこ手間でしたし、こういうことやっている人自体が少ないので情報があまりなく、トラブルシューティングが結構たいへんです。 自力で解決するのが難しいという場合は、素直にObsidian Publishを使うのが便利ですし機能も十分に備わっていると思います。