CMS Dashboard Installation
& Setup Guide

Ensure you have generated the following keys, accounts, and runtime tools before deploying the CMS:

1. 1
   Extract the downloaded DashboardTemplate.zip folder to your desired workspace (e.g., D:\MyBlogDashboard).
2. 2
   Open this folder inside **VS Code** (File → Open Folder...).
3. 3
   Open the VS Code Terminal and run the install command to download dependencies:

   TerminalCopy

   $ npm install

1. 1Log in to your Cloudflare Dashboard.
2. 2Look at the right sidebar of the homepage under the "Account ID" box (or look inside the address bar URL right after `dash.cloudflare.com/` e.g., `dash.cloudflare.com/d8f76e73...`).
3. 3Copy this Account ID string and keep it ready. You will paste it in the `.env` file later.

The dashboard runs serverless on Cloudflare and requires Key-Value storage (KV) for user logins/caches, an S3-compatible bucket (R2) for media files, and a SQL database (D1) for push alert subscriptions.

Open wrangler.deploy.json in your project. We must bind the databases we created in Step 4 to this configuration file.

{
  "name": "my-cms-dashboard",
  "kv_namespaces": [
    { "binding": "CACHE_KV", "id": "PASTE_CACHE_KV_ID" },
    { "binding": "SESSION",  "id": "PASTE_SESSIONS_KV_ID" }
  ],
  "r2_buckets": [
    { "binding": "BUCKET", "bucket_name": "blog-images" }
  ],
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "push-db",
      "database_id": "PASTE_D1_DATABASE_ID"
    }
  ],
  "vars": {
    "IMAGE_PUBLIC_BASE_URL": "https://cdn.yourdomain.com",
    "BLOG_BASE_URL": "https://www.yourdomain.com",
    "CF_ZONE_TAG": "your-cloudflare-zone-id",   // Domain Overview -> Zone ID
    "BING_INDEXNOW_KEY": ""
  }
}

Since the CMS writes directly to your blog repository as Markdown files, you must generate a GitHub Personal Access Token (PAT) with repository read/write access.

1. Open browser and navigate to github.com/settings/tokens.
2. Click "Generate new token" → choose Generate new token (classic).
3. Give it a description (e.g., blog-cms-token) and check the main `repo` checkbox scope (gives complete control of private repositories).
4. Scroll down, click "Generate token", and copy the token string immediately.

Open src/config/sitesConfig.ts in VS Code and link it to your GitHub username and repository name (which holds your Astro static blog):

export const sitesConfig = {
  mysite: {
    id: "mysite",
    name: "My Blog Name",
    url: "https://www.yourdomain.com",
    gscProperty: "sc-domain:yourdomain.com", // Used for Google Search Console API
    githubOwner: "your-github-username",
    githubRepo: "your-blog-repo-name",    // AstroBlog repository name
    branch: "main",
    contentPath: "src/content/blog",        // Path to markdown posts in blog repo
  }
};

Copy `.env.example` in the root folder, rename it to exactly `.env`, and fill in the active keys:

LICENSE_KEY="ASTRO-XXXX-XXXX"            // Your CMS commercial license key
GITHUB_PAT="ghp_XXXXXXXXXXXXXXXXXXXX"   // Classic PAT token from Step 6
GEMINI_API_KEY="AIzaSyXXXXXXXXXXXXXXXXXX" // Google Gemini AI Studio API key
IMAGE_PUBLIC_BASE_URL="https://cdn.yourdomain.com" // Cloudflare R2 Public URL
CF_ACCOUNT_ID="your-cloudflare-id"      // Cloudflare Account ID

# Optional integration keys
PEXELS_API_KEY=""
PIXABAY_API_KEY=""
UNSPLASH_API_KEY=""
GNEWS_API_KEY=""

To protect your CMS backend from unauthorized access, password entries are hashed using the industry-standard **PBKDF2-SHA256** algorithm. The system does not store plain text passwords. Instead, you generate a secure salt-hashed string and register it inside a JSON array configuration called `USERS_JSON`.

$ node scripts/hash-password.mjs "MySecurePassWord123"

[{"email":"admin@yourdomain.com","hash":"PASTE_YOUR_GENERATED_HASH_HERE","role":"admin"}]

[
  {"email":"admin@yourdomain.com","hash":"hash_1","role":"admin"},
  {"email":"editor@yourdomain.com","hash":"hash_2","role":"editor"}
]

USERS_JSON='[{"email":"admin@yourdomain.com","hash":"a7b3c2...:9d8e1f...","role":"admin"}]'

$ npx wrangler secret put USERS_JSON -c wrangler.deploy.json

To inspect article indexing state or request immediate indexing directly from the CMS using the Google Search Console API, follow these setup steps:

$ npm run get-refresh-token

$ npx wrangler secret put GOOGLE_CLIENT_ID -c wrangler.deploy.json
$ npx wrangler secret put GOOGLE_CLIENT_SECRET -c wrangler.deploy.json
$ npx wrangler secret put GOOGLE_REFRESH_TOKEN -c wrangler.deploy.json

Now that wrangler bindings and secrets are configured, execute the local deployment script to publish your dashboard directly to Cloudflare:

$ npm run deploy

This will automatically login to Cloudflare via browser if you are not authenticated locally, compile the production bundles, build database schemas, and deploy your live dashboard Worker app.

1. In Cloudflare dashboard, go to Workers & Pages → Overview and select your deployed Worker dashboard app.
2. Navigate to Settings → Domains & Routes → Add → Custom Domain.
3. Enter your custom dashboard URL subdomain (e.g., dash.yourdomain.com) and click save. Cloudflare will automatically set up the DNS routing records and SSL certifications.
4. Open wrangler.deploy.json in your project, and append your custom domain route:
   wrangler.deploy.json

   "routes": [
     {
       "pattern": "dash.yourdomain.com",
       "custom_domain": true
     }
   ]