Tags

Blog2Callout1Cheatsheet1Cloudflare1Guide2LaTeX1Markdown1Mermaid1Obsidian2Project1Quartz3

BeautyKim Blog

Quartz 블로그 포스팅 작성 가이드

4 min read

1. 프론트매터(Frontmatter) 설정

파일 최상단 필수 입력 서식.

---
title: "포스팅 제목"
date: 2026-03-04
tags:
  - Tech
  - Obsidian
description: "글의 요약 (SEO 및 소셜 미디어 미리보기에 사용)"
aliases: [별칭1, 별칭2]
draft: false
---
  • title: 문서의 제목(생략하면 파일명이 제목)
  • date: 작성일.
  • tags: 태그 리스트(클릭 시 관련 글을 모아볼 수 있음)
  • draft: true로 설정하면 로컬에서는 보이지만 실제 배포 사이트에서는 제외
  • aliases: 다른 이름으로도 이 문서를 연결할 수 있게 해주는 옵시디언 고유 기능

2. 이미지 관리 (Assets)

  • 위치: 포스팅 폴더 내 assets/ 생성 후 보관.
  • 설정: 옵시디언 ‘새 첨부파일 저장 경로’ → ‘현재 폴더의 하위 폴더(assets)‘로 자동화.
  • 링크: ![[image.png]] (가장 짧은 경로 인식 가능).

3. 마크다운 확장 문법

> 문법이 기억나지 않을 때: 📝 마크다운 & Quartz 문법 치트시트 바로가기

3-1. 콜아웃 (Callouts)

중요한 정보를 강조할 때 사용

예시

> [!info] **팁**: `custom.scss`를 활용하면 콜아웃의 색상이나 아이콘도 커스텀할 수 있습니다.
> 

> [!warning] 배포 전에는 반드시 로컬 서버에서 이미지가 잘 나오는지 확인하세요.
>

3-2. 코드 블록 (Syntax Highlighting)

언어를 명시하면 문법 하이라이팅이 적용됨

코드 블록 사용법

### 코드 블록 사용법
언어 이름을 명시하면 하이라이팅이 적용됨.

`` `typescript
// 여기에 코드 작성
function helloQuartz() {
  console.log("Hello, Digital Garden!");
}
`` `

예시

function helloQuartz() {
  console.log("Hello, Digital Garden!");
}

3-3. 다이어그램 (Mermaid)

1) 순서도 (Flowchart)

가장 많이 쓰이는 형태. 로직의 흐름이나 시스템 구조를 그릴 때 좋음

```mermaid
graph TD;
    A[글 작성] --> B{로컬 확인};
    B -- OK --> C[Git Push];
    B -- Error --> A;
    C --> D[Cloudflare 빌드];
    D --> E((배포 완료));
```

graph TD;
    A[글 작성] --> B{로컬 확인};
    B -- OK --> C[Git Push];
    B -- Error --> A;
    C --> D[Cloudflare 빌드];
    D --> E((배포 완료));
2) 시퀀스 다이어그램 (Sequence Diagram)

객체 간의 상호작용이나 API 호출 순서를 기록할 때 유용함

```mermaid
sequenceDiagram
    participant User
    participant GitHub
    participant Cloudflare
    
    User->>GitHub: Git Push
    GitHub->>Cloudflare: Webhook Trigger
    Cloudflare->>Cloudflare: Build Quartz
    Cloudflare-->>User: Site Updated!
```

sequenceDiagram
    participant User
    participant GitHub
    participant Cloudflare
    
    User->>GitHub: Git Push
    GitHub->>Cloudflare: Webhook Trigger
    Cloudflare->>Cloudflare: Build Quartz
    Cloudflare-->>User: Site Updated!
3) 간트 차트 (Gantt Chart)

프로젝트 일정이나 작업 기간을 시각화할 때 사용함

```mermaid
gantt
    title 블로그 고도화 일정
    dateFormat  YYYY-MM-DD
    section 인프라
    Quartz 설치           :a1, 2026-03-01, 2d
    Cloudflare 연결       :after a1, 1d
    section 디자인
    CSS 커스텀            :2026-03-04, 3d
```

gantt
    title 블로그 고도화 일정
    dateFormat  YYYY-MM-DD
    section 인프라
    Quartz 설치           :a1, 2026-03-01, 2d
    Cloudflare 연결       :after a1, 1d
    section 디자인
    CSS 커스텀            :2026-03-04, 3d

Graph View