Hey folks, I’m Pradeep, a developer from India, I've been running my site on WordPress for years. My blog gets under 10,000 hits a month, which is decent for a small passion project, but managing WordPress – with its plugins, updates, spams and hosting fees – felt like a part-time job stealing time from my writing. I was paying $44/year (~₹3,800) to Namecheap for shared hosting, and server hiccups were slowing my site down. So, I made the leap to a serverless setup using AWS, and wow, what a game-changer! My site’s now lightning-fast, and my hosting costs? Practically zero, thanks to AWS Amplify’s free tier and S3 storage costing me just a few rupees for a couple of GBs. In this post, I’ll walk you through my journey moving to a cloud-based system with AWS Lambda, MongoDB, React, and Next.js. I’ll keep it simple, explain the techy stuff, and share tips that saved my sanity. If you’re a running a blog and looking to speed up your site and save big, this is for you. ## Why Go Serverless? The Big Picture Serverless means no server management – the cloud does all the heavy lifting. Your code runs only when someone visits your site, scaling automatically to handle traffic (like my <10k monthly hits). For my blog, this meant blazing-fast load times, near-zero costs, and no more sleepless nights fixing server crashes. Switching from Namecheap’s $44/year to AWS Amplify’s free tier (plus ~₹10-20/month for S3) was a massive win for my wallet. Here’s the setup I built: 1. **Backend API**: AWS Lambda functions (small code snippets that run on demand) with API Gateway as the gatekeeper. 2. **Admin Panel**: A React app for managing posts – think of it as a custom WordPress dashboard. 3. **Frontend**: Next.js for a super-fast, SEO-friendly public site. 4. **Database**: MongoDB Atlas to store my posts and data. 5. **Storage**: AWS S3 for images, costing pennies for a few GBs. Picture it like this (my attempt at ASCII art – old-school vibes!): ``` ┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐ │ Next.js UI │ │ React Admin │ │ WordPress │ │ (Frontend) │ │ (CMS Panel) │ │ (Source) │ └─────────────────┘ └──────────────────┘ └─────────────────┘ │ │ │ │ │ │ ▼ ▼ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ AWS API Gateway │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ AWS Lambda Functions │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Auth │ │ Articles │ │ Media │ │ │ │ Service │ │ Service │ │ Service │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ └─────────────────────────────────────────────────────────────────┘ │ │ │ ▼ ▼ ▼ ┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐ │ MongoDB │ │ AWS S3 │ │ AWS Cognito │ │ Atlas │ │ (Media) │ │ (Auth) │ └─────────────────┘ └──────────────────┘ └─────────────────┘ ``` **Tip**: If you’re new to cloud tech, dive into AWS Free Tier. Amplify’s free hosting is perfect for blogs with <10k hits/month, and S3 is dirt cheap – I pay ~₹10-20/month for 2GB of images! ## Step 1: Moving Your Content from WordPress to MongoDB First, I exported my WordPress content using the built-in export tool, which gives you an XML file with all your posts, pages, and media info. Super straightforward. Then, I wrote a Node.js script to convert that XML into Markdown (a simple text format for easy editing) and store it in MongoDB Atlas, a cloud database that’s like a flexible JSON store, unlike rigid MySQL tables. MongoDB is perfect for blogs because it handles varied data without fuss. I used the `html-to-md` library to convert WordPress’s HTML content to Markdown, making it easier to edit and display. Here’s my updated script, with comments to explain the key bits: ```javascript // import-to-mongo.js const { MongoClient } = require("mongodb"); const fs = require("fs"); const htmlToMd = require("html-to-md"); // Load your WordPress export (convert XML to JSON first using an online tool like xml2json) const data = JSON.parse(fs.readFileSync("./convertjson.json", "utf-8")); const posts = data.rss.channel.item || []; // Connect to MongoDB Atlas (replace with your own connection string) const uri = "mongodb+srv://yourusername:yourpassword@cluster.mongodb.net/yourblog"; const dbName = "yourblog"; // Create a unique ID for each post function generateArticleId() { const timestamp = Date.now(); const randomString = Math.random().toString(36).substring(2, 10); return `article_${timestamp}_${randomString}`; } // Calculate reading time – readers love this feature! function calculateReadTime(content) { const wordsPerMinute = 200; // Average reading speed const wordCount = content.replace(/<[^>]*>/g, "").split(/\s+/).length; return Math.ceil(wordCount / wordsPerMinute); } // Convert HTML to Markdown and clean up function convertToMarkdown(content) { if (!content) return ""; // Remove HTML comments and convert to Markdown const cleaned = content.replace(//g, ""); return htmlToMd(cleaned); } // Process and save posts to MongoDB async function processArticles() { const client = new MongoClient(uri); try { await client.connect(); const db = client.db(dbName); const articles = db.collection("articles"); for (const item of posts) { if (item.post_type?.["__cdata"] === "post") { const article = { articleId: generateArticleId(), title: item.title?.["__cdata"] || item.title || "", content: convertToMarkdown( item.content?.["__cdata"] || item.content || "" ), excerpt: item.excerpt?.["__cdata"] || item.excerpt || "", status: "published", createdAt: new Date( item.pubDate?.["__cdata"] || item.pubDate || Date.now() ), slug: (item.title?.["__cdata"] || item.title || "") .toLowerCase() .replace(/[^a-z0-9]+/g, "-") .trim(), readTime: calculateReadTime( item.content?.["__cdata"] || item.content || "" ), }; await articles.insertOne(article); console.log(`✅ Added: ${article.title}`); } } } finally { await client.close(); } } processArticles().catch(console.error); ``` **What’s happening?** This script reads your WordPress export (converted to JSON), converts HTML content to Markdown using `html-to-md`, removes HTML comments, and saves everything to MongoDB. Storing content as Markdown makes editing and rendering posts easier. **Tip**: Install `html-to-md` with `npm install html-to-md`. Test with a few posts first! I messed up slugs once and had to fix 30 posts manually. Use an online XML-to-JSON converter like xml2json if your export is complex. **Why I loved it**: I kept post dates and authors, added a “5 min read” feature, and Markdown makes my content lightweight and fast to load for my visitors. ## Step 2: Shifting Images to AWS S3 WordPress stores images in folders (like `wp-content/uploads`). I downloaded them all and uploaded them to AWS S3 – cloud storage that’s fast, cheap, and reliable. For my blog’s <10k hits/month, S3 costs me ~₹10-20 for 2-3GB of images, a fraction of my old $44/year Namecheap bill. Plus, S3’s CDN (Content Delivery Network) makes images load super-fast, even for my readers across India. Here’s my script to move images and update the database: ```javascript // import-to-s3.js const fs = require("fs"); const path = require("path"); const { S3 } = require("aws-sdk"); const { MongoClient } = require("mongodb"); require("dotenv").config(); // Set up S3 client (Mumbai region for low latency in India) const s3 = new S3({ region: "ap-south-1", accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, }); const BUCKET = process.env.AWS_S3_BUCKET_NAME; async function uploadImage(filePath, s3Key) { try { const content = fs.readFileSync(filePath); const contentType = path.extname(filePath).toLowerCase() === ".png" ? "image/png" : "image/jpeg"; await s3 .putObject({ Bucket: BUCKET, Key: s3Key, Body: content, ContentType: contentType, }) .promise(); return `https://${BUCKET}.s3.ap-south-1.amazonaws.com/${s3Key}`; } catch (error) { console.error(`❌ Failed to upload ${s3Key}: ${error.message}`); throw error; } } async function run() { const client = new MongoClient(process.env.MONGODB_URI); try { await client.connect(); const db = client.db("yourblog"); const articles = db.collection("articles"); // Map image filenames to article slugs const imageMappings = { "my-post-image.jpg": "my-post-slug", // Add your mappings here }; for (const [imageFile, slug] of Object.entries(imageMappings)) { const localPath = path.join(__dirname, "Uploads", imageFile); if (fs.existsSync(localPath)) { const s3Key = `blog-images/${imageFile}`; const s3Url = await uploadImage(localPath, s3Key); await articles.updateOne( { slug }, { $set: { featuredImage: { url: s3Url, alt: imageFile.replace(/\.[^/.]+$/, ""), }, }, } ); console.log(`✅ Updated article: ${slug}`); } } } finally { await client.close(); } } run().catch(console.error); ``` **What’s happening?** This script uploads images to S3 and updates MongoDB with new URLs. The `ContentType` ensures browsers display images correctly, boosting load times. **Why it’s awesome**: S3 is a steal compared to Namecheap’s $44/year – I pay ~₹10-20/month for 2-3GB, and the CDN ensures images load instantly, even on slow Indian mobile networks. **Tip**: For lots of images, use AWS CLI (`aws s3 cp`) for faster uploads. Check bucket permissions to keep images public but secure. ## Step 3: Building a Lightning-Fast Backend with AWS Lambda I used AWS CDK (Cloud Development Kit) to set up my backend. CDK lets you write code to create cloud resources, skipping the AWS console’s endless clicks. My backend runs on AWS Lambda – tiny functions that wake up only when needed, perfect for my <10k hits/month. Here’s a simplified CDK setup: ```javascript //main.ts import * as cdk from "aws-cdk-lib"; import * as lambda from "aws-cdk-lib/aws-lambda"; import * as apigateway from "aws-cdk-lib/aws-apigateway"; class BlogStack extends cdk.Stack { constructor(scope, id, props) { super(scope, id, props); // Create a Lambda function const articleFunction = new lambda.Function(this, "ArticleFunction", { runtime: lambda.Runtime.NODEJS_20_X, code: lambda.Code.fromAsset("dist/services/articles"), handler: "index.handler", environment: { MONGODB_URI: process.env.MONGODB_URI, }, }); // Set up API Gateway const api = new apigateway.RestApi(this, "BlogApi", { restApiName: "Blog API", defaultCorsPreflightOptions: { allowOrigins: apigateway.Cors.ALL_ORIGINS, allowMethods: apigateway.Cors.ALL_METHODS, }, }); const articles = api.root.addResource("articles"); articles.addMethod( "GET", new apigateway.LambdaIntegration(articleFunction) ); } } const app = new cdk.App(); new BlogStack(app, "BlogStack", { env: { region: "ap-south-1" } }); ``` **What’s happening?** This creates a Lambda function and an API endpoint (like `yourblog.com/api/articles`). Lambda’s pay-per-use model means I pay almost nothing for my <10k hits/month. **Tip**: Start with one Lambda function, then split into auth, articles, etc., if your traffic grows beyond 10k/month. I added AWS Cognito for logins – like a ready-made user system. My service layer keeps logic clean: ```javascript //articles.service.ts export class ArticlesService { async listArticles() { const db = await getMongoDb(); // Your MongoDB connection return db.collection("articles").find({ status: "published" }).toArray(); } } ``` **Why it’s cool**: Clean code saves time, and Lambda’s low cost is perfect for small blogs like mine with <10k hits/month. ## Step 4: Crafting a React Admin Panel For managing posts, I built a React admin panel – a custom dashboard that’s smoother than WordPress’s clunky editor. React is a JavaScript library for building UIs, like snapping together Lego blocks. Here’s the main structure: ```jsx //App.tsx import { Routes, Route } from "react-router-dom"; import PostsList from "./components/PostsList"; import NewPost from "./components/NewPost"; function App() { return ( } /> } /> ); } export default App; ``` For writing posts, I used a Markdown editor: ```jsx //NewPost.tsx import MDEditor from "@uiw/react-md-editor"; import { useState } from "react"; export default function NewPost() { const [content, setContent] = useState(""); const [title, setTitle] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); // Call API to save post console.log("Saving post:", { title, content }); }; return ( ); } ``` **What’s happening?** The `MDEditor` lets me write posts in Markdown with a live preview – way better than WordPress’s editor. React makes the UI snappy. **Tip**: Not a coder? Grab a React admin template from GitHub. Use Redux Toolkit for data management – it’s like a shared notebook for your app’s state. ## Step 5: Building the Next.js Frontend Next.js is like React but optimized for websites, with built-in speed and SEO perks. My blog’s homepage lists posts, and each post has its own page, all loading lightning-fast for my <10k hits/month. Here’s a simplified homepage: ```jsx //page.tsx export default async function Home() { const response = await fetch( `${process.env.API_URL}/articles?status=published`, { next: { revalidate: 3600 }, // Update every hour } ); const { data: { articles }, } = await response.json(); return (

