How I Built Cclarity.io With Claude Code (No Developer, No Templates)

Why I Needed a Website for a LinkedIn Agency

Most LinkedIn agencies do not have a proper website. They rely on LinkedIn itself, maybe a one-page landing site, and word of mouth. That works until it does not.

I needed a website for four specific reasons:

Google SEO. People search for “LinkedIn lead generation agency”, “LinkedIn outreach for B2B”, and similar queries every day. If Cclarity does not show up, those leads go to someone else. A website with optimised pages and blog content is the only way to capture that traffic.

AI search engines. When someone asks ChatGPT, Perplexity, or Claude “how do I generate leads on LinkedIn”, I want Cclarity to appear in the answer. This is the next frontier for discovery, and most competitors are not even thinking about it yet.

Topical authority. A blog with 13+ posts across 4 content pillars signals to Google (and to AI models training on web data) that Cclarity is a genuine authority on LinkedIn lead generation. Not just another agency with a landing page.

Converting search traffic. Once people find Cclarity through search, the website needs to guide them toward booking a call. Every page has a clear next step.

The question was not WHETHER to build a website. It was HOW to build one without hiring a developer or spending months on it.

The Stack Claude Code Recommended (And Why)

Here is the important part: I did not choose these tools. I told Claude Code three things:

1. The site needs to be optimised for Google SEO
2. It needs to be optimised for AI search engines (ChatGPT, Perplexity, Claude)
3. It needs to support programmatic SEO so I can launch new landing pages and blog posts at scale without rebuilding anything

Claude Code recommended the entire architecture based on those requirements. I reviewed the reasoning and agreed.

Step 1: Set Up the Project

I used Claude Code through the Mac app. I never opened a terminal. I never ran an npm command. The entire process was conversational: I described what I wanted, Claude Code wrote the code, created the files, ran the commands, and deployed. I reviewed the output and gave feedback.

Here is roughly what I asked, in plain English:

“Set up a new website project that generates static HTML pages. I need it to support blog posts, be deployable to Netlify, and have a content system where I can add new pages just by creating new files.”

Claude Code set up the Astro project, installed the 4 dependencies, created the config files for Astro and Netlify, and built the folder structure:

• src/components/ for shared elements (navigation, footer, SEO headers)
• src/layouts/ for page templates
• src/styles/ for the design system
• src/content/blog/ for blog posts
• src/content/industries/ for landing page data
• src/pages/ for actual routes

The first deploy happened within the same session. I described the project, Claude Code built it, and it was live on Netlify.

Step 2: Build the Design System

I described the visual identity I wanted: professional, clean, navy and white, no generic startup look. Claude Code built a design system using CSS variables:

• A colour palette (navy primary, warm white background, muted borders)
• Typography tokens (DM Serif Display for headlines, Inter for body text)
• Spacing and shadow variables for consistent layouts
• A responsive navigation with mobile hamburger menu
• A footer with auto-populated links

The key decision was NO CSS framework. No Tailwind. No Bootstrap. Claude Code wrote hand-crafted CSS with design tokens stored as variables. The entire stylesheet is under 500 lines. It loads instantly and I have full control over every element.

Three shared components handle the stuff that appears on every page. Head.astro generates all the SEO meta tags, Open Graph tags, JSON-LD structured data, and analytics scripts. Nav.astro renders the navigation (including dropdowns that auto-populate from the content collections). Footer.astro handles links and branding.

Two layout templates handle page structure. BaseLayout.astro wraps every page with the head, nav, content slot, and footer. BlogPostLayout.astro adds the article header, author bio, related posts, and conversion CTAs specific to blog posts.

Step 3: Create the Content Engine

This is where the programmatic SEO requirement paid off. I asked Claude Code to set up a system where I could create a new blog post or industry landing page just by adding a single file, with no code changes needed anywhere else.

The solution was Astro’s content collections with Zod schemas. In plain terms: there is a config file that defines exactly what fields every blog post needs (title, description, category, FAQs, etc.) and what fields every industry page needs (26+ fields covering SEO, content, onboarding steps, and buyer fit criteria). When I add a new file, Astro validates it against the schema at build time.

