How to Build a Website with OpenClaw

63% of people using vibe coding tools are not professional developers, according to Hostinger's 2026 adoption survey. That number explains the rapid growth of hosted builders like Lovable, Bolt, and Replit Agent. But those platforms run in sandboxes with limited framework choices and proprietary deployment pipelines. OpenClaw takes a different approach: it runs on your machine, connects to your actual development tools, and builds with whatever framework you choose.

The OpenClaw showcase documents what this looks like in practice. One developer rebuilt an entire personal site from Notion to Astro, migrating 18 blog posts, configuring Cloudflare DNS, and deploying the finished product. The whole process happened from bed via Telegram, without a laptop present. Another developer had OpenClaw create a custom HTML/CSS resource with adjustable sizing and speed-read functionality for a 27-inch monitor. A third built a Stumbleupon-style article aggregator from a phone while putting a child to sleep.

These projects share a pattern: none required opening a code editor. OpenClaw acts as an autonomous coding agent that handles the full build lifecycle through natural conversation. You describe what you want, and it writes the code, runs the builds, and returns a live URL.

OpenClaw does not lock you into a single framework. Since it runs locally and has access to your terminal, it can scaffold and build with any stack you can install. Certain combinations have emerged as reliable defaults across the community.

Next.js with Tailwind CSS

The most popular pairing. Developer Kai Chin's workflow guide recommends Next.js App Router with Tailwind CSS, deploying to Vercel. This gives you server-side rendering, API routes, and automatic preview deployments. The ClawHub skill ecosystem includes framework-specific tools like next-best-practices that help the agent follow Next.js conventions.

Astro

Strong choice for blogs, portfolios, and documentation sites. The showcase confirms a complete Notion-to-Astro migration, which demonstrates solid support for static site generation. Astro's island architecture keeps pages fast by shipping zero JavaScript by default.

Static HTML and CSS

The simplest option for landing pages. The showcase includes custom HTML/CSS files built entirely through conversation. No build tools, no package managers, no configuration files.

Adding a Backend

When you need a database, Supabase is the common recommendation. It pairs cleanly with both Next.js and Astro. OpenClaw can set up a Supabase project through the CLI, create tables, and wire up authentication in the same conversation.

Pick the simplest stack that fits your project. A portfolio site does not need Next.js and Supabase. Start with Astro or static HTML, and add complexity only when the project demands it.

The workflow starts with setting defaults. Kai Chin recommends a system prompt along these lines: "From now on, always follow these defaults for any website you build: deployment via Vercel, Next.js App Router with Tailwind CSS, Supabase for databases, and always provide the public URL when complete."

With defaults in place, building follows a tight loop:

1. Describe what you want. Be specific about layout, functionality, and content. "Build me a job board that filters positions by visa sponsorship eligibility with direct application links."

2. Review the output. OpenClaw creates the project structure, writes components, handles styling, and returns a preview URL.

3. Request changes. "Add a dark mode toggle" or "make the sidebar collapsible on mobile." Each request triggers another round of code changes and redeployment.

4. Repeat until done. The conversation is the development environment.

This loop produced real results. Kai Chin built SponsorJobs, a working H1B/OPT visa sponsorship job board, in 10 minutes using Telegram. The site filters positions by sponsorship type and includes direct application links.

The messaging interface is why mobile development works. You can describe changes during a commute, review the live URL on your phone, and request another iteration before reaching your stop. OpenClaw supports Telegram, WhatsApp, Discord, and a desktop client, so you pick whichever channel fits your workflow.

For larger projects, break work into focused conversations. Build the layout in one session, navigation in another, then individual page templates. OpenClaw maintains context within a conversation, so each request builds on the previous one.

Stop losing website assets between OpenClaw sessions

Fast.io gives your agent 50GB of free persistent storage. Upload build artifacts, share deliverables with clients, and keep project files organized across every iteration. No credit card required.

Sign Up Free

Most OpenClaw website projects deploy to Vercel because the setup cost is close to zero. Install the Vercel CLI, run vercel login to authenticate, and tell OpenClaw to use Vercel as the deployment target. After each change, it runs a deploy and returns a preview URL. When you are ready for production, it can promote to your custom domain.

A typical deployment conversation goes like this:

1. OpenClaw builds the project locally to catch errors
2. It deploys to a preview URL for your review
3. You confirm the preview looks correct
4. It promotes to production on your domain

For Astro and other static-output frameworks, Cloudflare Pages is a strong alternative. Connect your GitHub repository, set the build command, and Cloudflare handles CDN distribution and edge deployment. GitHub Pages works for purely static sites and costs nothing.

DNS configuration is part of the same conversation. The showcase documents a developer moving DNS to Cloudflare during the website build itself. Provide access to your Cloudflare account, and OpenClaw configures the records and SSL settings.

Vercel and Cloudflare both provision SSL certificates automatically. If you deploy to a different host, confirm that it handles certificates before going live. A site without HTTPS will trigger browser warnings and hurt search rankings.

Website projects generate more than code. Design mockups, image exports, content drafts, client feedback documents, and deployment logs pile up over iterations. When you build through conversation, these files scatter across chat histories, local downloads folders, and temporary directories.

For solo projects on a single machine, the local filesystem handles this fine. Git and GitHub manage source code well, but large binary assets like Figma exports bloat repositories and slow clones. Generic cloud storage (Google Drive, Dropbox, S3) stores files without project context, so finding the right version of a hero image means clicking through folder hierarchies.

Fast.io fills this gap by combining persistent storage with workspace intelligence. Upload website assets to a workspace, enable Intelligence, and files are automatically indexed for semantic search. Ask "find the latest hero image" instead of browsing folders. The Fast.io MCP server gives your agent direct access to read and write workspace files, so OpenClaw can pull assets during builds and upload deliverables when the project is done.

The free agent tier includes 50GB of storage, 5,000 monthly credits, and 5 workspaces with no credit card required. For client work, the ownership transfer feature lets you build a complete project workspace and hand it to the client while keeping admin access for future maintenance. Read the MCP documentation for the full list of available workspace operations.

Websites need updates. Content goes stale, dependencies collect security patches, and clients request changes. The same conversational workflow that built the site handles maintenance too.

For content updates, describe the change in plain language: "Replace the testimonials section with these three new quotes" or "add a blog post about our Q3 results." OpenClaw modifies the content files, rebuilds the project, and redeploys. You do not need to remember which template file renders the testimonials component.

For dependency updates, ask OpenClaw to check for outdated packages. It can run an audit, review the results, and apply safe upgrades. If a major version bump introduces breaking changes, it flags the issue and waits for your decision.

For design changes, describe the visual update: "Make the navigation sticky on scroll" or "change the accent color to #3B82F6." OpenClaw edits the styles, rebuilds, and shows you a preview before deploying to production.

The speed advantage is real. When you spot a typo on your live site, you can fix it from your phone in the time it takes to type a message. The gap between noticing an issue and shipping the fix shrinks from hours to minutes.

For team projects, pair this workflow with version control. Have OpenClaw commit changes to a feature branch, open a pull request, and wait for review before merging. The agent follows whatever development process you configure, including CI pipelines and branch protection rules.