Next.jsとObsidianでホームページを作った

公開

見た目の変更はほとんどない(むしろダークモードなどの機能が減った)のだが、このサイトの中身をごっそり変えた。

これまでは、記事を登録する管理用の画面も用意していたが、管理用の画面は自分でしか使わないので適当に作っていたので、すごく使いづらくて投稿が面倒になっていた。

今回、記事を管理する画面はなくし、そこをObsidianで書くようにした。Obsidianで記事を書き、Gitでプッシュするとデプロイが実行されホームページに反映されるようにした。

実装

ファイル構成

Next.jsのプロジェクトにObsidianのVaultsをぶちこむという、非常に強引な構成になっている。Obsidianで編集するのは、マークダウンのファイルが入っている posts 以下のみ。

- posts
	- books
	- columns
	- monologues
	...
- src
	- app
		- monologues
		- columns
		- page.tsx
		- layout.tsx
	    - globals.css
	- components
	- lib
- public
	- 画像を置く

Next.jsの実装

Next.jsは性的サイトではなく静的サイトを出力する素直な構成。posts 以下のサブディレクトリごとに「ひとりごと」「コラム」「読んだ本」に分けて表示されるようになっている。

Obsidianの設定

Obsidianは記事を書くために使用するので、関係のない設定やプラグインはすべてオフにしている。

デプロイ

GitでプッシュするとVercelでデプロイされるようにしている。記事を更新するときはObsidianのGitプラグインから Commit-and-sync を行うだけでデプロイされホームページに反映される。

感想

今までObsidianで記事を書いて、Webの管理画面にコピペしてということをしていたが、Obsidianに書けばホームページに反映されるので快適になった。