Configuration

Setup

Now it’s time to configure your website. Everything starts from one file: config.json inside the src/data folder.

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

Basic Site Info

Here is the structure of the config.json file:

{
    "url": "insert your url domain in here",
    "title": "Title for your website blog",
    "description": "Description for your website and blog",
    "favicon": "URL Image for favicon",
    "image": "Image cover for twitter card and open graph url in here"
}

What each field does:

Field	Purpose
`url`	Your website’s main domain. Used for SEO and sitemap. Example: `https://yourdomain.com`
`title`	The title of your site. Appears in browser tabs and search results.
`description`	A short description of your site. Used by Google and social media previews.
`favicon`	The small icon shown in browser tabs.
`image`	The cover image used when your site is shared on social media (Open Graph).

Tip: Don’t change the field names on the left. Only change the text between the quotes.

The navbar is the top menu of your website. It’s also controlled from config.json.

Here is the structure:

"favicon": "/img/astrojs.svg",
"image": "/img/astro.svg",
"navbar": "Photo Art",
"nav_list": [
  {
    "nav": "Your navbar menu name",
    "link": "URL For your navbar area"
  },
  {
    "nav": "About",
    "link": "/about"
  },
  {
    "nav": "Add new menu nav here",
    "link": "URL Link for new nav menu in here"
  }
]

What each field does:

Field	Purpose
`navbar`	The brand name shown in the top-left of the navbar
`nav_list`	The list of menu items
`nav`	The text shown for a menu item
`link`	The URL the menu item points to

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

{
  "nav": "New nav",
  "link": "Link url new nav in here"
}

Complete Example

Here’s a full navbar example with several menu items:

"nav_list": [
  {
    "nav": "Home",
    "link": "/"
  },
  {
    "nav": "New nav",
    "link": "Link url new nav in here"
  }
]

Output:

Navbar area

The footer is the bottom section of every page. It contains three areas: Menu, Social, and Contact.

Structure

"nav_footer": {
  "menu_1": "Menu",
  "menu_2": "Social",
  "menu_3": "Contact"
},
"social": [
  {
    "title": "Facebook",
    "link": "https://www.facebook.com"
  },
  {
    "title": "Youtube",
    "link": "your youtube channel url here"
  },
  {
    "title": "Instagram",
    "link": "your instagram url in here"
  }
],
"contact": {
  "address": "Hollywood - presinteia , 77th",
  "city": "Sesame Street",
  "country": "Merduso - USA.",
  "phone": "+62895339403223",
  "email": "axcora@gmail.com"
}

What each part does:

nav_footer — labels for the three footer columns (Menu, Social, Contact)
social — list of social media links. Add, remove, or reorder freely.
contact — your business contact details shown in the footer

Copy this block and paste it inside the social array:

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

Output:

Footer area

Page

The page section controls the titles and descriptions of every index page in your site — blog, gallery, categories, tags, and more.

This is useful when you want different titles for different pages, instead of using one site-wide title.

Structure

"page": {
  "blog_title": "Blog Update",
  "blog_text": "Creative ART Blog Article",
  "image_title": "Image Gallery",
  "image_text": "Creative ART Image Gallery",
  "video_title": "Videos Cinema",
  "video_text": "Creative ART Videos Cinema ART",
  "categories_title": "Categories",
  "categories_text": "Creative ART blog Categories",
  "tags_title": "Tags",
  "tags_text": "Creative ART blog tags",
  "concept_title": "Concept",
  "concept_text": "Creative ART blog Concept",
  "genre_title": "Genre",
  "genre_text": "Creative ART genre",
  "keyword_title": "Keyword",
  "keyword_text": "Creative ART keyword",
  "style_title": "Style",
  "style_text": "Creative ART style",
  "work_title": "Work",
  "work_text": "Creative ART work"
}

What each pair does:

Pair	Controls
`blog_title` / `blog_text`	Blog index page
`image_title` / `image_text`	Image gallery index page
`video_title` / `video_text`	Video gallery index page
`categories_title` / `categories_text`	Categories index page
`tags_title` / `tags_text`	Tags index page
`concept_title` / `concept_text`	Concept page
`genre_title` / `genre_text`	Genre page
`keyword_title` / `keyword_text`	Keyword page
`style_title` / `style_text`	Style page
`work_title` / `work_text`	Work page

Just change the values on the right side of the colons to update each page title and description.

Complete JSON Example

Here is the complete config.json file with every field filled in. Use this as a reference for your own site.

{
    "url": "http://localhost:4321",
    "title": "Creative Photo ART",
    "description": "Berkarya lah dengan kegilaan yang mahal, bukan berkarya dengan kemahalan yang gila - The ART of Photography.",
    "favicon": "/img/astrojs.svg",
    "image": "/img/astro.svg",
    "navbar": "Photo Art",
    "nav_list": [
      {
        "nav": "Home",
        "link": "/"
      },
      {
        "nav": "About",
        "link": "/about"
      },
      {
        "nav": "Service",
        "link": "/services"
      },
      {
        "nav": "Gallery",
        "link": "/gallery"
      },
      {
        "nav": "Blog",
        "link": "/blog"
      },
      {
        "nav": "Contact",
        "link": "/contact"
      }
    ],
    "nav_footer": {
      "menu_1": "Menu",
      "menu_2": "Social",
      "menu_3": "Contact"
    },
    "page": {
      "blog_title": "Blog Update",
      "blog_text": "Creative ART Blog Article",
      "image_title": "Image Gallery",
      "image_text": "Creative ART Image Gallery",
      "video_title": "Videos Cinema",
      "video_text": "Creative ART Videos Cinema ART",
      "categories_title": "Categories",
      "categories_text": "Creative ART blog Categories",
      "tags_title": "Tags",
      "tags_text": "Creative ART blog tags",
      "concept_title": "Concept",
      "concept_text": "Creative ART blog Concept",
      "genre_title": "Genre",
      "genre_text": "Creative ART genre",
      "keyword_title": "Keyword",
      "keyword_text": "Creative ART keyword",
      "style_title": "Style",
      "style_text": "Creative ART style",
      "work_title": "Work",
      "work_text": "Creative ART work"
    },
    "social": [
      {
        "title": "Facebook",
        "link": "https://www.fiverr.com/creativitas/"
      },
      {
        "title": "Youtube",
        "link": "https://www.fiverr.com/creativitas/design-your-modern-website-using-jekyll"
      },
      {
        "title": "Instagram",
        "link": "https://www.fiverr.com/creativitas/create-your-custom-website-and-app"
      }
    ],
    "contact": {
      "address": "Hollywood - presinteia , 77th",
      "city": "Sesame Street",
      "country": "Merduso - USA.",
      "phone": "+62895339403223",
      "email": "axcora@gmail.com"
    }
}

Tips for Beginners

Change one field at a time. Save, refresh the browser, verify.
Don’t change the field names (the words on the left of the colons). Only change the values.
Use double quotes — "text" — not single quotes. JSON only accepts double quotes.
No trailing commas. The last item in every list should not have a comma.
Keep a backup. Before making large changes, copy config.json to a safe place.

Next Step

Your site is now configured. Continue to:

👉 Article — learn how to create and update content pages

Configuration

Setup

Basic Site Info

Navbar

Add a New Navbar Item

Complete Example

Footer

Structure

Add a New Social Link

Page

Structure

Complete JSON Example

Tips for Beginners

Next Step