🚀 Article Studio - Setup Guide

Step-by-Step Installation & First Use

Prerequisites

Before starting, ensure you have:

Installation

1. Navigate to Article Studio

cd C:\dev\itblogpros\_automation\article-studio

2. Install Dependencies

npm install

This installs:

Installation takes: 1-2 minutes

3. Configure Environment

Option A: Use existing .env

If you already have a .env file in the project root (C:\dev\itblogpros\.env), you're all set! Article Studio will use it automatically.

Option B: Create new .env

Create .env in the article-studio directory:

# Required
GEMINI_API_KEY=your_gemini_api_key_here

# Optional (for Bing submission)
BING_WEBMASTER_API_KEY=your_bing_key_here

Where to get API keys:

  1. Gemini API Key:

  2. Bing Webmaster API Key:

First Run

Method 1: Quick Start (Recommended)

Windows:

START.bat

Just double-click START.bat and your browser opens automatically!

Mac/Linux:

npm start

Method 2: Development Mode

For development with auto-restart:

npm run dev

What Happens on First Run

  1. ✅ Creates SQLite database (database/articles.db)
  2. ✅ Initializes database tables
  3. ✅ Starts Express server on port 3000
  4. ✅ Opens browser to http://localhost:3000

You'll see:

╔════════════════════════════════════════════════════════════════╗
║                                                                ║
║          ITBlogPros Article Studio                            ║
║          Running on http://localhost:3000                      ║
║                                                                ║
║  Ready to generate, preview, and publish articles!            ║
║                                                                ║
╚════════════════════════════════════════════════════════════════╝

First Article Generation

Step 1: Enter Keyword

In the web interface:

  1. Type a keyword in the input field
  2. Example: "WiFi 7 routers 2025"
  3. Click "Generate Article"

Step 2: Watch Progress

The UI shows real-time progress:

Generating... 10%
Researching Bing queries...

Generating... 30%
Generating article with Gemini...

Generating... 60%
Validating Amazon ASINs...

Generating... 80%
Calculating quality score...

Generating... 100%
Article generated successfully!

Expected time: 2-3 minutes

Step 3: Review Results

After generation completes, you'll see:

Quality Score Guide:

Step 4: Preview Article

  1. Click "Start Preview Server"
  2. Wait 3 seconds
  3. Browser opens to http://localhost:8080
  4. Navigate your site to see the new article

Navigate to:

Step 5: Publish to GitHub

  1. Click "Publish" button on the article
  2. Review/edit commit message
  3. Check "Submit to Bing IndexNow" (optional)
  4. Click "Publish to GitHub"

The article is now:

Check deployment:

Daily Workflow

Morning Routine

# 1. Start Article Studio
cd C:\dev\itblogpros\_automation\article-studio
npm start

# 2. Browser opens automatically to localhost:3000

Generate Multiple Articles

Tip: You can generate multiple articles in a row:

  1. Enter keyword → Generate
  2. While waiting (2-3 min), research next keyword
  3. When done, enter next keyword → Generate
  4. Review first article while second generates

Batch generation:

End of Day

  1. Review all articles in dashboard
  2. Preview each article
  3. Publish the good ones (80+ score)
  4. Delete or edit the low-quality ones
  5. Stop preview server
  6. Close Article Studio (Ctrl+C in terminal)

Keyboard Shortcuts

File Locations

Generated Articles

C:\dev\itblogpros\posts\
└── 2025-01-16-your-article-slug.md

Database

C:\dev\itblogpros\_automation\article-studio\database\
└── articles.db

Logs

C:\dev\itblogpros\_automation\article-studio\logs\
└── server.log (if configured)

Configuration Options

Change Server Port

Edit server.js line 10:

const PORT = 3000; // Change to 3001, 8000, etc.

Adjust Preview Port

Eleventy preview uses port 8080 by default. To change:

Edit server.js around line 120:

global.previewProcess = spawn('npx', ['@11ty/eleventy', '--serve', '--quiet', '--port=8081'], {

Database Location

Edit services/database.js around line 8:

const dbPath = path.join(__dirname, '../database/articles.db');
// Change to custom location

Troubleshooting Setup

Error: "Port 3000 already in use"

Solution 1: Kill existing process

# Find process
netstat -ano | findstr :3000

# Kill process (replace <PID> with actual number)
taskkill /PID <PID> /F

Solution 2: Use different port (see Configuration above)

Error: "Cannot find module 'express'"

Solution: Install dependencies

cd C:\dev\itblogpros\_automation\article-studio
npm install

Error: "GEMINI_API_KEY not found"

Solution: Create .env file (see Installation Step 3)

Preview Server Won't Start

Check Eleventy:

cd C:\dev\itblogpros
npx @11ty/eleventy --version

If not installed:

cd C:\dev\itblogpros
npm install

Database Errors

Reset database:

cd C:\dev\itblogpros\_automation\article-studio
del database\articles.db
del database\articles.db-journal

Restart server - database recreates automatically.

Updating Article Studio

Pull Latest Changes

cd C:\dev\itblogpros
git pull origin main

Update Dependencies

cd C:\dev\itblogpros\_automation\article-studio
npm update

Clear Cache

# Delete node_modules and reinstall
rmdir /s /q node_modules
npm install

Advanced Features

Custom Article Templates

Coming soon! You'll be able to:

Scheduled Generation

Coming soon! Features:

Analytics Integration

Coming soon! Track:

Getting Help

Check Logs

Server logs show in terminal. Look for:

Common Issues

  1. "Cannot read property of undefined"

  2. "Timeout error"

  3. "Git push failed"

Still Stuck?

Next Steps

Once setup is complete:

  1. ✅ Generate your first test article
  2. ✅ Preview it locally
  3. ✅ Publish to GitHub
  4. ✅ Check live site
  5. ✅ Generate real articles!

You're ready to streamline your content creation! 🚀

Pro Tip: Keep Article Studio running all day. Just minimize the terminal and browser tab. Generate articles whenever inspiration strikes!

Happy writing! ✨