はじめに
だいぶ前から個人ブログ的なものを構築したかったのだけれど、自分で作ろうとして挫折したり、テンプレを使用するのはなんとなくいやだ。と思っていた。 obsidianを使い始めて、プラグインだとかファイル配置について調べていると、どうやらobsidianでwebサイトが作れるらしい。まぁ、ただのmarkdownエディタなのだから当たり前なのだけど。調べた結果、今この構成で運用を始めてみよう、と思っているところである。
技術構成
quartzというwebサイトを自宅で立てているgitea actionsでビルドしてcloudflare pagesにデプロイしている。 githubにそのままアップロードして管理しても良かったのだけれど、せっかくミニPCを購入して自前のCI/CD環境を構築したので実際に使いたかった。
構築手順
現時点だとquartzはNode v22とnpm v10.9.2を要求してくる。 インストールは以下のコマンドで行える。
git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz createめちゃくちゃ簡単。以下コマンドで起動して、localhost:8080にアクセス。
npx quartz build --serveすんなり起動できた。あとはcontentフォルダにmarkdownファイルを投げ込んでいけば簡単に記事が作れる。便利。 ただ、githubからクローンして構築するので.gitフォルダが残っている。quartzにcontributeするわけでもないので削除してgit initした。リモートブランチは自宅giteaのリポジトリに指定。
git init
git commit -m "first commit"
git remote add origin http://192.168.1.xx/xx.git
git push -u origin main.gitignoreはquartzをクローンしてきたときに入ってたやつが良さげだったのでそれをそのまま使っている。 ひとまずquartz側の初期設定は完了。
obsidianとgitで記事管理
obsidianで新しくvaultを作って、gitプラグインをインストール。obsidian vaultのフォルダ直下でgit init。 さっき設定したquartzのリポジトリをサブモジュール化する。こうすると管理しやすいらしい。
git submodule add http://192.168.1.xx/xx.git追加したら、obsidianのgitプラグインの設定→Advanced→Update submodulesを有効化。こうすることでsubmodulesをpullしたりしてくれるらしい。イベント発火のタイミングはよくわからない。有識者、教えてくれると助かるます。
あとはmarkdownファイルにプロパティを自動で生成してもらうためにTemplaterを導入。ここらへんは調べたらいっぱい出てくるので割愛。私が使ってるTemplateを載せておく。
---
title:
id: <% tp.file.creation_date("YYYY/MM/DD (dd)") %>
aliases: []
tags: []
created: <% tp.file.creation_date("YYYY/MM/DD (dd)") %>
updated: <% tp.file.last_modified_date("YYYY/MM/DD (dd) HH:mm:ss") %>
draft: "false"
---quartzの機能でdraftというのがある。これをtrueにすると記事を公開しないようにできる。
obsidianの初期設定はこんな感じ。
ビルド自動化・公開
私は前にcloudflareでドメインを買ったりしていたのでcloudflare pagesにした。ただ、cloudflare pagesはgithubかgitlabじゃないとgit連携ができない。
そこで、gitea actionを使ってビルド、wranglerでデプロイするようにした。
name: Deploy
on:
push:
branches:
- main
jobs:
Deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0 # Fetch all history for git info
- uses: actions/setup-node@v4
with:
node-version: 22
- name: Install Dependencies
run: npm ci
- name: Build Quartz
run: npx quartz build
- name: Deploy
uses: cloudflare/wrangler-action@v3
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
accountId: ${{ secrets.CF_ACCOUNT_ID }}
command: pages deploy public --project-name=blog
gitea actions的な機能を始めて使ったのでスクリプトの書き方が怪しい。 API TokenとかAccountIDを直で書くのはやばいと思ったので環境変数に埋め込んだ。 あとはcloudflare pagesでプロジェクトを作れば、git pushしたときに勝手にビルドしてwebサイトにしてくれる。
最後に
思っていたより簡単に作れたし、公開できた。暇があれば作ってみることをおすすめする。