DEV Community

Юрий
Юрий

Posted on

How I Built a Complete Web Studio Site in 5 Days (with AI Chat, Blog, and Analytics)

#javascript #python #tutorial #webdev

How I Built a Complete Web Studio Site in 5 Days

Building a website is easy. Building a complete website with AI chat, multi-language support, real-time analytics, and SEO optimization in 5 days? That's a different challenge.

Here's exactly how I did it.

Day 1: Structure and Design

Tech Stack

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Backend: Python (Flask) on PythonAnywhere
  • AI: Cohere API for chat
  • Analytics: Custom tracker + Google Analytics + Yandex.Metrica

I chose vanilla JS over React/Vue for one reason: speed. No build tools, no dependencies, no complexity.

File Structure 

site/
├── index.html
├── services.html
├── portfolio.html
├── articles.html
├── blog/
│   ├── *.html (23 posts)
├── en/
│   ├── index.html
│   ├── blog/
│   │   ├── *.html (23 posts)
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── *.svg
├── sitemap.xml
└── robots.txt
Enter fullscreen mode Exit fullscreen mode

Day 2: Multi-Language Support (i18n)

The site supports Russian and English. Here's the simple i18n system:

<span data-i18n="nav-services" data-en="Services">Услуги</span>
Enter fullscreen mode Exit fullscreen mode 
function toggleLang() {
    const isEn = document.documentElement.lang === 'en';
    document.querySelectorAll('[data-i18n]').forEach(el => {
        el.textContent = isEn ? el.dataset.i18n : el.dataset.en;
    });
}
Enter fullscreen mode Exit fullscreen mode

No framework needed. 20 lines of JavaScript.

Day 3: AI Chat Integration

The chat connects to Cohere's command-r model:

# Flask endpoint
@app.route('/api/chat', methods=['POST'])
def chat():
    data = request.json or {}
    message = data.get('message', '')

    # System prompt for WebStudio
    prompt = """You are a helpful assistant for WebStudio...
    Answer questions about web development, Telegram bots, and SEO."""

    # Call Cohere API
    r = requests.post(
        'https://api.cohere.com/v1/chat',
        json={'message': f'{prompt}\n\nClient question: {message}',
              'model': 'command-r-08-2024', 'temperature': 0.3},
        headers={'Authorization': f'Bearer {COHERE_API_KEY}'},
        timeout=30
    )
    reply = r.json().get('text', '')

    return jsonify({'reply': reply})
Enter fullscreen mode Exit fullscreen mode

The chat widget on the frontend:

document.getElementById('chatForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const input = e.target.querySelector('input');
    const message = input.value;

    // Add user message to chat
    addMessage(message, 'user');
    input.value = '';

    // Get bot response
    const response = await fetch('/api/chat', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({message})
    });

    const data = await response.json();
    addMessage(data.reply, 'bot');
});
Enter fullscreen mode Exit fullscreen mode

Day 4: Real-Time Statistics

The stats page shows live data from PythonAnywhere:

@app.route('/api/stats')
def stats():
    # Read from JSON file
    with open('stats.json', 'r') as f:
        data = json.load(f)

    return jsonify({
        'total_raw': data['total_raw'],
        'total_real': data['total_real'],
        'unique_ips': len(data['unique_ips']),
        'today_real': data['today_real'],
        'pages': sorted(data['pages'].items(), 
                       key=lambda x: x[1], reverse=True)[:10]
    })
Enter fullscreen mode Exit fullscreen mode

The frontend auto-retries if the server is sleeping:

async function loadStats() {
    for (let i = 0; i < 30; i++) {
        try {
            const response = await fetch('/api/stats');
            if (response.ok) {
                const data = await response.json();
                displayStats(data);
                return;
            }
        } catch (e) {
            await new Promise(r => setTimeout(r, 2000));
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Day 5: SEO and Deployment

SEO Checklist

  • [x] Meta tags for all pages
  • [x] Open Graph tags
  • [x] Schema.org structured data
  • [x] Sitemap.xml with hreflang
  • [x] Robots.txt
  • [x] Canonical URLs
  • [x] Image alt tags
  • [x] Semantic HTML

Deployment 

# Push to GitHub
git add .
git commit -m "Deploy"
git push

# GitHub Pages auto-deploys from main branch
Enter fullscreen mode Exit fullscreen mode

Results After 2 Weeks

  • 47 pages in the sitemap (23 articles RU + 23 EN + main pages)
  • 69 real visits tracked (bots filtered out)
  • 14 unique IPs
  • 5 leads generated
  • 46 blog posts published (23 RU + 23 EN)

Key Lessons

  1. Vanilla JS is enough for most websites
  2. PythonAnywhere free tier works for small projects
  3. Content is king — 46 posts (RU + EN) drive most traffic
  4. AI chat works 24/7 - it answers questions and collects leads while you sleep
  5. Multi-language doubles your potential audience

Yuriy is the founder of WebStudio. The site was built in 5 days using vanilla HTML/CSS/JS and Python. View the source code on GitHub.

Top comments (0)