Firebase Setup Guide

Create a Firebase Project

Firebase is Google's free cloud database. It stores all your blog posts, subscribers, and messages online so everyone can see them.

1. Go to console.firebase.google.com and sign in with a Google account.
2. Click "Add project" → name it mnh-blog (or anything you like).
3. Disable Google Analytics for now (you can add it later) → Click "Create project".
4. Wait ~30 seconds for Firebase to set up your project.

Enable Firestore Database

Firestore is the cloud database where posts, subscribers and messages are stored.

1. In your Firebase project, click "Firestore Database" in the left sidebar.
2. Click "Create database".
3. Choose "Start in test mode" (we will add security rules in Step 5).
4. Select a region close to India (e.g., asia-south1 — Mumbai) → Click "Enable".

Enable Email/Password Authentication

This lets you log in to the admin panel securely. Only you know the password — it is never stored in the code.

1. Click "Authentication" in the left sidebar → "Get started".
2. Under Sign-in providers, click "Email/Password" → Enable the first toggle → "Save".
3. Click the "Users" tab → "Add user".
4. Enter your email address and a strong password → "Add user".
5. This email and password is what you use to log in to the admin panel.

Copy Your Firebase Config into js/config.js

This links your website to your Firebase project.

1. Click the gear icon ⚙️ next to "Project Overview" → "Project settings".
2. Scroll down to "Your apps" → Click the web icon </> → Register app (name: mnh-blog).
3. You will see a firebaseConfig object. Copy the values from it.
4. Open the file js/config.js in your code editor and paste the values replacing the placeholder text.

The file should look like this after you fill it in:

const firebaseConfig = {
  apiKey:            "AIzaSy...",
  authDomain:        "mnh-blog.firebaseapp.com",
  projectId:         "mnh-blog",
  storageBucket:     "mnh-blog.appspot.com",
  messagingSenderId: "1234567890",
  appId:             "1:1234567890:web:abc123"
};

Set Firestore Security Rules

These rules make sure:

• Anyone can read your blog posts (required for visitors to see them)
• Only you (logged-in admin) can create, edit, or delete posts
• Anyone can submit a newsletter signup or contact message
• Only you can read subscriber emails and contact messages

In Firebase Console → Firestore Database → Rules tab, replace the existing rules with this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // Blog posts: public read, admin write
    match /posts/{postId} {
      allow read: if true;
      allow create, update, delete: if request.auth != null;
    }

    // Newsletter subscribers: public create, admin read/delete
    match /subscribers/{subId} {
      allow create: if true;
      allow read, delete: if request.auth != null;
    }

    // Contact messages: public create, admin read/delete
    match /messages/{msgId} {
      allow create: if true;
      allow read, delete: if request.auth != null;
    }
  }
}

Click "Publish" to save the rules.

Deploy Your Website

Upload all the website files to any static hosting provider. Recommended free options:

Add Authorized Domains (Important)

Firebase needs to know which domains are allowed to use your database. Without this, login will fail on your live domain.

1. Firebase Console → Authentication → Settings tab → Authorized domains.
2. Click "Add domain" and add your live website domain (e.g., manjunathswamynh.com or your Netlify URL like yoursite.netlify.app).
3. localhost is already there for local testing.

Seed Your First Posts

After logging into the admin panel on your live site, the Dashboard will show a "Seed Sample Posts" button if your blog is empty. Click it to load 9 sample articles across all categories — Trading, Books, Trips, and Cooking. You can edit or delete them anytime.