theasthai.org

ObsidianからQuartz+GitHub Actions経由でXserverにデプロイする

5 min read

対象読者

  • Git/GitHub・Xserver・Quartz・Obsidianそれぞれで何ができるのか分かっている人
  • とりあえず、上記4つのソフトウェアで自分のブログを公開し、書くことを始めたい人
  • コマンドラインツール(Terminal, iTerm等)・CUIが使える人。

0. 概観

Obsidianで書いた思考の断片とそれらのつながりを、Git/GitHubで管理し、静的サイトジェネレーターであるQuartzを用いて、Xserverの自分のドメインにデプロイするという流れです。GitHub Actionsを使うことで、ビルドやデプロイ作業の自動化を図ります。

1. 事前準備

  • GitHubにこのプロジェクト専用のリポジトリを作成してください。
  • Xseverに契約して任意のドメインを取得し、FTP情報が閲覧できる状態にしてください。

2. Quartzとリポジトリの接続

git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create
# list all the repositories that are tracked
git remote -v
 
# if the origin doesn't match your own repository, set your repository as the origin
git remote set-url origin REMOTE-URL
 
npx quartz sync --no-pull
  • この時点で、該当リポジトリにQuartz周りのファイルたちがpushされているはずです。

3. QuartzとObsidianの接続

    1. で作成したQuartzプロジェクトの中にあるcontentディレクトリを、ObsidianのVault(保管庫)として追加してください。その際、indexという名前のファイルがすでに作成されています。
  • 試しに、“Hello World”とindex内に記述しておきましょう。下記のような感じです。
---
title: "{{title}}"
draft: false
tags: []
date: "{{date}}"
---
 
Hello World.

4. Xserverの設定

  • サーバーパネル > ホームページ > .htaccess編集を開いておきます。
  • HostingのSelf-HostingのセクションにあるUsing Apacheの記述をコピーしてください。
RewriteEngine On
 
ErrorDocument 404 /404.html
 
# Rewrite rule for .html extension removal (with directory check)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI}.html -f
RewriteRule ^(.*)$ $1.html [L]
 
# Handle directory requests explicitly
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)/$ $1/index.html [L]

5. GitHub Actionsでビルドとデプロイを自動化

  • Quartz > Hostingを参考にします。
  • [repo-name]/.github/workflows/deploy.yml([repo-name]は自分のリポジトリ名に変えてください)を作成し、下記のように記述してください。([自分が取得したドメイン名]を変えてください。)
name: Deploy Quartz site to Xserver
 
on:
  push:
    branches:
      - v4
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
 
      - name: Install Dependencies
        run: npm ci
 
      - name: Build Quartz Site
        run: npx quartz build
 
      - name: Deploy to Xserver via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./public/
          server-dir: /[自分が取得したドメイン名]/public_html/

6. テスト

[~/.../[repo-name]]
$ npx quartz sync
  • 上記のコマンドを実行し、1~2分後に[自分が取得したドメイン名]へアクセスして、“Hello World”が表示されているか確認してください。
  • 表示されていない場合は、リポジトリ > Actionsタブ からどこのプロセスで何のエラーが起こっているかを確認し、解決を試みてください。

7. 今後

  • 今後は下記を実行するだけで、Obsidianに書いた内容をXserverでホストしている自分のドメイン上で表示することができます。draftの可否で、記事の公開・非公開を決めることができます。(参考：Authoring Content)
[~/.../[repo-name]]
$ npx quartz sync

関連記事

Graph View

Backlinks