Work with Data — Astro Template Guide

documentation

Publih On: 2023-12-02

Learn how to configure your Blacks Astro JS template using JSON data files.

Full documentation: Configuration guide →

---

Where Data Files Live

All configuration data lives in:

src/data/

Two files control the entire site:

File	Purpose
config.json	Site-wide settings — title, description, navigation, social, contact
home.json	Homepage content — hero, features, gallery, services

Both files use the same principle: change the values, save the file, the site updates.

---

Configure config.json

Open src/data/config.json and update the values to match your project.

Example structure:

{
    "url": "insert your website url domain here",
    "title": "insert title in here",
    "description": "Your website description",
    "favicon": "url image for your favicon",
    "image": "url image for image banner",
    "navbar": "Navbar title in here",
    "nav_list": [
      {
        "nav": "Home",
        "link": "/"
      },
      {
        "nav": "This is nav name",
        "link": "url for your nav menu in here"
      }
    ],
    "social": [
      {
        "title": "Facebook",
        "link": "https://www.fiverr.com/creativitas/"
      },
      {
        "title": "This is your social media name",
        "link": "social media url in here"
      },
      {
        "title": "Instagram",
        "link": "https://www.fiverr.com/creativitas/create-your-custom-website-and-app"
      }
    ],
    "contact": {
      "address": "insert your address in here",
      "city": "insert city here",
      "country": "Insert country in here",
      "phone": "insert your phone number here",
      "email": "insert your email here"
    }
}

---

Add a New Navbar Item

To add a new menu item, copy this block and paste it inside nav_list:

{
  "nav": "New nav name",
  "link": "url for your nav menu"
}

---

Add a New Social Link

To add a new social link, copy this block and paste it inside social:

{
  "title": "Your Social Name",
  "link": "your social url"
}

---

Configure home.json

Next, move to src/data/home.json. The concept is the same as config.json — just change the values to match your homepage.

home.json controls:

• Hero section — title, description, buttons, image
• Features section — feature cards
• Gallery section — image gallery grid
• Services section — service list
• And more

---

Tips for Working with JSON

1. Don’t change the field names — the words on the left of the colons. Only change the values.
2. Use double quotes — "text" — not single quotes.
3. No trailing commas — the last item in a list should not have a comma.
4. Keep a backup — before making large changes, copy the file somewhere safe.
5. Save after every change — the development server refreshes automatically.

---

Save and Preview

After updating any data file:

1. Save the file
2. The development server refreshes automatically
3. Refresh your browser to see the changes

If something breaks, check the terminal for error messages — most issues are caused by a missing comma or an extra quote.

---

Need Help?

If you need custom work or a headless CMS integrated, our team can help.

Headless CMS Integration →