This is CRITICAL when working with AI. If Claude Code writes a blog post with a missing field or wrong data type, the build fails with a clear error message before anything reaches production. The schema acts as a safety net.

For blog posts: I create an .mdx file in the blog folder with the required frontmatter (title, description, category, FAQs, canonical URL slug). Then I write the content in markdown with HTML components where I want something visual. Build and deploy.

For industry landing pages: I create a .json file in the industries folder with all the required fields. Build and deploy. The navigation dropdown and footer links auto-update. No code changes needed.

The blog now has 13 posts across 4 content pillars: LinkedIn Profile, LinkedIn Content, LinkedIn Outreach, and LinkedIn Lead Generation. Each pillar targets a cluster of search queries. Each post links to related posts in other pillars, building internal link authority.

Step 4: Set Up SEO and Structured Data

This is what makes the site discoverable, not just by Google, but by AI search engines.

Every page automatically gets:

• A unique <title> tag optimised for search
• A <meta description> written in direct-answer style
• A <link rel="canonical"> pointing to the correct URL
• Open Graph tags for social sharing (title, description, image at 1200x630)
• Twitter card tags

Every blog post automatically gets JSON-LD structured data:

• Article schema (headline, author, publisher, dates)
• FAQPage schema (questions and answers from frontmatter)
• BreadcrumbList schema (Home > Blog > Post Title)

The FAQ schema is especially important for AI search engines. When ChatGPT or Perplexity crawls the page, the FAQ markup tells them “here are the questions this page answers.” That makes it far more likely they will cite your content in their responses.

The sitemap is auto-generated with correct URL extensions. The robots.txt file allows all crawlers and points to the sitemap. Nothing is blocked from indexing.

Step 5: Add Analytics and Deploy

PostHog handles analytics. The tracking snippet loads on every page through the shared Head.astro component. It tracks pageviews, page leaves, and custom events. The free tier is generous enough for a site this size.

Deployment follows a simple pattern that Claude Code handles end to end:

The domain (cclarity.io) is registered on Namecheap with DNS pointed to Netlify. SSL is automatic. I never configured a server, set up a database, or managed infrastructure. Netlify’s free tier handles everything.

Step 6: Build Interactive Tools (Optional)

Once the core site was running, I added three interactive tools:

• LinkedIn Fit Calculator: a quiz that scores whether LinkedIn lead generation is right for your business
• LinkedIn Headline Analyser: analyses your headline against B2B best practices
• ICP Definer Worksheet: an interactive worksheet for defining your ideal customer profile

Each tool is a single page file with embedded JavaScript. No backend, no API calls, no external dependencies. Everything runs in the browser. Claude Code built each one from a description of what I wanted the tool to do.

These are more advanced than the blog and landing pages. If you are building your own site, start with the content engine first. Add tools later once you have traffic.

What Claude Code Did Well (And Where It Struggled)

After building 24 pages, 3 interactive tools, and a complete content system, here is an honest assessment:

The pattern is clear. Claude Code is exceptional at implementation. Architecture, code, structured data, responsive layouts, deployments. It handles the HOW.

But it can not handle the WHAT or the WHY. What should the site say? Who is it for? Which topics matter? What does the brand sound like? Those are founder decisions. The tool removes the technical barrier. It does not remove the strategic one.

Could You Build This Yourself?

The barrier to building a proper web presence has collapsed. A non-technical founder can go from zero to a 24-page, SEO-optimised, AI-search-ready website in conversational sessions. The bottleneck is no longer technical. It is strategic.

You still need to know your audience. You still need clear positioning. You still need to decide what content to create and why. Claude Code can build anything you describe. The question is whether you can describe the right thing.

What This Means for B2B Founders

Building the website was the easy part.

The hard part is the system that makes it work: knowing who to target, creating content that attracts the right people, engaging on their content to build recognition, and following up in a way that starts real conversations.

The website is a component of that system. It captures search traffic, builds credibility, and converts visitors. But without the LinkedIn lead generation strategy behind it, it is just a nice website.

If you want help with the strategy side, specifically using LinkedIn to generate qualified leads for your B2B business, book a free strategy call with Keith.