Welcome to the Astro theme documentation! This documentation is designed to provide you with all the necessary information to help you get started with the theme for your Astro-powered website. Before diving into the documentation, it is important to have a basic understanding of Astro and its concepts. If you are new to it, we recommend referring to the official Astro documentation to familiarize yourself with the platform.
Customization and Code Modifications:
Astro themes offer extensive customization options to personalize your website's appearance and functionality. Please exercise caution when making custom code changes, as incorrect modifications can potentially break your website's functionality or layout. It is recommended to create backups and test changes in a development environment before applying them to your live site.
Support Limitations:
Please be aware that our support for Astro themes is primarily focused on theme-specific issues and providing guidance on theme features and settings. We do not provide support for issues arising from custom code modifications or third-party integrations. If you encounter any issues or have questions related to theme's built-in features and settings, please refer to the documentation or reach out to our support team for assistance. For custom code modifications and advanced customization requests, you can reach out to us—we also offer theme customization at an hourly rate.
By being mindful of these considerations, you can fully leverage the power and flexibility of Astro themes while ensuring a smooth and successful customization experience.
To run the Astro theme on your local machine, you’ll need to have Node.js installed.
Run the project locally:
npm installnpm run dev
Build the project:
After editing the settings and content, you can build the project by running:
npm run build
This will generate a production-ready version of your site.
To create a blog post, follow these steps:
src → content → blog
Frontmatter (Post Metadata):
At the top of each post, you’ll need to define some metadata using frontmatter. Here's a breakdown of the options:
post_header_type: A string that determines the style of the post header. Various styles are available — check the comments next to this field for valid values.title: A string used for the post title.excerpt: A short description or summary of the post.feature_image: A string path to the featured image.featured: A boolean. If set to true, the post will appear in the featured section on the homepage.pub_date: A string. Publication date of the post.tags: An array of strings. Each tag will automatically link to its respective tag page.authors: An array of strings. Each author will link to their individual author page.draft: A boolean. If set to true, the post will not be displayed on the live site. Use this while drafting posts.
Make sure each field uses the correct data type. Incorrect values may cause the post to display incorrectly or not at all.
To create a page, follow these steps:
src → content → pages
Frontmatter (Page Metadata):
At the top of each page, you’ll need to define some metadata using frontmatter. Here's a breakdown of the options:
page_header_type: A string that determines the style of the page header. Various styles are available — check the comments next to this field for valid values.title: A string used for the page title.excerpt: A short description or summary of the page.feature_image: A string path to the featured image.
Make sure each field uses the correct data type. Incorrect values may cause the page to display incorrectly or not at all.
Tags are generated dynamically from the post frontmatter. The system collects all unique tags (no duplicates) and displays them on: tags page, archive page, individual tag pages and post cards.
To add additional content like image or description, follow these steps:
src → config → tags.json.ts
{
slug: "business-and-work",
description: "This is some tag description"
}
IMPORTANT: Make sure to slugify the tag name. "Business and Work" becomes "business-and-work" in the slug.
The "tagsSettings" is an array, so you can include as many tag objects as you like.src → assets → images → tag
business-and-work.jpg (or .png, .webp, etc.)
Authors are generated dynamically from the post frontmatter. The system collects all unique authors (no duplicates) and displays them on: authors page, individual author pages, post header and post cards.
To add additional content like image, bio, location and author socials follow these steps:
src → config → authors.json.ts
{
slug: "john-doe",
bio: "This is author bio",
location: "Chicago",
website_url: "https://www.kusa-projects.com/",
x_url: "https://www.twitter.com/",
facebook_url: "https://www.facebook.com/"
}
IMPORTANT: Make sure to slugify the author name. "John Doe" becomes "john-doe" in the slug.
The "authorSettings" is an array, so you can include as many author objects as you like.src → assets → images → author
john-doe.jpg (or .png, .webp, etc.)
To add different plans to the membership page follow these steps:
src → config → membership.json.ts
{
name: "Bronze",
description: "Full Access to Premium Content",
yearly_price: "$49",
monthly_price: "$5",
benefits: "Full access to Premium Plus posts, Receive weekly email newsletter"
}
The "membershipSettings" is an array, so you can include as many plan objects as you like.
To add toggle cards to the FAQ page follow these steps:
src → config → faq.json.ts
{
title: "This is a title",
text: "This is a toggle card text"
}
The "faqSettings" is an array, so you can include as many toggle card objects as you like.
To add links to the navigation bar follow these steps:
src → config → navbar.json.ts
{
text: "Style guide",
link: "/style-guide/",
new_tab: true
}
The "navbarSettings" is an array, so you can include as many links as you like.{
text: "Features",
dropdown: [
{
text: "Archive",
link: "/archive/"
},
{
text: "Tags",
link: "/tags/"
},
]
}
To add links to the footer follow these steps:
src → config → footer.json.ts
{
text: "Style guide",
link: "/style-guide/",
new_tab: true
}
The "footerSettings" is an array, so you can include as many links as you like.{
text: "Features",
dropdown: [
{
text: "Archive",
link: "/archive/"
},
{
text: "Tags",
link: "/tags/"
},
]
}
You can further customize the theme by adjusting the global settings. To do this, follow these steps:
src → config → config.json.ts
To change the logo follow these steps:
src → assets → images → logo
logo.jpg (or .png, .webp, etc.)To update the favicons, icons, browser configuration, web manifest, and related assets, follow these steps:
public → favicons
All static text is stored in a single file for your convenience. To update the text, follow these steps:
src → locales
and open en.json file.
To add Google analytics to your website follow these steps:
src → layouts
and open BaseHead.astro file.
To deploy your website please refer to Astro deployment.
You can add your socials to the theme by following these steps:
src → config → socials.json.ts
{
The "socialsSettings" is an array, so you can include as many socials as you like.text: "Facebook",
url: "https://www.facebook.com/",
icon: `
<svg>
<path fill="currentColor"/>
</svg>`
}