Deploy

Overview

Automate Quartz site deployment with visual verification to ensure content renders correctly before confirming success.

Workflow

Step 1: Build the Site

To build the Quartz static site, execute:

npx quartz build

To handle build warnings, note any "isn't yet tracked by git" warnings but proceed unless actual errors occur. Build errors require resolution before continuing.

Step 2: Commit and Push Changes

To generate a commit message, analyze the staged changes:

git diff --stat

To create an appropriate commit message:

• For new articles: feat: add {article-name}
• For content updates: fix: update {description}
• For style changes: style: {description}
• For documentation: docs: {description}
• For multiple changes: summarize the primary change

To commit and push:

git add . && git commit -m "{generated-message}" && git push origin v4

Step 3: Verify Deployment with Playwright

To allow GitHub Actions deployment to complete, wait 10 seconds:

mcp__playwright__browser_wait_for(time: 10)

To navigate to the deployed site:

mcp__playwright__browser_navigate(url: "https://berom.net")

For verifying a specific article, navigate to its permalink URL.

To capture light mode verification:

mcp__playwright__browser_take_screenshot(filename: "deploy-light.png")

To switch to dark mode, locate and click the theme toggle:

mcp__playwright__browser_snapshot()

Identify the dark mode button (typically labeled "Dark mode" or "Light mode") and click it:

mcp__playwright__browser_click(element: "Dark mode button", ref: "{ref-from-snapshot}")

To capture dark mode verification:

mcp__playwright__browser_take_screenshot(filename: "deploy-dark.png")

To check for issues, examine the page snapshot for:

• Missing images (img elements without proper src)
• Broken links (404 references)
• Layout anomalies

To close the browser:

mcp__playwright__browser_close()

Step 4: Handle Verification Results

On Success: Report to user:

• Commit hash and message
• Light mode screenshot
• Dark mode screenshot
• "배포 완료!" confirmation

On Failure: To handle detected issues:

1. Report the specific problem with screenshot evidence
2. Ask: "문제가 발견되었습니다: {issue}. 롤백할까요?"
3. If user confirms rollback:

git revert HEAD --no-edit && git push origin v4

4. Re-verify after rollback

Configuration

Trigger Conditions

This skill activates when the user:

• Says "배포", "배포해줘", "deploy", "publish"
• Invokes "/deploy"
• Requests to "push to production" or "update the site"