How much would a service provider or a Saas tool cost you to build a Website for your service? Let's find out in this article.
We will only use the terminal App and Chrome Browser on a MacBook.
What is our goal?
We want to build a website for an imaginary Security Service Company, called Harimau Security.
How should we do it?
Let's ask ChatGPT.
What tools can I use to generate a static website?
I’d recommend Hugo—a super-fast, Go-based static site generator.
You write your content in Markdown, choose or build a Go-template theme,
then run the single hugo command to produce a complete static site you can deploy anywhere.
Ok, we can use Hugo (whatever that means).
What are our requirements?
Let's put our requirements into a document.
## Introduction
The goal of this project is to build a static site for "Harimau Security".
"Harimau Security" (Harimau means Tiger in Malay) is a security company that provides short-terms, professional security services.
## Site Features
The site should includes:
1. A hero banner
- Full-screen or half-screen banner
2. Why choose us?
Three to five feature cards (icon + title + one-sentence description), e.g.:
- Trained Specialists
- 24/7 Availability
- Discreet & Confidential
3. Pricing Information
- Plan Name (e.g. Standard, Premium)
- Rate (e.g. $50/hr)
- Inclusions
- “Book Now” button → Contact anchor
4. Contact Information
- Phone number (click-to-call)
- Email address (mailto:)
- Office address
## Tech Specs
1. Hugo is used to generate static site
2. SEO: meta title/description per page, Open Graph tags, structured data (Organization)
3. Responsive: works on mobile/tablet/desktop
## Content & Branding
• Tone: professional, reassuring, discreet
• Fonts: one serif for headers, one sans-serif for body
• Color palette: dark charcoal + tiger-orange accent
• Imagery: high-resolution, diversity-inclusive, security-focused
We choose to use markdown, but it can be in any format (even plain text).
What's next?
We install the 2 tools below:
1) Claude Code - The AI coding agent we want to use. For billing, it needs to be connected to your Anthropic Account.
2) Hugo - The tool suggested by ChatGPT earlier.
$ npm install -g @anthropic-ai/claude-code
$ brew install hugo
Let the Agent work
1) We are Claude to build the site based on our requirements
$ claude "Check README.md and build a site as per described"
2) After 5 minutes, it is done.
Total cost: $0.1749
Total duration (API): 2m 16.9s
Total duration (wall): 4m 19.3s
Total code changes: 453 lines added, 2 lines removed
Token usage by model:
claude-3-5-haiku: 2.4k input, 114 output, 0 cache read, 0 cache write
claude-sonnet: 51 input, 6.7k output, 115.7k cache read, 9.8k cache write
3) Let's run Hugo to preview.
$ hugo server -D
4. Everything looks great, except we want to use a different font.
$ claude "please use open sans google font for the content"
5. After about a minute, the change is completed.
Total cost: $0.1151
Total duration (API): 31.3s
Total duration (wall): 48.5s
Total code changes: 7 lines added, 2 lines removed
Token usage by model:
claude-3-5-haiku: 660 input, 23 output, 0 cache read, 0 cache write
claude-sonnet: 25 input, 954 output, 73.5k cache read, 20.8k cache write
The output
Our costs
The total cost is $0.29.