Vibe coding: From prompt to prototype with Gemini Canvas and Netlify (free)
You've just created a cool, interactive dashboard or data visualisation in Gemini. It's working perfectly, but how do you get it out of here and onto the web for others to see?
This tutorial walks you through every step, from saving your file to launching it on a free hosting service. We'll use Netlify, which is perfect for this kind of project. It's super fast and easy, with no coding or terminal commands required.
Step 1: Get the code from Gemini
Gemini Canvas is an interactive environment where you can collaborate with the Gemini model to create, edit, and preview various types of content, including code (like HTML, CSS, JavaScript, React) and structured text (like Markdown documents). Canvas is available for all Gemini users. Google AI Pro and Google AI Ultra subscribers have access to Canvas with Gemini 2.5 Pro and a 1 million token context window for more complex projects.
Below the Gemini prompt bar, select “Canvas” and enter your prompt to start a document or coding project.
First things first: you need the raw code.
- Code blocks generated by Gemini are enclosed within special markers. Look for the code block that starts with
<!DOCTYPE html>. - Select all the code, from the very first line to the very last line that says
</html>. - Copy this entire block of code.
This infographic webpage provides a visual overview of AI, including key statistics, a process flow, common applications, and a glimpse into its future. It's built with Tailwind CSS for a clean, modern, and responsive design, making it look great on both desktop and mobile devices.
Step 2: Save your project as an HTML file
Now you'll save the code as a single file on your computer.
-
Open a simple text editor. Use a basic editor like Notepad (on Windows) or TextEdit (on macOS). Avoid using a word processor like Microsoft Word, as it can introduce extra formatting that may break your code.
-
Paste the code. Paste all the code you copied from Gemini into the new, blank document.
-
Save the file. This is the most important part.
- Click "File" then "Save As".
- In the "File name" field, type
index.html. The file name must be exactly this. Web servers automatically look for a file namedindex.htmlto serve as the homepage for a website. If you name it something else, likereport.html, the server won't know what to do, and your link will lead to a "page not found" error. - Make sure the file type is set to "All Files" or "Plain Text" to avoid your editor adding a
.txtextension.
Now you have a single file named index.html on your computer. You can double-click this file to open it in your web browser and see your interactive project running locally.
The key is to make sure Netlify knows which file to serve as the main entry point for your site. The platform is designed to look for an
index.htmlfile in the root of the folder you upload.
Step 3: Deploy your project with Netlify
Now let's get your project online so you can share it with anyone. Netlify is a great choice because it's free for small projects and incredibly simple to use.
-
Go to the Netlify website. Visit
netlify.comand sign up for a free account if you don't have one. -
Add a new project. Once you're logged in, import an existing project, choose a template, or deploy manually.
-
Choose "Deploy manually". You don't need to connect your project to GitHub, GitLab, Bitbucket or any other service. Netlify offers a simple drag-and-drop option “Netlify Drop” that's perfect for what we're doing.
-
Drag and drop your project folder. Netlify will show a box where you can drag and drop your project folder. In our case, you only have one file. Create a new folder, put
index.htmlinside it, and then drag the entire folder into Netlify.This method completely bypasses the need for Git and provides an immediate, working URL. It's the fastest way to share a single-file interactive report.
-
Wait for the deploy. Netlify will upload your file and build your site, which should only take a few seconds.
Once the process is complete, Netlify will give you a public URL for your project (e.g., https://your-site-name.netlify.app). You can customise this name later, but for now, you have a working link to share.
Your project is always accessible on a netlify.app subdomain based on the project name. Custom domains allow visitors to access your project at your own domains.
How to add more content and URLs
Remember that the project you created is a Single Page Application (SPA). Your single index.html file is the entire application. If you want to add more pages or sections, you have two main options, each with a different approach to URLs.
Option 1: Add a new section to the existing file
If you want to add a new section, you would do it within the existing index.html file. This is the simplest and most effective solution if your new content is related to the existing page.
Create a new HTML <div> in your index.html file and a new button in your navigation bar, style it as a hidden tab or section, and use JavaScript to make it visible when a user clicks a new navigation button. The single HTML file uses JavaScript to dynamically show and hide different sections, creating the illusion of a multi-page website without ever actually loading a new page.
This keeps everything in one self-contained, easy-to-manage file. The URL in the address bar never changes. It keeps all your content in one place, maintaining the clean, lightweight nature of the SPA. It also avoids any hosting complexity.
Option 2: Create a completely separate page
If your new content is for a completely different purpose (e.g., a new report, a sales pitch, a different team's data), you can create another index.html file and host it as a separate project. Since you're using Netlify, it’s easy to create and manage multiple projects, each with its own URL.
Create a new HTML file, save it as index.html. Simply create a new folder for each project, put an index.html file inside, and drag that folder to Netlify to deploy it as a new site on Netlify. Netlify would then give you a new, separate URL (e.g., another-page.netlify.app). You could then link to this new URL from your first page.
This approach is best for keeping different projects and data sets distinct from one another. It's cleaner for long-term management and ensures each project has its own dedicated URL.
Other hosting options
Option A: Static site hosting
These services are designed for hosting simple websites that don't need a server backend.
- Cloudflare Pages: Cloudflare Pages makes it simple to deploy static websites and to collaborate within your team.
- GitHub Pages: GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. You can host your site on GitHub's
github.iodomain or your own custom domain. - Vercel: Similar to Netlify, Vercel also provides a simple, free "drag and drop" interface for hosting static files. Vercel offers three account plans: Hobby, Pro, and Enterprise. Each plan is designed to meet the needs of different types of users, from personal projects to large enterprises. The Hobby plan is free and includes base features, while the Pro and Enterprise plans offer enhanced features and resources.
Option B: Your company's web server
If you have access to your company's internal web server or cloud storage (like Amazon S3 or Azure Blob Storage), you can upload the HTML file there. This is a good option for sharing sensitive data internally.
ABOUT ME
I'm Juliet Edjere, a no-code professional focused on automation, product development, and building scalable solutions with no coding knowledge.
Learn from practical examples and explore the possibilities of no-code, AI and automation. We'll navigate the tools, platforms, and strategies – one article at a time!
Visit my website → built with Carrd
Other Posts
