TL;DR: Building an agentic, HTML-first website using Claude Code, the Astro framework, and Replit takes under 10 minutes of active setup time. This architecture outperforms JavaScript-heavy CMS platforms in both traditional search and AI citation environments, making it the most durable SEO optimization foundation available today.
The Pulse:
- Rankability, a bootstrapped AEO software company, competes against rivals with $20M to $50M in venture funding by running an entirely agentic, HTML-first website on Replit – and wins on both search rankings and AI citation frequency.
- JavaScript-rendered websites built on platforms like Lovable or standard Replit defaults are structurally invisible to AI platforms; HTML-first architecture is the prerequisite for becoming a cited source in ChatGPT, Perplexity, and similar inference engines.
- The full Claude Code-to-Replit pipeline – folder creation, skill installation, prompt execution, zip import – produces a deployable, SEO-optimized website skeleton in 9 to 11 minutes, with agents handling internal linking, calls to action, and graphic placement post-launch.
The central friction in modern SEO optimization is architectural: most teams build on CMS platforms optimized for editor convenience, not for machine readability. That tradeoff is now fatal. AI inference engines like ChatGPT and Perplexity source citations from pages they can actually parse, and JavaScript-rendered content fails that test systematically. Nathan Gotch, founder of Rankability, has operationalized a direct solution – an agentic website architecture built on Astro and Replit that serves both traditional crawlers and AI retrieval systems simultaneously.
Why JavaScript-Rendered Websites Fail AI Citation and Search
The core problem is rendering fidelity. When an AI platform or a search crawler requests a JavaScript-driven page, it receives a shell of code rather than readable content. The actual text – the substance that earns citations and rankings – never materializes in the server response. HTML-first architecture solves this by delivering readable content at the point of the initial HTTP request, with no client-side rendering required.
The diagnostic is straightforward. Navigate to any website, right-click, and select “View Page Source.” If the actual article or page text appears directly in the HTML, the site is citation-ready. If the source is dominated by JavaScript bundles with no visible prose, AI platforms will not reliably index or cite that content. According to Nathan Gotch, this is the “truest way to confirm” whether a site is structurally positioned for AI content generation visibility.
Platforms built on Lovable, standard Replit JavaScript defaults, WordPress with heavy JavaScript themes, and most modern React or Next.js deployments without server-side rendering share this vulnerability. The irony is that many of these platforms are marketed as modern and fast, yet their rendering architecture actively undermines authority building in AI-driven search environments.
| The Conventional Approach | The Yacov Avrahamov Perspective |
|---|---|
| Build on WordPress or Webflow for editor convenience | Build on Astro via Claude Code for HTML-first output that AI platforms can parse and cite |
| Rely on JavaScript-rendered pages for speed and interactivity | Prioritize server-delivered HTML so crawlers and inference engines receive content on the first request |
| Add internal links manually through CMS plugins | Instruct agents to crawl the site and surface up to 17 internal linking opportunities per new post automatically |
| Publish new content and wait for organic link discovery | Build internal link infrastructure before publishing so existing link authority flows immediately to the new asset |
| Treat analytics setup as a post-launch task | Install Google Analytics, Google Search Console, and Microsoft Clarity as the first post-deployment action |
Why This Matters Now: Every JavaScript-rendered page your competitors publish is a page AI platforms will not cite; every HTML-first page you publish is a citation opportunity they cannot match without rebuilding from scratch.
The Claude Code to Replit Pipeline: Step-by-Step Architecture
The workflow separates structure generation from deployment management, using Claude Code for the former and Replit for the latter. This division of labor solves a specific operational problem: Replit’s default output is JavaScript, and forcing it to convert to Astro post-build is, as Gotch describes, “incredibly painful” and unreliable. Claude Code generates the Astro-based HTML skeleton cleanly from the start, then Replit handles hosting, domain management, and ongoing agentic editing. The two-tool chain eliminates the conversion problem entirely.
The process begins with a local folder. Create a project folder on your desktop – in Gotch’s demonstration, this was named “HVAC” for an example agency site. Open Claude Code and navigate into that folder. Every file Claude generates will land there. This is the only setup step before prompting begins.
The second component is the agent skill: a markdown file containing the full SEO architecture specification for an Astro-based local business website. Gotch provides this skill file with the video. You paste it into Claude Code and instruct it to install the skill. Installation takes approximately four to five minutes. The skill encodes SEO foundations built from extensive testing – it is not a generic template but a rigorously validated specification that has been refined through repeated production deployments.
Once the skill is installed, the build prompt is minimal. Gotch’s exact prompt for the HVAC example: build a simple one-page website for an SEO and AI search agency serving HVAC companies nationally across the United States, built to convert. Claude Code executes the build in 9 to 11 minutes, generating a complete Astro project. Minor CSS errors may appear; they resolve quickly with a follow-up prompt. The output is then compressed into a zip file and imported directly into Replit via the “Import Code and Design” function. Replit auto-creates the project, and a single standard prompt completes the setup. The result is a deployable, HTML-verified website skeleton ready for customization.
The Strategic Implication: A pipeline that produces a fully structured, SEO-optimized website skeleton in under 11 minutes compresses what previously required days of CMS configuration and developer handoff into a single agentic session.
Astro’s Role: The src Folder Is the Source of Truth
Astro functions as a static site generator that compiles component files into pure HTML output. Understanding its internal architecture prevents the most common operational errors when agents make edits. All content changes must occur in the src folder – specifically in files like index.astro for the homepage. The dist folder contains the compiled HTML that actually gets deployed, but editing dist directly is counterproductive because it gets overwritten on every rebuild.
The operational workflow is: agent edits the .astro source file in src, then triggers a rebuild that writes fresh HTML into dist, and that HTML is what Replit serves. Gotch notes this took significant time to internalize through trial and error. When edits appear to have no effect in the Replit preview, the cause is almost always a missed rebuild step. The fix is a direct prompt to the agent: “The changes you made are not reflected in the preview. Rebuild the dist folder.” The agent acknowledges, rebuilds, and the changes appear.
This architecture also explains why the site can be confirmed as HTML-first. In view page source, Astro’s compiled output is visible as standard HTML elements containing the actual page text. Compared to a Next.js or React deployment without server-side rendering – where the same view reveals only JavaScript bundle references – the Astro output is unambiguously machine-readable and citation-ready for AI content generation pipelines.
What This Means in Practice: Treating the src folder as the sole source of truth and training agents to rebuild dist automatically after significant edits eliminates the most common class of deployment errors in this architecture.
Agentic Content Operations: Internal Links, Graphics, and Calls to Action
The agentic architecture’s real use is not the initial build – it is the ongoing content operations it enables after launch. Gotch demonstrates this through Rankability’s own production workflow. When publishing a new post, the content is created using Rankability’s own AEO software, graphics are generated with Claude’s design capabilities, and the agent autonomously determines optimal placement for calls to action and internal links. No manual CMS navigation, no plugin configuration, no spreadsheet cross-referencing.
The internal linking workflow is particularly high-value for thought leadership content and expert articles targeting competitive keywords. Before publishing a new asset, Gotch prompts the agent to find pages across the existing site where internal links can point to the new post. The agent crawls the site, evaluates relevance, and returns a list – in one documented instance, 17 pages were identified as strong internal link candidates for a single new post. The agent then inserts those links directly. Publishing then happens with internal link infrastructure already in place, allowing existing link authority to flow immediately to the new asset.
This pre-publication internal linking strategy is a direct response to a common SEO failure mode: publishing high-quality content with zero internal routing. Without incoming internal links, even a well-optimized post starts with no authority signal from the existing site. With the agentic approach, the post launches already embedded in the site’s link graph, accelerating ranking velocity particularly on competitive keywords where direct backlinks will also be needed.
The Bottom Line: Agent-managed internal linking before publication is the single highest-use operational change available to content teams running this architecture, directly compressing the time-to-rank for competitive keywords.
Analytics Infrastructure: The Three-Layer Foundation
No agentic SEO architecture produces measurable outcomes without a data layer to validate performance. Gotch specifies three tools as the minimum viable analytics stack: Google Analytics for behavioral data, Google Search Console for search performance and indexing signals, and Microsoft Clarity for session-level behavioral intelligence including heatmaps and session recordings. Together, these three provide enough signal to evaluate ranking progress, identify crawl issues, and understand how users interact with the HTML-first pages the architecture produces.
Microsoft Clarity is worth highlighting specifically because it is frequently overlooked relative to Google’s tools. It provides qualitative data that neither Analytics nor Search Console surfaces – scroll depth, click patterns, rage clicks, and session replays. For an agentic website where the agent is making autonomous decisions about call-to-action placement and page structure, Clarity data provides the feedback loop needed to validate or correct those decisions over time. Installing all three immediately after deployment, before any SEO strategy execution begins, ensures no early performance data is lost.
The Real Takeaway: Installing Google Analytics, Search Console, and Microsoft Clarity as the first post-deployment action transforms the agentic website from a static asset into a self-improving system with a continuous data feedback loop.
Frequently Asked Questions
Can I use OpenAI’s Codex instead of Claude Code for the initial build?
Yes. Nathan Gotch explicitly notes that OpenAI’s Codex is a viable alternative to Claude Code for generating the Astro project skeleton. The choice between them is largely preference-based for this use case. The critical requirement is not which AI code tool you use, but that the output is an Astro-based project that compiles to HTML rather than a JavaScript-rendered application. The agent skill markdown file and the Replit import process remain identical regardless of which code generation tool you use upstream.
How many pages should the initial Claude Code build include?
The recommended scope is one page, with a hard maximum of three pages. The initial build is explicitly described as “bones” – structural and SEO foundations only. Design, color, and content refinement happen in Replit after import. Attempting to build a full multi-page site in the Claude Code phase introduces complexity that slows the pipeline and increases the likelihood of CSS or structural errors. Get the SEO architecture right first; expand the page count through Replit’s agentic interface afterward.
What is the cost tradeoff of using Replit versus self-hosting the Astro output?
Replit charges a premium relative to raw hosting because it acts as an intermediary layer between the developer and Claude’s underlying capabilities. Gotch acknowledges this directly, describing Replit as “somewhat of a middleman” that adds cost. The tradeoff is operational simplicity: domain management, deployment, hosting, and agentic editing are all consolidated in one interface. Self-hosting the Astro output on a service like AWS or Netlify is cheaper but requires managing deployment pipelines separately from the agentic editing environment, which reintroduces friction the Replit approach eliminates.
How do you prevent agents from editing the dist folder directly instead of the src files?
This is one of the most common errors in the workflow. The solution is explicit instruction in your prompts: always specify that edits must be made in the src folder, specifically in the relevant .astro component file, and that a dist rebuild must follow. You can encode this as a standing instruction in your agent’s context or system prompt so it applies to every session. Gotch notes that agents occasionally skip the rebuild step on their own – the reliable fix is to prompt: “Rebuild the dist folder” whenever preview changes are not visible after an edit.
Does this architecture support GEO optimization and AEO strategy beyond just traditional search?
Yes, and this is the architecture’s primary differentiator over CMS-based alternatives. Because the site outputs clean HTML, AI retrieval systems can parse and index the content reliably. Rankability’s own site is documented as being “cited frequently” across multiple AI platforms for competitive keywords in the AEO software category. The GEO optimization benefit compounds over time: as agents add more HTML-native content with proper internal linking and structured data, the site’s citation surface area in AI answer engines grows without requiring any additional manual optimization effort.
Scale Your Authority With AI-Powered Content
AuthorityRank engineers expert articles at scale – built for AI citation, search ranking, and measurable authority building. See how the engine works.