You've just asked an AI to build you a web application. In seconds, you have a working prototype with HTML, CSS, and JavaScript. It looks great locally. Now what?
This is where most developers hit a wall. Traditional deployment means choosing a hosting provider, configuring build pipelines, managing environment variables, and wrestling with DNS settings. For a quick prototype or side project, that's overkill.
MyVibe solves this problem. It's a platform built specifically for deploying vibe-coded creations—those AI-generated web apps you create through natural language prompts. This guide walks you through publishing your first project to MyVibe, from setup to live URL.
What Is Vibe Coding?#
Before we dive into deployment, let's clarify what we mean by vibe coding. It's the practice of describing what you want to an AI assistant and having it generate working code. Instead of writing every line yourself, you specify the "vibe" of your application:
"Build me a landing page for a coffee shop with a reservation form."
"Create a portfolio site with smooth scrolling and dark mode."
The AI handles implementation details while you focus on direction and refinement. MyVibe is designed as the natural next step—taking that generated code from concept to live site.
Prerequisites#
You'll need:
- A MyVibe account (sign up at myvibe.arcblock.io)
- A web project to deploy (HTML file, directory, or ZIP archive)
- Basic familiarity with file systems and web development concepts
MyVibe works with static sites and single-page applications. If your AI generated a React app, Next.js project, or any framework that produces a build output, you'll deploy the built files (usually in a dist or build folder).
Understanding MyVibe's Publishing Model#
MyVibe uses a straightforward publishing model. You upload either:
- A single HTML file - Perfect for simple pages or prototypes
- A directory - For multi-file projects with assets
- A ZIP archive - Useful for packaging before deployment
Every published project gets a unique URL immediately. No build steps, no configuration files, no waiting. The platform handles routing, HTTPS, and CDN distribution automatically.
Step 1: Prepare Your Project#
First, verify your project works locally. If you generated it with AI, test it by opening the HTML file in your browser or running a local development server.
For single-file projects, make sure all resources are either inline or use CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Vibe Project</title>
<style>
/* Inline CSS or link to CDN */
</style>
</head>
<body>
<h1>Hello, MyVibe!</h1>
<script src="https://cdn.example.com/library.js"></script>
</body>
</html>
For multi-file projects, organize your directory structure:
my-project/
├── index.html
├── styles/
│ └── main.css
├── scripts/
│ └── app.js
└── images/
└── hero.jpg
The entry point must be named index.html. MyVibe serves this file when visitors access your site's root URL.
If you're deploying a framework build, navigate to your output directory first:
npm run build
cd dist # or build, out, etc.
Step 2: Install the MyVibe CLI#
MyVibe provides a command-line tool for publishing. If you're using Claude Code or another AI coding assistant, you may already have access to the /myvibe:publish skill. Otherwise, the CLI integrates into your workflow.
For projects in Claude Code, you can publish directly from the conversation:
Deploy this to MyVibe
The AI will handle the upload and return your live URL.
For standalone CLI usage, the tool reads your current directory and publishes its contents. Check your environment for the specific installation method, as MyVibe integrates with various development tools.
Step 3: Publish Your Project#
Publishing is a single command. From your project directory:
myvibe publish
Or if you're working with an AI assistant:
Publish this project to MyVibe
The publishing process:
- Validates your project structure
- Compresses and uploads your files
- Deploys to MyVibe's infrastructure
- Returns a live URL
You'll see output like:
✓ Validating project structure
✓ Uploading files (234 KB)
✓ Deploying to MyVibe
✓ Published successfully
Your site is live at:
https://abc123.myvibe.arcblock.io
That URL is immediately accessible. Share it, embed it, or continue iterating.
Step 4: Verify Your Deployment#
Open the URL in your browser. Check that:
- All pages load correctly
- Images and assets display
- Interactive features work
- The site is responsive on mobile
If something looks wrong, the issue is usually with asset paths. MyVibe serves files relative to your index.html, so verify your links:
<!-- Correct relative paths -->
<link rel="stylesheet" href="styles/main.css">
<img src="images/hero.jpg" alt="Hero image">
<!-- Avoid absolute paths unless necessary -->
<link rel="stylesheet" href="/styles/main.css">
Step 5: Update Your Project#
Vibe coding is iterative. You'll refine your project multiple times. When you make changes locally, republish with the same command:
myvibe publish
MyVibe updates your existing deployment. The URL stays the same, so links you've shared continue working. Changes typically propagate within seconds.
This workflow lets you treat MyVibe as a live preview environment. Make a change, publish, review, repeat.
Working with Different Project Types#
Single HTML File#
The simplest case. Just publish the file:
myvibe publish index.html
Everything else (CSS, JavaScript) should be inline or from CDNs.
Multi-File Static Site#
Organize files in a directory and publish the whole thing:
cd my-project
myvibe publish
MyVibe uploads the entire directory structure.
ZIP Archive#
If you've packaged your project:
myvibe publish my-project.zip
The archive should contain your files at the root level (not nested in a folder).
Framework Builds#
For React, Vue, or other frameworks:
npm run build
myvibe publish dist
Replace dist with your framework's output directory.
Common Issues and Solutions#
Assets Not Loading#
Problem: Images or CSS files return 404 errors.
Solution: Check your file paths. Use relative paths and ensure files are in the published directory.
<!-- Wrong -->
<img src="/Users/yourname/project/images/logo.png">
<!-- Right -->
<img src="images/logo.png">
API Calls Failing#
Problem: Your app makes requests to localhost or relative API endpoints.
Solution: Update API URLs to absolute paths. For development, use environment variables or separate config files:
const API_URL = 'https://api.example.com';
fetch(`${API_URL}/data`)
.then(response => response.json())
.then(data => console.log(data));
Build Artifacts Not Included#
Problem: Your site works locally but not on MyVibe.
Solution: Make sure you're publishing built files, not source code. Run your build command first:
npm run build
myvibe publish dist
Expected Results#
After following these steps, you'll have:
- A live URL for your project
- Automatic HTTPS and CDN delivery
- The ability to update your site anytime
- A published version that matches your local build
Your site is now accessible to anyone with the link. You can share it for feedback, use it as a portfolio piece, or integrate it into larger projects.
Next Steps#
Now that you've published your first vibe-coded creation, consider:
Iterate on Your Design#
Vibe coding shines when you iterate quickly. Make changes, republish, and see results immediately. Try asking your AI assistant:
"Add a contact form to the homepage"
"Change the color scheme to dark mode"
"Make the navigation sticky on scroll"
Each change takes seconds to deploy.
Build More Complex Projects#
Start with simple pages, then move to full applications. MyVibe handles everything from landing pages to interactive dashboards. Experiment with:
- Multi-page sites with navigation
- JavaScript-heavy applications
- Data visualization tools
- Portfolio or documentation sites
Integrate with Other Tools#
MyVibe URLs work anywhere. Embed them in documentation, share them in Slack, or use them as live demos during presentations. The permanent URLs mean your links never break.
Learn Deployment Patterns#
As you publish more projects, you'll develop patterns:
- Keep a
publish.shscript for complex builds - Use environment variables for different deployment targets
- Maintain separate development and production builds
These practices apply beyond MyVibe and make you a better developer.
Why MyVibe for Vibe-Coded Projects#
Traditional hosting platforms were built for traditional development workflows. MyVibe is purpose-built for the AI coding era. The platform assumes you're moving fast, iterating constantly, and want zero friction between idea and deployment.
No configuration files. No build pipelines to debug. No waiting for DNS propagation. Just publish and share.
This matters when you're vibe coding because the creative flow is different. You're having a conversation with an AI, trying ideas, seeing what works. Every deployment barrier breaks that flow. MyVibe removes the barriers.
Conclusion#
Deploying vibe-coded creations should be as fast as creating them. MyVibe delivers on that promise. You've now published your first project and understand the workflow: build locally, publish with one command, share the URL.
The platform handles the infrastructure so you can focus on what matters—building and iterating on your ideas. Whether you're prototyping a startup concept, building a portfolio, or just exploring what AI-assisted development can do, MyVibe gets your work online immediately.
Start publishing, keep iterating, and share what you build.