Skip to content
ForgeDocs logoForgeDocs7.3.8

First Setup

First Setup

Section titled “First Setup”

After running ForgeDocs locally, the next step is to configure it for your project. This guide covers the essential settings you need to change before deploying.

Most configuration happens in three files:

  • astro.config.mjs — site URL and sidebar navigation
  • src/data/seo.json — SEO metadata
  • src/data/site.json — site name, version, tagline

Step 1 — Set Your Site URL

Section titled “Step 1 — Set Your Site URL”

Open astro.config.mjs in your code editor. Find the site property:

export default defineConfig({
  site: 'https://forgedocs.pages.dev',
  // ...
});

Change it to your domain:

export default defineConfig({
  site: 'https://your-domain.com',
  // ...
});

Why this matters: Astro uses this URL to generate canonical URLs and sitemap entries. If it’s wrong, search engines may see duplicate pages.

Don’t have a domain yet? Leave it as is for now. You can update it later before deploying.

Step 2 — Update SEO Metadata

Section titled “Step 2 — Update SEO Metadata”

Open src/data/seo.json. This file controls:

  • Page title (shown in browser tabs and search results)
  • Meta description (shown in search results)
  • Keywords
  • Open Graph image (shown when sharing on social media)
  • Canonical URL

Example:

{
  "title": "Your Site — Tagline Here",
  "description": "A short description of your site for search engines.",
  "keywords": ["your", "keywords", "here"],
  "ogImage": "https://your-domain.com/og-image.jpg",
  "canonical": "https://your-domain.com",
  "author": "Your Name"
}

Tips:

  • Keep the title under 60 characters
  • Keep the description under 160 characters
  • Use 5–10 relevant keywords
  • Use a 1200×630 image for ogImage

Step 3 — Update Site Metadata

Section titled “Step 3 — Update Site Metadata”

Open src/data/site.json. This file controls:

  • Site name
  • Version number (shown in the navbar)
  • Tagline
  • Description

Example:

{
  "name": "Your Site",
  "version": "1.0.0",
  "tagline": "Your tagline here",
  "description": "A longer description of your site.",
  "domain": "your-domain.com",
  "demo": "https://your-domain.com",
  "price": "$79",
  "license": "Lifetime — unlimited projects"
}

Step 4 — Update Navigation

Section titled “Step 4 — Update Navigation”

Open src/data/navbar.json. This file controls the links in the top navigation bar.

{
  "brand": {
    "label": "Your Site",
    "href": "/",
    "logo": "/logo.svg"
  },
  "links": [
    { "label": "Features", "href": "/features" },
    { "label": "Contact", "href": "/contact" },
    { "label": "Documentation", "href": "/introduction" },
    { "label": "Buy for $79", "href": "https://your-gumroad-link", "variant": "primary" }
  ]
}

Notes:

  • variant: "primary" renders the link as a button
  • Links without variant render as plain text links
  • The brand section controls the logo and site name in the navbar

Step 5 — Update Footer

Section titled “Step 5 — Update Footer”

Open src/data/footer.json. This file controls the footer links and social icons.

{
  "brand": {
    "label": "Your Site",
    "tagline": "Your tagline here",
    "logo": "/logo.svg"
  },
  "columns": [
    {
      "title": "Product",
      "links": [
        { "label": "Features", "href": "/features" },
        { "label": "Pricing", "href": "/#pricing" }
      ]
    }
  ],
  "social": [
    { "label": "GitHub", "href": "https://github.com/yourname", "icon": "github" },
    { "label": "Twitter", "href": "https://twitter.com/yourname", "icon": "twitter" }
  ],
  "bottom": {
    "copyright": "© 2026 Your Site. All rights reserved.",
    "links": [
      { "label": "Terms", "href": "/terms" },
      { "label": "Privacy", "href": "/privacy" }
    ]
  }
}

Available social icons: github, discord, twitter

Section titled “Step 6 — Update Logo”

Replace public/logo.svg with your own logo.

Requirements:

  • Format: SVG (recommended) or PNG
  • Size: 24–32px height for the navbar
  • Color: Should work on both light and dark backgrounds

If your logo is a PNG, update the path in navbar.json and footer.json.

Step 7 — Update Favicon

Section titled “Step 7 — Update Favicon”

Replace public/favicon.svg with your own favicon.

Recommended:

  • Format: SVG for modern browsers
  • Also add public/apple-touch-icon.png (180×180px) for iOS
  • Also add public/favicon.ico for older browsers

Step 8 — Test Your Changes

Section titled “Step 8 — Test Your Changes”

After updating the files, check your site:

  1. Save all files
  2. The dev server reloads automatically
  3. Open http://localhost:4321
  4. Verify:
    • Site name and tagline appear in the navbar
    • Navigation links work
    • Footer links work
    • Favicon appears in the browser tab

What’s Next

Section titled “What’s Next”

If you’re using Code Only — skip to deployment:

→ Push to GitHub

If you’re using Code + Decap CMS — set up the CMS:

→ Decap CMS Local

Need Help?

Section titled “Need Help?”

If you’re stuck: