{"slug":"static-sites-ai","title":"Build a static site with AI","description":"Use an AI assistant like Claude, ChatGPT, or Gemini to generate a complete website, then deploy it on DanubeData in minutes — no coding experience required.","section":"Features","url":"https://docs.danubedata.ro/static-sites-ai","markdown_url":"https://docs.danubedata.ro/static-sites-ai.md","breadcrumbs":[{"title":"Features","slug":null},{"title":"Static Sites","slug":"static-sites"},{"title":"Build with AI","slug":"static-sites-ai"}],"headings":[{"level":1,"title":"Build a static site with AI","id":"build-a-static-site-with-ai"},{"level":2,"title":"Why use AI to build your site","id":"why-use-ai-to-build-your-site"},{"level":2,"title":"Step 1: Choose an AI assistant","id":"step-1-choose-an-ai-assistant"},{"level":2,"title":"Step 2: Write a prompt","id":"step-2-write-a-prompt"},{"level":3,"title":"Example: Personal portfolio","id":"example-personal-portfolio"},{"level":3,"title":"Example: Landing page for a product","id":"example-landing-page-for-a-product"},{"level":3,"title":"Example: Documentation site","id":"example-documentation-site"},{"level":3,"title":"Example: Event or conference page","id":"example-event-or-conference-page"},{"level":2,"title":"Step 3: Refine the output","id":"step-3-refine-the-output"},{"level":2,"title":"Step 4: Save the files","id":"step-4-save-the-files"},{"level":3,"title":"File structure for a single-page site","id":"file-structure-for-a-single-page-site"},{"level":3,"title":"File structure for a multi-page site","id":"file-structure-for-a-multi-page-site"},{"level":2,"title":"Step 5: Preview locally","id":"step-5-preview-locally"},{"level":2,"title":"Step 6: Deploy to DanubeData","id":"step-6-deploy-to-danubedata"},{"level":3,"title":"Option A: ZIP upload (simplest)","id":"option-a-zip-upload-simplest"},{"level":3,"title":"Option B: Git repository (for ongoing updates)","id":"option-b-git-repository-for-ongoing-updates"},{"level":3,"title":"Option C: CLI push (for scripting)","id":"option-c-cli-push-for-scripting"},{"level":2,"title":"Tips for better AI-generated websites","id":"tips-for-better-ai-generated-websites"},{"level":3,"title":"Be specific about design","id":"be-specific-about-design"},{"level":3,"title":"Request a single HTML file","id":"request-a-single-html-file"},{"level":3,"title":"Ask for responsive design","id":"ask-for-responsive-design"},{"level":3,"title":"Add real content","id":"add-real-content"},{"level":3,"title":"Request accessibility features","id":"request-accessibility-features"},{"level":3,"title":"Use frameworks if you prefer","id":"use-frameworks-if-you-prefer"},{"level":2,"title":"Example workflow: Portfolio site in 5 minutes","id":"example-workflow-portfolio-site-in-5-minutes"},{"level":2,"title":"Common site ideas to build with AI","id":"common-site-ideas-to-build-with-ai"},{"level":2,"title":"Next steps","id":"next-steps"}],"format":"markdown","word_count":1381,"content":"# Build a static site with AI\n\nUse an AI assistant like Claude, ChatGPT, or Gemini to generate a complete website, then deploy it on DanubeData in minutes — no coding experience required.\n\n## Why use AI to build your site\n\n- **No coding required** — Describe what you want in plain language and get working HTML, CSS, and JavaScript\n- **Fast iteration** — Regenerate or tweak designs in seconds\n- **Production-ready output** — Modern, responsive, accessible code you can deploy immediately\n- **Learn as you go** — Read the generated code to understand how websites work\n\n## Step 1: Choose an AI assistant\n\nAny LLM that can generate code works. Popular options:\n\n| Tool | Access | Best for |\n|------|--------|----------|\n| **Claude** | claude.ai | Clean code, thoughtful design, long outputs |\n| **ChatGPT** | chatgpt.com | General-purpose, widely available |\n| **Gemini** | gemini.google.com | Google ecosystem integration |\n| **GitHub Copilot** | VS Code extension | Inline code completion |\n\nThe examples below use Claude, but the prompts work with any AI assistant.\n\n## Step 2: Write a prompt\n\nTell the AI exactly what you want. The more specific your prompt, the better the result.\n\n### Example: Personal portfolio\n\n```\nCreate a single-page personal portfolio website as a single HTML file with\ninline CSS. Include:\n\n- My name: Maria Popescu\n- Title: UX Designer based in Bucharest\n- A short bio paragraph about my experience in product design\n- A section with 3 project cards (placeholder titles and descriptions)\n- Links to GitHub, LinkedIn, and email\n- Dark color scheme with blue accents\n- Responsive layout that works on mobile\n- Clean, modern design with good typography\n```\n\n### Example: Landing page for a product\n\n```\nCreate a landing page for a SaaS product called \"TaskFlow\" as a single HTML\nfile with inline CSS and minimal JavaScript. Include:\n\n- Hero section with headline, subtitle, and a call-to-action button\n- Three feature cards with icons (use emoji as icons)\n- A pricing section with Free, Pro, and Enterprise tiers\n- A footer with links and copyright\n- Light theme with a gradient hero background\n- Fully responsive, mobile-first design\n```\n\n### Example: Documentation site\n\n```\nCreate a documentation site for a REST API as a single HTML file with inline\nCSS and JavaScript. Include:\n\n- Sidebar navigation with sections: Getting Started, Authentication, Endpoints\n- Main content area with formatted code blocks\n- Dark code theme with syntax-like coloring\n- A search box in the header (visual only, no backend needed)\n- Responsive: sidebar collapses on mobile\n- Clean, readable typography similar to Stripe or Tailwind docs\n```\n\n### Example: Event or conference page\n\n```\nCreate a single-page website for a tech conference called \"DevSummit 2026\"\nas a single HTML file. Include:\n\n- Event date: October 15-16, 2026 in Cluj-Napoca, Romania\n- Hero with event name, date, location, and a \"Get Tickets\" button\n- Speaker section with 4 speaker cards (placeholder names and photos)\n- Schedule/agenda for both days\n- Sponsors section with placeholder logos\n- Registration form (visual only)\n- Modern, bold design with a dark background\n```\n\n## Step 3: Refine the output\n\nAfter the AI generates your site, you can ask follow-up questions to refine it:\n\n- \"Make the hero section taller and add a background image placeholder\"\n- \"Change the color scheme to green and white\"\n- \"Add a contact form at the bottom\"\n- \"Make the navigation sticky\"\n- \"Add smooth scroll to section links\"\n- \"Add a dark/light mode toggle\"\n- \"Optimize the layout for mobile — the cards should stack vertically\"\n\nEach follow-up gives you an updated version. Keep refining until you are happy with the result.\n\n## Step 4: Save the files\n\n1. Copy the generated HTML from the AI assistant\n2. Create a folder on your computer (e.g., `my-site`)\n3. Save the HTML as `index.html` inside that folder\n4. If the AI generated separate CSS or JS files, save those too\n\n### File structure for a single-page site\n\n```\nmy-site/\n  index.html\n```\n\n### File structure for a multi-page site\n\n```\nmy-site/\n  index.html\n  about.html\n  contact.html\n  css/\n    style.css\n  js/\n    main.js\n  images/\n    logo.png\n```\n\n## Step 5: Preview locally\n\nOpen `index.html` in your browser to see how it looks. If something is not right, go back to the AI assistant and ask for changes.\n\n## Step 6: Deploy to DanubeData\n\n### Option A: ZIP upload (simplest)\n\n1. Select all files inside your `my-site` folder and compress them into a ZIP file\n2. Log in to the DanubeData dashboard\n3. Go to **Static Sites** > **Create Static Site**\n4. Enter a name, choose the **Free** plan, select **ZIP Upload**\n5. Click **Create Static Site**\n6. On the site detail page, click **Upload** and select your ZIP file\n7. Wait 1-2 minutes for the build to complete\n8. Your site is live at `https://{slug}.pages.danubedata.ro`\n\n### Option B: Git repository (for ongoing updates)\n\n1. Create a Git repository (e.g., on GitHub) and push your files\n2. In the DanubeData dashboard, create a new static site with **Git Repository** deployment\n3. Enter your repository URL and branch\n4. Set the **Publish directory** to `/` (or wherever your `index.html` is)\n5. Set up a webhook for automatic deploys on push\n\nNow every time you update your files and push, the site redeploys automatically.\n\n### Option C: CLI push (for scripting)\n\n```bash\ntar -czf site.tar.gz -C ./my-site .\n\ncurl -X POST \\\n  -H \"Authorization: Bearer YOUR_API_TOKEN\" \\\n  -F \"file=@site.tar.gz\" \\\n  https://api.danubedata.ro/api/v1/static-sites/{site-id}/deploy\n```\n\n## Tips for better AI-generated websites\n\n### Be specific about design\n\nBad: \"Make me a website\"\nGood: \"Create a portfolio site with a dark navy background, white text, blue accent links, 3 project cards in a grid, and a sticky navigation bar\"\n\n### Request a single HTML file\n\nFor the simplest deployment, ask for everything in one file:\n\n\"Create this as a **single HTML file** with all CSS inline in a `<style>` tag and all JavaScript inline in a `<script>` tag.\"\n\nThis gives you one file to deploy — no build step, no dependencies.\n\n### Ask for responsive design\n\nAlways include \"responsive\" or \"mobile-friendly\" in your prompt. AI assistants sometimes generate desktop-only layouts unless you specify.\n\n### Add real content\n\nReplace placeholder text with your actual content before deploying. You can also ask the AI to help with copywriting:\n\n\"Write a professional bio for a software developer with 5 years of experience specializing in React and Node.js\"\n\n### Request accessibility features\n\n\"Include proper semantic HTML, alt text for images, and ARIA labels where appropriate\"\n\n### Use frameworks if you prefer\n\nIf you know a framework, ask the AI to use it:\n\n- \"Create this using Tailwind CSS via the CDN\"\n- \"Build this as a React app with Vite\"\n- \"Generate an Astro site with these pages\"\n\nFor framework-based sites, you will need to build locally first (`npm run build`) and upload the output directory as a ZIP.\n\n## Example workflow: Portfolio site in 5 minutes\n\nHere is a complete walkthrough from prompt to live site:\n\n**1. Prompt the AI:**\n\n```\nCreate a personal portfolio as a single HTML file with inline CSS.\nName: Alex Ionescu. Title: Backend Engineer. Bio: I build scalable APIs\nand microservices. 3 project cards: \"Payment Gateway API\", \"Real-time\nChat Service\", \"Data Pipeline Framework\". Links to GitHub and LinkedIn.\nDark theme with green accents. Mobile-friendly.\n```\n\n**2. Copy the output** into a file called `index.html`\n\n**3. Preview in browser** — open the file and verify it looks good\n\n**4. ZIP it:**\n```bash\nzip my-portfolio.zip index.html\n```\n\n**5. Deploy on DanubeData:**\n- Create Static Site > Free plan > ZIP Upload\n- Upload `my-portfolio.zip`\n- Wait for **Active** status\n\n**6. Done.** Your portfolio is live at `https://your-slug.pages.danubedata.ro`\n\n## Common site ideas to build with AI\n\n| Site type | Key prompt elements |\n|-----------|-------------------|\n| **Portfolio** | Name, title, bio, projects, links, photo placeholder |\n| **Landing page** | Product name, headline, features, pricing, CTA button |\n| **Resume/CV** | Name, experience, education, skills, contact info |\n| **Documentation** | Sidebar nav, code blocks, sections, search |\n| **Blog** | Post list, individual post layout, categories, author info |\n| **Event page** | Date, location, speakers, schedule, registration |\n| **Restaurant menu** | Categories, items with prices, location, hours |\n| **Coming soon** | Product name, email signup, countdown timer |\n| **Link-in-bio** | Name, photo, list of links (like Linktree) |\n| **Wedding site** | Date, venue, RSVP form, schedule, photo gallery |\n\n## Next steps\n\n- [Static Sites quick start](https://docs.danubedata.ro/static-sites-quickstart) — Full deployment walkthrough with all options\n- [Custom Domains](https://docs.danubedata.ro/static-sites-domains) — Add your own domain with automatic TLS\n- [Git Deployments](https://docs.danubedata.ro/static-sites-git) — Set up continuous deployment from GitHub/GitLab/Bitbucket\n- [Static Sites product documentation](https://docs.danubedata.ro/static-sites) — Full feature reference\n\n---\n\n**Questions?** Contact support at support@danubedata.ro\n","prev":{"title":"Quick Start","slug":"static-sites-quickstart","url":"https://docs.danubedata.ro/static-sites-quickstart","markdown_url":"https://docs.danubedata.ro/static-sites-quickstart.md","json_url":"https://docs.danubedata.ro/static-sites-quickstart.json"},"next":{"title":"Custom Domains","slug":"static-sites-domains","url":"https://docs.danubedata.ro/static-sites-domains","markdown_url":"https://docs.danubedata.ro/static-sites-domains.md","json_url":"https://docs.danubedata.ro/static-sites-domains.json"},"index_url":"https://docs.danubedata.ro/index.json"}