たかおのおかお

ObsidianでBlog構築1

4 min read

構築方法の選択肢

以下のパターンで考えた

  • エディタ Obsidian or Notion
  • 管理 GitHub
  • デプロイ先 Cloudflare or GitHub
  • SSG方法 Astro or Quartz4

選択するときの経緯

エディタはできればVimのキーバインドで執筆したいのでObsidianを希望 コード管理はもともとGitHubで管理しているので確定 ビルドするためのFWは２つ候補があったが、デフォルトで

エディタ できれば vim で入力したいのでObsidian

デプロイ先 デプロイ先はCloudflareのほうが慣れているし、制限的にも軽いのでこちらで対応

SSG Astro MDはデフォルトで対応しているが、デザインなど含めて構築」する必要があって断念 Quartz4 こちらのほうがObsiidanの独特の記法もサポート済みらしいので採用

で、どうしたらいいんだっけ？

Quartz4の導入

Quartz公式サイト

早速Cloneしてうごかしてみる。が、早速つまる。

Node.jsバージョンが違う

動作はこのバージョンで確認できた。

# npmの更新
volta install npm@latest
 
volta list
# Node: v23.4.0 (default)
# npm: v11.5.2 (default)
# Yarn: v4.9.3 (default)

Quartzの初期設定

npx quartz create

quartz4はcontent にあるmarkdownが記事として認識されるらしい。ObsidinにBlog投稿用のディレクトリを作っておき、シンボリックリンクを貼ると良さそう。

ローカルでの確認方法

ローカルで確認したいときはこのコマンドでサーバーが立ち上がる。 ぼくは手癖で npm run dev と叩いてしまうので、package.json に追加した。

# 基本コマンド
npx quartz build --serve
 
# デバッグ用
npx quartz build --serve -v
...
 
"scripts": {
	"dev": "npx quartz build --serve -v",
	
...

トラブルシューティング

Top について

localhost:8080 にアクセスすると何も表示されないページ出てしまう。 index.md を作ってTopに表示したい内容を作るとTop相当の記事が作れることがわかった。

slug設定について

blogを作るなら slug の設計が必要になるが、検討するのはめんどくさいなぁ。 デフォルトではファイル名がslugになる様子。更にしらべてみても、ファイル名以外をslugに設定するのは難しそう。 ということでファイルの作成自体はObsidianのTemplaterを利用して設定することにした。 frontmatter も設定しておきたいのでUUIDを作成してファイル名にすることとした。 変数にしないとid設定できないのでtRの書き方をつかっている。 このテンプレートを使用してファイルを作ると blogs にファイル移動も含めて実行してくれる。

<%*
const uid = tp.user.uuid()
await tp.file.move(`blogs/${uid}`)
 
tR = `---
id: ${uid}
title: "記事タイトル"
description:
permalink:
aliases:
tags:
draft: true
author:
date: ${tp.date.now("YYYY-MM-DD")}
---
`
%>

日本語化するには？

quartz.config.tsで変更できる。以下２つを変更。

  • pageTitle
  • localeを日本語に設定

カタカナにそのまま変更になっていたのでとりあえず 「エクスプローラー」 は 「一覧」に変更。

ここまでやればひとまず快適に執筆はできるようになった。

次回デプロイ

グラフビュー