메뉴
Develop and preview Hugo static sites. Use when editing Hugo templates, content, CSS, or config. Covers starting the dev server, live preview workflow, content creation, theme development, and building for production.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/delicb/bojan.delic.rs --skill hugo-dev명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Create a new blog post for the Hugo site. Asks the user for a post title and scaffolds the markdown file in the correct page bundle location ready for writing.
Review and proofread a blog post draft. Checks grammar, clarity, tone, structure, front matter completeness, and Hugo-specific issues. Use when the user wants feedback on a post before publishing.
Run a Google Lighthouse audit against the site and report actionable findings. Use when the user wants to check performance, accessibility, SEO, or best practices. Works against both the local dev server and the production URL.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | hugo-dev |
| description | Develop and preview Hugo static sites. Use when editing Hugo templates, content, CSS, or config. Covers starting the dev server, live preview workflow, content creation, theme development, and building for production. |
Always start the Hugo dev server in the background before making changes, so the user can see updates live in their browser.
# Kill any existing Hugo server first
pkill -f 'hugo server' 2>/dev/null || true
sleep 1
# Start in background, fully detached
cd <project-root>
: > /tmp/hugo-server.log
nohup hugo server --buildDrafts --bind 0.0.0.0 -p 1313 &>/tmp/hugo-server.log & disown
# Poll for startup (don't use grep -m1 or tail -f — they block)
for i in $(seq 1 10); do
if grep -q 'Web Server is available' /tmp/hugo-server.log 2>/dev/null; then
echo "Hugo dev server running at http://localhost:1313/"
break
fi
sleep 0.5
done
Important: Always use nohup ... & disown and poll with a for loop. Do NOT use or to wait — they block the terminal.
grep -m1tail -fTell the user the site is available at http://localhost:1313/ after starting.
pgrep -f 'hugo server' && echo "Running" || echo "Not running"
tail -20 /tmp/hugo-server.log
pkill -f 'hugo server' 2>/dev/null
Hugo's dev server watches for file changes and automatically rebuilds. The workflow is:
Note: Changes to hugo.toml require a server restart. Template and content changes are picked up automatically.
Blog posts use page bundles for co-located images:
mkdir -p content/blog/<slug>
Then create content/blog/<slug>/index.md:
---
title: "Post Title"
date: YYYY-MM-DD
description: "Brief summary for listings and meta tags."
tags: ["tag1", "tag2"]
draft: true # Remove when ready to publish
---
Post content in Markdown...
Place post-specific images in the same directory as index.md.
Projects, resume, and quotes are not individual content pages. They are driven by YAML data files:
data/projects.yaml — project entries (name, url, description, tech)data/resume.yaml — experience, education, skillsdata/quotes.yaml — quote entries (text, author, source)Edit the YAML files to update these sections. The templates in themes/minimal/layouts/<section>/list.html render them.
All theme files are in themes/minimal/:
themes/minimal/
├── assets/css/style.css # ALL styling — edit this for design changes
├── layouts/
│ ├── _default/
│ │ ├── baseof.html # Base template (html, head, body wrapper)
│ │ ├── list.html # Default list page (blog index)
│ │ └── single.html # Default single page (blog post)
│ ├── partials/
│ │ ├── head.html # <head> contents (meta, CSS)
│ │ ├── header.html # Site header + navigation
│ │ └── footer.html # Site footer
│ ├── index.html # Home page
│ ├── blog/ # (uses _default/ templates)
│ ├── projects/list.html # Projects listing
│ ├── quotes/list.html # Quotes listing
│ └── resume/list.html # Resume page
└── theme.toml
assets/css/style.css uses CSS custom properties for all design tokens. To change the look:
:root { ... } for light mode colors@media (prefers-color-scheme: dark) { :root { ... } } for dark mode--color-bg, --color-text, --color-accent, --color-link, --font-body, --font-mono, --max-width, --spacing, --radiusTo override a template without changing the theme, copy it to the site-level layouts/ directory with the same path:
# Example: override the footer
cp themes/minimal/layouts/partials/footer.html layouts/partials/footer.html
# Edit layouts/partials/footer.html — it takes precedence
Same for assets — site-level assets/ overrides themes/minimal/assets/.
hugo --minify
Output goes to public/. This is the only command needed for CI/CD.
hugo.toml has theme = 'minimal' and templates existtail -20 /tmp/hugo-server.log for error messagescontent/<section>/_index.md exists and a matching layout exists in themes/minimal/layouts/<section>/