Build and Host a Website from a Prompt Using Orchids.app

Avatar photoByAdil

If you’ve ever wanted to create a website just by describing it in plain English, Orchids.app is one of the most powerful AI tools to do it.
It can build everything from a personal portfolio to an Amazon-like e-commerce site, complete with layout, colour palette, and basic functionality, all from a single prompt.

What is Orchids.app?

Orchids.app is an AI website and app builder that converts natural language prompts into complete, production-ready web projects.

It can:

  • Generate responsive HTML/CSS/JS or React code
  • Clone an existing website’s design from a URL
  • Build different types of sites: landing pages, portfolios, blogs, or even small e-commerce apps
  • Allow direct code editing or visual block editing after generation
  • Host websites on its own infrastructure or export to platforms like Vercel, Netlify, or GitHub Pages

Developers can use it as a no-code/low-code prototyping engine, or as a code generator for rapid project setup.

Step 1: Getting Started

1. Visit Orchids

Go to https://www.orchids.app
Sign up or log in with GitHub, Google, or email.

2. Create a new project

Click “New Project” → choose “Website”

You’ll get a prompt field that says something like:

“Describe your website idea…”

Step 2: Generate Website from a Prompt

Example 1: Portfolio Site Prompt

Create a clean, responsive portfolio website for Ethena Sarkar, a Materials Science & Machine Learning Engineer.
Include:
- Hero section with intro and profile image
- About section (education and background)
- Project cards (4 projects with GitHub links)
- Skills section with icons
- Contact form (Name, Email, Message)
Use white and teal theme, rounded buttons, and smooth scroll animations.

After clicking Generate, Orchids will:

  • Build your layout automatically
  • Choose a color palette
  • Create animations and responsiveness
  • Generate editable HTML/CSS/JS or React code

Tip: You can refine it with another prompt like:

“Make the navigation sticky and add smooth scroll behavior.”

Example 2: Amazon-like E-Commerce Website

Build an e-commerce website similar to Amazon. Include:
- Home page: Hero section with featured products and promotional banners
- Category pages: (Electronics, Fashion, Home, Books, etc.) with filters and search functionality
- Product detail page: High-quality images, detailed description, price, ratings, and reviews
- User features: Login/Signup, Wishlist, Shopping Cart, Checkout, and Order Tracking
- Admin dashboard: Manage products, inventory, and orders
- Design: Modern, clean, and fast UI that’s fully responsive and works smoothly on macOS, Windows, Android, and iOS

Orchids will auto-generate multiple pages, each with mock products and navigation.

Step 3: Edit & Customise

Once your site is generated, click “Edit”.
You’ll enter the Visual Editor or Code Editor view.

Visual Editing

  • Click on any section to edit text, image, or button links
  • Adjust layout or color scheme using the side panel
  • Use the “+” button to add new components (like cards, forms, or grids)

Code Editing

Switch to Code View for fine-tuned control.
You can directly edit index.html, style.css, or even React components if generated that way.

Example: To change your site title manually: 

<title>Ethena Sarkar | Materials Scientist</title>

To update CSS styling: 

.hero {
  background-color: #e0f7f7;
  padding: 100px 20px;
  text-align: center;
}

To add animation: 

.project-card {
  transition: transform 0.3s ease;
}
.project-card:hover {
  transform: scale(1.05);
}

Step 4: Exporting Code

When your website looks ready, click “Export Code” in Orchids.
You’ll get a .zip file containing all code files.

Unzip and open it locally.

Folder structure example:

my-portfolio/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── assets/
│   └── images/
└── README.md

Now you can modify and run it locally.

Step 5: Local Preview & Development Commands

If your exported site is static (HTML/CSS/JS):
Open a terminal inside your folder and run a simple local server:

For Python 3:

python3 -m http.server 5500

Then open:
http://localhost:5500

For Node.js users:

Install a lightweight server: 

npm install -g serve
serve .

Now your site is running at http://localhost:3000.

Step 6: Hosting the Website

You can host directly from Orchids or use your own host.

Option 1: Host on Orchids

  1. Click “Publish”
  2. Choose a free subdomain like ethena.orchids.app
  3. Or connect your custom domain
  • Add a CNAME record in your DNS pointing to Orchids’ server

  • Example: 

     Type: CNAME
 Name: www
 Value: cname.orchids.app
  1. Wait a few minutes for DNS propagation
  2. SSL/HTTPS is automatically handled

Option 2: Self-Host via Vercel, Netlify, or GitHub Pages

Deploy via Vercel

npm install -g vercel
vercel

Deploy via Netlify (drag-and-drop UI or CLI)

npm install -g netlify-cli
netlify deploy

Deploy via GitHub Pages

  1. Push your code to a GitHub repo: 
   git init
   git add .
   git commit -m "Initial site"
   git remote add origin https://github.com/username/my-portfolio.git
   git push -u origin main
  1. Enable GitHub Pages in repo settings → Pages → Select branch → / (root)

Your site will go live at: 

https://username.github.io/my-portfolio/

Step 7: Add SEO and Analytics

To improve your site’s visibility and performance tracking:

Add meta tags

In <head> of index.html: 

<meta name="description" content="Portfolio of Ethena Sarkar, MTech in Materials Science & Machine Learning Engineer.">
<meta name="keywords" content="materials science, data analysis, machine learning, portfolio">
<meta name="author" content="Ethena Sarkar">

Add Google Analytics

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>

Developer Tips

  • Version Control:
    Always initialize a Git repository before editing. 
  git init
  git add .
  git commit -m "Initial Orchids version"
  • Backup Prompts:
    Save your original Orchids prompt in a PROMPT.md file for reproducibility.
  • Use Custom CSS Frameworks:
    You can import Tailwind or Bootstrap manually if you want advanced styling. 
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  • Favicon:
    Add a favicon for professionalism: 
  <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
  • Continuous Deployment:
    Connect GitHub repo with Vercel or Netlify for automatic redeployments on every commit.
  • Testing Responsiveness:
    Use Chrome DevTools → Device Toolbar to test mobile views.

Conclusion

Orchids.app gives developers and non-developers alike an unbelievably fast way to move from idea → production website.

You can:

  • Create a portfolio showcasing your academic and ML projects,
  • Prototype a startup landing page,
  • Or even simulate an Amazon-like storefront, all within minutes.

Then, by exporting and adding your developer touches (animations, integrations, analytics), you can go from AI-generated mockup → professional live website effortlessly.

Similar Posts