How do you build a website with Gemini CLI? Turn your chosen template into your business website by asking Gemini to edit it.
Use an existing website project as the input. Check your authentication route and local file context, request one edit and review the saved files and page before continuing.
Sample designs · replace the fictional content with your own.
01 / Sign-in route
Which account setup do I need?
For most individual users, Google recommends signing in to Gemini CLI with a personal Google account. API-key and Vertex AI paths are also available; organisation accounts can have different setup requirements. Choose the route for your account and check its current limits and billing separately from the template.
Your Google environment
Personal and organization accounts may have different setup conditions.
Separate usage
The template does not include Google AI access or unlimited free use.
Read index.html, RECREATE.md and the assets in this folder. Tell me where the headline, images and contact links are before editing.
AI · example response
I will inspect the files and list the sections, image paths and links. I will also identify any form that only demonstrates an action.
You
Use the existing HTML. My business copy and images are in the materials folder.
AI · example response
I will match those materials to the existing sections and ask about missing content rather than invent it.
Steps to take
Open the folder
Unzip the project and give the agent access to it.
Inspect the page
Read the HTML and instructions before replacing content.
Add your materials
Supply your copy, images and actual contact destination.
Result to aim for: the agent works on your actual website files.
Illustrative workflow. No live AI connection.
02 / File visibility
How do I provide the right context?
Open Gemini CLI in the unzipped website folder. Point it to index.html and RECREATE.md and ask it to describe the files it can read. Add your business copy and image paths so it can change the actual project, rather than work from a vague description.
Website files + design instructions
@index.html
Ask for an inspection of the actual supplied frontend before editing.
@RECREATE.md
Provide the original design specification and a separate approved business brief.
See the source files and technical details
The actual project files
14-clearstead · Current inspected ZIP
Current product download inspected on 2 October 2026. Files and remote resources belong to this named project; other templates differ.
The guide describes the original fictional page. Keep its role separate from the changes you want for your own business.
Produce one `index.html`, containing all page markup, an inline stylesheet and one inline vanilla-JavaScript IIFE placed after the dialog. Use English. No framework, package manager, build step, bundler, external JavaScript, backend or persisted state. The runtime is **network**: four external SVG images and the Google Fonts stylesheet/font files are required. Opening the HTML directly or serving it over a local HTTP server must support the same local interactions. Target current desktop and mobile Chromium with native `<dialog>`, `<details>`, CSS Grid, `min()`, `100svh` and `matchMedia().addEventListener()` support. Preserve every text, image URL, selector, dimension and behavior below. Keep the literal curly punctuation, en dashes and arrow glyphs.
03 / First edit
How do I request a bounded change?
Tell Gemini the exact result you want in the existing page: your company name, supplied headline, service copy and real button links. Specify the parts to preserve and ask it to save the edited HTML. Then open the preview and request any needed correction.
›_ AI editing exampleFormwell
You
Adapt Formwell for the fictional Alder brand studio. Change the name, hero headline and introduction. Keep the layout and sample project artwork.
AI · example response
The prepared preview replaces the company name, hero headline and introduction. Compare the Content and Original tabs to see those edits; the other project images remain sample content.
Prepared conversation and project versions. No live AI connection.
Prepare an explicit Gemini file request
Your own working plan
AI ChatWorkflow example
Gemini CLI · Review the edited page
You
Compare the edited page with my instructions. Check the headline, image paths, navigation and contact button at desktop and phone widths.
AI · example response
I will list any differences and check what the browser actually displays. A saved file alone does not confirm the visible result.
You
The headline is cut off on my phone. Fix that without changing the copy.
AI · example response
I will adjust the responsive layout and check the same phone width again. You can then approve the result.
Steps to take
Compare the changes
Check your supplied text, images and requested scope.
Open the preview
Check desktop and mobile; click navigation and contact.
Describe the issue
Tell the agent what is wrong and ask it to recheck the corrected view.
Result to aim for: a reviewed version you can continue editing or publish.
Illustrative workflow. No live AI connection.
04 / Files and browser
What proves the requested page changed?
Inspect the saved diff and the actual browser page. Check approved text, real links, resource requests and mobile layout. Keep original and reviewed versions separate.
01
Review changed paths
Look for unexpected edits and files that did not receive the requested change.
02
Review the visible output
Test headings, navigation, keyboard focus and the destination of the main action.
See the source files and technical details
A small change you can inspect
14-clearstead/index.html · L46
These excerpts come from the inspected English original. The following examples are prepared source edits, not a live AI session. Sample businesses and work remain fictional.
Before
<h1 id="hero-title">Give your money a little more direction.</h1>
First prepared edit
<h1 id="hero-title">Give each plan a clear next step.</h1>
Follow-up prepared edit
<h1 id="hero-title">Plan the month.<br>Choose the next step.</h1>
Original project · Clearstead 14
These excerpts come from the inspected English original. The following examples are prepared source edits, not a live AI session. Sample businesses and work remain fictional.Open full preview ↗
Prepared source edit
This prepared version changes selected text or visuals in the same project. Its existing structure and sample content remain. Compare the files before applying a similar change to your business.Open full preview ↗
AI ChatWorkflow example
Gemini CLI · Find the missing project file
You
This image is missing in the preview. Check the image URL and local file path in index.html.
AI · example response
I will compare the HTML reference with the actual files and check whether it uses a remote URL. If the file is missing, I will ask for it rather than substitute an unrelated image.
You
The correct image is in assets. Fix the reference, keep its filename and check the crop on mobile.
Steps to take
Check the reference
Read the image path in the actual HTML.
Find the asset
Compare local files or confirm the remote URL loads.
Reopen the preview
Check the corrected image and crop in the browser.
Result to aim for: the intended image loads from the correct path.
Illustrative workflow. No live AI connection.
05 / Correction and access
What if the output or file context is wrong?
If Gemini cannot read a file, confirm that you opened the correct project folder and that the file path exists and is allowed. If the page looks wrong, send the affected section or a screenshot and ask it to fix that specific issue. Keep a saved version for restoring rejected changes.
Can I treat ignored files as universally inaccessible?⌃
A path in .geminiignore is excluded by tools that respect that file, including explicit @ file sharing. It is not a universal access boundary for every tool or service. If a website file is excluded by mistake, check the pattern and restart Gemini CLI after changing it.
How do I recover a rejected edit?⌃
Keep an independent baseline and reviewed versions. Restore through your actual version-history method and recheck files and page.
Clearstead presents a cash-flow workspace concept, not operating finance software. Compare it with other structures and supply only real business claims and examples.
Clearstead
A fictional cash-flow workspace frontend with a local email-form specimen; no finance account or enquiry service is connected.
Current download inspected on 2 October 2026. Confirm the selected files on the product page.
index.html
RECREATE.md
assets/paper-detail.webp
assets/print-project.webp
assets/studio-review.webp
Some resources may load from external URLs. Review the selected project before publishing.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Gemini CLI · Cloudflare Pages · from folder to online
You
My website is finished. Publish this project folder to Cloudflare Pages with Wrangler. Tell me what account access and permission you need first.
AI · example response
I will check the site files and image paths. You will need to sign in to your Cloudflare account and approve creating or updating the Pages project before I upload.
You
I approve publishing to a new Pages project. Keep my current domain unchanged until I have checked the preview.
AI · example response
After the authorized upload, I will return the address Cloudflare provides and check images and links there. We can connect your domain after you approve the preview.
Steps to take
Give the agent your project
Use a file-capable AI agent with terminal access and keep index.html and assets together.
Authorize the upload
Sign in to the host and approve the specific project. The agent can run its supported CLI or API.
Check the real address
Open the returned URL; connect the custom domain only after checking the website.
Result to aim for: your website at a public address, then under your own domain.
Illustrative workflow. No live AI connection.
07 / Remaining tasks
What does this file workflow leave separate?
After editing, connect any real enquiry or booking service and ask your AI agent to publish the folder to a suitable host. Approve the account access and upload, check the returned public URL and then connect your domain. Hosting and AI access are separate from the template.
Choose a template. Make it your website with Gemini CLI.
Download the files, open the project in your AI tool and describe your business changes. You start from an existing design and can keep editing the saved website.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
