---
title: How much does it cost to build a service website using AI?
url: https://calvin.my/posts/how-much-does-it-cost-to-build-a-service-website-using-ai
published: 2025-06-07
updated: 2026-09-17
category: AI
tags:
- Claude
- Anthropic
- Web
- vibe coding
summary: The post tests using AI to create a static website for a fictional security company on a MacBook, using a browser and terminal. After defining design, content, responsiveness, and SEO requirements, the author uses ChatGPT to select Hugo and Claude Code to generate the site and revise its font. The initial build and follow-up change took roughly five minutes total, with AI usage costing $0.29, illustrating a low-cost workflow for a basic service website.
---

# How much does it cost to build a service website using AI?

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.

```markup
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.

```md
## 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.

   ```bash
   $ 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

   ```bash
   $ claude "Check README.md and build a site as per described"
   ```

2. After 5 minutes, it is done.

   ```bash
   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.

   ```bash
   $ hugo server -D
   ```

4. Everything looks great, except we want to use a different font.

   ```bash
   $ claude "please use open sans google font for the content"
   ```

5. After about a minute, the change is completed.

   ```bash
   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

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/1f924d4c-9594-43f9-8e61-f2107f423e9c.png)

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/d609e044-7298-4dad-a8f5-1d68a0d294a1.png)

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/72421acd-009e-44e2-925a-70ac1dd086a1.png)

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/affddf4d-19ec-4b2f-ab09-b2c45305c156.png)

* * *

## Our costs

The total cost is $0.29.