Koichi Kondo

Quartz セットアップメモ 2

4 min read

本日の作業ログ

1. 環境構築

  • Quartz 4.5.1 をローカルにセットアップ

  • Node.js v22（npm 同梱）をインストール

  • 初期化：git clone → npm i → npx quartz create

  • プレビュー：npx quartz build --serve

2. ドメイン & DNS（ムームードメイン）

  • ルート（apex）を GitHub Pages A レコード に設定
    185.199.108.153 / 185.199.109.153 / 185.199.110.153 / 185.199.111.153

  • www.koichikondo.com は CNAME → newkoichikondo.github.io
    → GitHub 側で www → koichikondo.com に自動リダイレクト

  • 反映確認：

    dig koichikondo.com A
dig www.koichikondo.com CNAME +short

3. GitHub Pages / Actions

  • リポジトリは private（公開サイトは public）

  • ブランチを v4 運用に統一（docs 準拠）

  • Pages：Settings → Pages → Source = GitHub Actions

  • ワークフロー（quartz/.github/workflows/deploy.yml）：

    name: Deploy Quartz site to GitHub Pages

on:
  push:
    branches: [ v4 ]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - name: Install Dependencies
        run: npm ci || npm i
      - name: Build Quartz
        run: npx quartz build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: public

  deploy:
    needs: build
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

  • Custom domain に koichikondo.com を登録、Enforce HTTPS 有効化

  • （必要なら）branches: [ v4, main ] にして main でも発火可能

4. Quartz 設定

  • quartz.config.ts

    • baseUrl: "https://koichikondo.com",（RSS/サイトマップのため必須）

    • typography: Noto Sans JP / IBM Plex Mono

    • filters: [ExplicitPublish()] → 公開ノートは Frontmatter に publish: true

  • 出力先は デフォルト public/（outputDir 未指定のため）

5. スタイル調整（quartz/styles/custom.scss）

  • 文字サイズを全体的に小さめへ：

    @use "./variables.scss" as *;  /* $mobile 等を使用 */
html { font-size: 15px; }
@media (min-width: 880px) { html { font-size: 16px; } }
.page .center > article {
  max-width: min(68ch, 680px);
  margin-inline: auto;
  padding-inline: 1rem;
}

  • リンクは本文色＋細い下線、見出し・本文・表・コードをミニマルに調整

  • モバイル横スクロール対策（100vw トラップ回避）：

    html { width: auto; max-width: 100%; }
html, body, #quartz-root, #quartz-body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body, #quartz-root, #quartz-body { overflow-x: hidden; }
}
#quartz-body > * { min-width: 0; }
img, iframe, pre, table { max-width: 100%; }

  • セクション一覧のグリッドをモバイルで無効化（タイトルの不自然改行を回避）：

    li.section-li > .section {
  display: grid;
  grid-template-columns: fit-content(8em) minmax(0,1fr) auto;
  column-gap: .75rem;
> 	.desc { min-width: 0; }

  @media all and ($mobile) {
    display: block;        /* グリッド解除して縦並び */
> 	.tags { display: none; }
> 	.meta { margin: .35rem 0 0; }
  }
}

6. 運用メモ

  • 公開フロー：push = デプロイ（v4 に push で Actions が自動公開）

  • Obsidian Git を使えば自動 commit/push が可能

    • Auto commit / Auto push を ON

    • 作業ブランチが v4 になっていることを確認

  • 手動の場合：git add/commit/push でも OK（npx quartz sync でも可）

  • 公開したいノートには必ず：

    ---
publish: true
---

7. トラブル対応記録

  • Node バージョン不一致（Expected ≥22 / Got 20）→ Actions で Node 22 を指定

  • pnpm 未検出エラー → ドキュメント準拠で npm に統一（npm ci）

  • Sass 変数未定義（$mobile）→ @use "./variables.scss" as *; を custom.scss 先頭に追加

  • モバイル横スクロール → html{width:auto} と overflow-x: clip で解消

所感

  • Obsidian 連携で執筆→公開までが軽い

  • スタイリングがシンプルに上書きでき、エッセイ向けの読みやすさを出しやすい

  • 独自ドメイン + GitHub Pages で運用コストがほぼゼロなのが良い

Graph View