{articles.map((article) => (

{article.title}

{article.excerpt}

))}

); } ``` **What’s happening?** This fetches published posts and displays them as cards. Next.js’s Incremental Static Regeneration (ISR) rebuilds pages hourly, keeping things fast. **Tip**: Host on AWS Amplify (free for small sites like mine) or Vercel. ISR is a lifesaver for blogs with moderate traffic. ## Step 6: Security and Authentication I used AWS Cognito for user logins – it handles sign-ups, sign-ins, and password resets securely. Here’s an example: ```javascript //signin.ts import { CognitoIdentityProviderClient, InitiateAuthCommand, } from "@aws-sdk/client-cognito-identity-provider"; export const handler = async (event) => { const client = new CognitoIdentityProviderClient({ region: "ap-south-1" }); const { email, password } = JSON.parse(event.body || "{}"); try { const command = new InitiateAuthCommand({ AuthFlow: "USER_PASSWORD_AUTH", ClientId: process.env.COGNITO_CLIENT_ID, AuthParameters: { USERNAME: email, PASSWORD: password }, }); const response = await client.send(command); return { statusCode: 200, body: JSON.stringify({ accessToken: response.AuthenticationResult?.AccessToken, }), }; } catch (error) { return { statusCode: 401, body: JSON.stringify({ error: "Login failed" }) }; } }; ``` **What’s happening?** This Lambda function logs users into the admin panel securely via Cognito, perfect for managing my blog. **Tip**: Use Zod for input validation and set up CORS to avoid access issues. ## Step 7: Deployment and Costs I deployed my backend with AWS CDK and my admin panel and frontend with AWS Amplify. Here’s a simple deployment script: ```bash #!/bin/bash echo "🚀 Deploying..." cd api && pnpm deploy # Deploy backend cd ../admin && pnpm build && aws amplify publish # Deploy admin cd ../ui && pnpm build && aws amplify publish # Deploy frontend echo "✅ Done!" ``` **Costs**: My old Namecheap hosting cost $44/year (~₹3,600). Now, with AWS Amplify’s free tier and S3’s ~₹10-20/month for 2-3GB, my costs are practically zero for <10k hits/month. Lambda and API Gateway add a few rupees, making this way cheaper than WordPress hosting. **Tip**: Use Mumbai (ap-south-1) for low latency in India. Monitor costs in AWS Cost Explorer to stay in the free tier. ## Lessons Learned and Final Tips This migration made my blog lightning-fast and dirt cheap, perfect for my <10k monthly hits. Here’s what I learned: - **Test in stages**: I lost one post early on – back up everything! - **Start small**: Migrate a few posts first to catch issues. - **Leverage free tiers**: AWS Amplify and MongoDB Atlas’s M0 tier are free for small blogs. - **Monitor performance**: Use AWS CloudWatch to spot errors. **Checklist**: - [ ] Export WordPress XML - [ ] Convert and migrate content to MongoDB - [ ] Upload images to S3 - [ ] Build and test backend, admin, frontend - [ ] Deploy with Amplify and CDK - [ ] Check all links and images post-migration Switching to serverless slashed my costs from ₹3,800/year to pocket change, made my site blazing-fast for my <10k monthly visitors, and let me focus on writing. If you’re in India, use ap-south-1 for speed. Got questions? Drop a comment – I’d love to help! Cheers, Pradeep _Updated: August 2025 – Still loving serverless!_

From WordPress to Lightning-Fast Serverless: How I Slashed Costs to Zero

From WordPress to Lightning-Fast Serverless: How I Slashed Costs to Zero