Website Installation
& Setup Guide

Before you begin, make sure your computer has these three free tools installed. If you already have them, skip to Step 2.

node -v
npm -v
git --version

After purchasing from Gumroad, you will receive a AstroBlogTemplate.zip file. Download it and extract it to a folder on your computer.

MyBlog/
├── public/                  # Static assets (images, fonts, favicons)
├── src/
│   ├── assets/              # Optimized images & author avatars
│   ├── components/          # Reusable UI components
│   ├── config/
│   │   ├── site.ts          # ⭐ Main site configuration
│   │   └── authors.ts       # ⭐ Author profiles
│   ├── content/
│   │   └── blog/            # ⭐ Your Markdown blog posts
│   ├── layouts/             # Page layout templates
│   ├── pages/               # Route pages (index, about, contact...)
│   ├── plugins/             # Remark plugins
│   ├── styles/              # Global CSS
│   └── utils/               # Utility functions
├── functions/
│   └── api/                 # Cloudflare Pages serverless functions
├── .env.example             # ⭐ Environment variables template
├── astro.config.mjs         # Astro framework configuration
├── package.json             # Project dependencies
└── tsconfig.json            # TypeScript configuration

1. 1Open Visual Studio Code.
2. 2Click File → Open Folder... (or File → Open... on macOS).
3. 3Navigate to your extracted project folder (e.g., D:\MyBlog) and click Select Folder.
4. 4If prompted "Do you trust the authors of the files?", click Yes, I trust the authors.
5. 5Open the integrated terminal: click Terminal → New Terminal from the top menu bar. A panel will appear at the bottom of the editor.

In the VS Code terminal, run the following command to download all required framework libraries:

$ npm install

This will take 1–2 minutes. A node_modules folder and package-lock.json file will be created automatically. Do not delete them.

Once dependencies are installed, start the local dev server to preview your blog:

$ npm run dev

1. 1
   In your project root, find the file .env.example. Rename it to exactly .env (remove the .example part).
2. 2
   Go to the License Portal and generate your license key using your Gumroad purchase receipt key.
3. 3
   Open your .env file and paste your license key:

   .envCopy

   LICENSE_KEY="ASTRO-XXXX-XXXX-XXXX-XXXX"

Open src/config/site.ts in VS Code. This single file controls all your website's branding. Edit the following fields:

export const SITE_CONFIG: SiteConfig = {
  name: "Your Blog Name",
  domain: "https://www.yourdomain.com",
  cdnDomain: "",                    // Leave empty if hosting images in /public
  contactEmail: "hello@yourdomain.com",
  title: "Your Blog - Your Tagline Here",
  description: "Your site meta description for SEO.",

  // Google AdSense (Optional — leave empty to disable)
  googleAdsenseId: "",
  adsenseLazyLoad: true,

  // Logo: each letter can have its own color
  logoLetters: [
    { char: "Y", color: "text-[#1a73e8]" },
    { char: "B", color: "text-[#d93025]" },
  ],
  logoTextSuffix: "Blog",

  // Social links — use "#" to hide any icon
  socials: {
    instagram: "https://www.instagram.com/yourprofile",
    twitter: "https://x.com/yourprofile",
    youtube: "#",    // Set "#" to hide
    ...
  }
};

Open src/config/authors.ts to configure author identities. Each author is keyed by their email address, which must match the author email used in the CMS or your blog post frontmatter.

export const AUTHOR_REGISTRY = {
  'you@example.com': {
    name: 'Your Full Name',
    slug: 'your-name',           // Used in URL: /author/your-name
    avatarUrl: defaultAvatar,       // Replace with your photo import
    bio: 'Your short bio goes here.',
    role: 'Editor-in-Chief',
  },
};

To use a custom avatar, place your image in src/assets/authors/ and import it at the top of the file.

Blog posts are Markdown (.md) files stored in src/content/blog/. Each file has a frontmatter header (between --- lines) followed by the article body.

---
title: "My First Blog Post"
description: "A short summary for SEO and social sharing."
pubDate: 2026-07-10T12:00:00.000Z
category: "Technology"
image: "https://example.com/banner.png"
image_caption: ""
author: "Your Full Name"
authorSlug: "your-name"
tags: ["web development", "astro", "tutorial"]
ai_summary: ""
---

Your article content goes here in Markdown.

## Subheading

Regular paragraph with **bold** and *italic*.

Open your .env file and add your analytics tracking IDs. All analytics are optional.

# Analytics (Optional)
PUBLIC_GA_ID="G-XXXXXXXXXX"        # Google Analytics 4
PUBLIC_CLARITY_ID="xxxxxxxxxx"     # Microsoft Clarity

# GA4 Data API for Popular Posts widget (Optional)
# Leave blank to show recent posts instead
GA4_PROPERTY_ID=""
GA4_CLIENT_EMAIL=""
GA4_PRIVATE_KEY=""

The GA4 Data API credentials are only needed if you want the Popular Posts widget to display posts ranked by actual traffic data. If left blank, the widget will automatically fall back to showing your most recent posts.

When you're happy with your blog, stop the dev server (Ctrl+C in the terminal) and compile the production build:

$ npm run build

This generates a dist/ folder containing fully optimized, static HTML files ready for deployment. All inline scripts are minified automatically and CSS is inlined for maximum performance.

You have two deployment paths. Choose the one that fits your workflow.

$ git init                                           # Initializes empty Git repo in your folder
$ git add .                                          # Stages all your website files
$ git commit -m "Initial commit"                     # Creates a local checkpoint
$ git branch -M main                                 # Sets branch name to 'main'
$ git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
$ git push -u origin main                            # Pushes code to GitHub

The functions/api/ directory contains serverless edge functions that run on Cloudflare Pages. These enable features like view counters, push notifications, and contact forms. Configure them through the Cloudflare Dashboard.