Tutorial16 Agustus 20267 menit bacaIntermediate

Bikin website full dari brief sampai deploy dengan Hermes Agent

Workflow praktis memakai Hermes untuk merencanakan, membangun, menguji, dan memverifikasi website static tanpa kehilangan kontrol atas source code dan deployment.

Sumber ↗ · Workflow tutorial; repository-specific commands must be checked against current project.

Hermes paling berguna sebagai operator workflow, bukan generator kode sekali jalan. Website tetap punya source of truth, branch, quality gate, dan live verification yang bisa diperiksa manusia.

1. Tulis brief dan batasan
Sebut audiens, tujuan, route, konten, visual direction, accessibility, output static atau runtime, dan hal yang tidak boleh dibuat. Brief sempit menghasilkan diff lebih kecil.
Siapkan workspace · bash
```
mkdir -p ./my-site && cd ./my-site && git init
```

2. Minta Hermes membaca repo sebelum coding

Minta audit struktur, dependency, source boundary, dan command yang tersedia. Jangan biarkan agent menambah framework atau package sebelum ada kebutuhan terbukti.

Prompt audit · text

Audit repo ini tanpa mengubah file. Temukan source of truth, route, dependency existing, build/test/static-export command, environment boundary, deployment target, dan risiko. Laporkan file serta bukti command. Jangan menambah dependency atau framework.

3. Bangun satu vertical slice

Buat satu route nyata dari content source sampai HTML output. Verifikasi layout, typography, responsive behavior, metadata, dan keyboard focus sebelum memperbanyak route.

Prompt vertical slice · text

Implementasikan satu vertical slice dari source content sampai route HTML. Gunakan pola dan dependency existing. Tambahkan hanya kode minimum. Setelah selesai jalankan test/build, tampilkan diff, route yang diuji, dan blocker. Jangan mengklaim selesai tanpa output nyata.

4. Jalankan quality gate
Kode belum selesai saat halaman terlihat benar. Jalankan TypeScript, content validation, build, static export, SEO, audit dependency, dan diff check.
Quality gate · bash
```
npm run check:quality
npm audit --omit=dev --audit-level=moderate
git diff --check
```

5. Review diff dan live output

Baca diff source. Setelah deploy preview, buka route di browser dan cek screenshot, HTML, title, links, asset, mobile layout, dan 404 behavior. Jangan menerima klaim agent tanpa output nyata.

Prompt QA · text

Review source diff dan live preview secara objective. Cek desktop/mobile, keyboard focus, semantic HTML, title/metadata, links, image paths, loading/error state, 404 behavior, dan generated HTML. Pisahkan fakta, bug, dan preferensi. Jangan mengubah desain tanpa bukti.

6. Commit lalu deploy explicit
Urutan aman: CHANGELOG, commit, push, deploy, live verify. Draft atau working tree kotor tidak boleh masuk production.
Release sequence · bash
```
git status --short
git diff --check
git add -A && git commit -m 'feat: add site slice'
git push origin HEAD
```

7. Tetapkan content dan media contract

Sebelum route bertambah, tentukan schema content, status draft/published, source URL, provenance, rights, alt text, dimensions, dan behavior bila asset hilang.

Prompt content/media contract · text

Audit content dan media contract website ini. Pastikan setiap page punya slug stabil, status, title, excerpt, body, source/provenance, rights note, image alt, dimensions, dan fallback bila asset hilang. Draft jangan masuk route publik. Laporkan field missing dan jangan membuat data palsu.

8. Uji responsive, accessibility, dan performance

Visual desktop saja tidak cukup. Uji mobile, keyboard, focus, reduced motion, contrast, semantic HTML, image loading, dan ukuran output.

Prompt accessibility QA · text

QA website ini pada viewport mobile dan desktop. Uji keyboard-only navigation, visible focus, semantic landmarks, heading order, alt text, contrast, reduced motion, touch target, overflow, loading state, broken image, dan performance dasar. Pisahkan blocker, bug, dan preferensi. Sertakan route dan bukti.

9. Kunci security dan environment boundary

Credential hanya boleh berada di environment server atau platform deploy. Jangan memasukkan secret ke source, browser bundle, generated HTML, screenshot, log, atau content.

Prompt security audit · text

Audit security boundary website ini read-only. Cari secret, token, credential, private endpoint, unsafe client exposure, injection risk, unvalidated external URL, dan environment variable yang masuk browser bundle. Redact output. Perbaiki hanya risiko yang terbukti dan verifikasi generated HTML tidak mengandung secret.

10. Siapkan rollback dan handoff

Release harus bisa dihentikan dan dikembalikan. Simpan commit/deployment reference, known limitations, test result, source-of-truth map, dan langkah rollback.

Prompt release handoff · text

Buat release handoff website ini. Catat source of truth, commands, routes, tests, asset provenance, known limitations, commit/deployment reference, rollback command, dan owner action yang masih diperlukan. Jangan deploy atau mengubah production. Tandai setiap bagian yang belum terbukti.

Future-proof berarti mengurangi magic: content contract jelas, route adapter tipis, dependency pinned, error boundary nyata, dan setiap perubahan punya satu verification check. Tambah abstraction hanya setelah duplication atau perubahan kedua membuktikan kebutuhannya.

Dokumentasi Hermes Agent: https://hermes-agent.nousresearch.com/docs

1. Tulis brief dan batasan