How to make this template yours - Configuring config.ts

src/config.ts holds the main details about your website. Change this file first so the site uses your name, URL, description, and social links.

Start with these fields

If you want to get started quickly, change:

  1. url
  2. name
  3. title
  4. description
  5. author
  6. ogImage and ogImageAlt
  7. The links in header and footer

You can leave unused social links and analytics empty.

Complete example

export const SITE = {
    url: "https://example.com",
    name: "My First Website",
    title: "My First Website",
    description: "A simple website about my work and ideas.",
    author: "Alex Example",
    locale: "en-US",
    themeColor: "#3171B2",
    startYear: 2026,
    ogImage: "/og-default.png",
    ogImageAlt: "The My First Website logo on a blue background",
    header: {
        links: [
            { label: "Blog", href: "/blog" },
            { label: "About", href: "/about" },
            { label: "Contact", href: "/contact" },
            {
                label: "External site",
                href: "https://example.com",
                external: true,
            },
        ],
    },
    social: [
        { icon: "instagram", label: "Instagram", href: "" },
        { icon: "threads", label: "Threads", href: "" },
        { icon: "mastodon", label: "Mastodon", href: "" },
    ],
    footer: {
        linkGroups: [
            {
                label: "Explore",
                links: [
                    { label: "Home", href: "/" },
                    { label: "About", href: "/about" },
                ],
            },
        ],
        utilityLinks: [
            { label: "Privacy", href: "/privacy" },
            {
                label: "GitHub",
                href: "https://github.com/example/example",
                external: true,
            },
        ],
    },
    analytics: {
        umamiId: "",
    },
} as const;

Keep as const at the end of the file.

url

url: "https://example.com",

Use the final address of your website. Include https:// and do not add a slash at the end.

Use https://example.com, not https://example.com/ or a page such as https://example.com/about.

Where is this used?

The URL is used for page links shared with search engines, the sitemap, robots.txt, the RSS feed, social images, and structured data.

name

name: "My First Website",

Use the short name of your website or brand. It appears in sharing information, the RSS feed, and the logo’s accessible text.

title

title: "My First Website",

Use the main title you want for the website. You can include a short tagline if it helps explain the site.

Why do pages also have titles?

SITE.title keeps your main title in one place for you to reuse. Each page also supplies its own title.

description

description: "A simple website about my work and ideas.",

Write one short sentence that explains the whole website. This is used in the RSS feed and website information for search engines.

Each page and blog post should still have its own description.

author

author: "Alex Example",

Add the name of the person or organization behind the site. It appears in the footer and page information.

Using a company name

The included structured data describes the author as a person. If the site belongs to a company, you can use the company name here and later change Person to Organization in Head.astro.

locale

locale: "en-US",

Choose the language and region for the site. Common examples are en-US, en-GB, de-DE, and ko-KR.

What does the locale change?

It sets the page language, sharing locale, RSS language, date formatting and more.

themeColor

themeColor: "#3171B2",

Some browsers use this color around your website. A hexadecimal color such as #3171B2 is a simple choice.

Changing this value does not change the website colors. Edit the accent colors in src/styles/var.css too if you want them to match.

startYear

startYear: 2026,

Use the year you first published the site. The footer shows this together with the current year.

Enter it as a number without quotation marks.

ogImage

ogImage: "/og-default.png",

This is the default image shown when someone shares a regular page on your website. The example path points to public/og-default.png.

Blog posts use a title-based image generated automatically at /og/blog/<post-id>.png during the build, so this default is only their fallback if you remove that blog-specific behavior.

Replace that file with your own 1200 × 630 PNG image. Keep the same filename and path for the easiest setup.

Using another image format or size

Head.astro currently tells social platforms that the image is a 1200 × 630 PNG. If you use another format or size, update the image type, width, and height there too.

ogImageAlt

ogImageAlt: "The My First Website logo on a blue background",

Briefly describe the sharing image for people who cannot see it (Such as blind users, slow internet, AI, etc). Describe what matters instead of writing “image of”.

social

social: [
    {
        icon: "instagram",
        label: "Instagram",
        href: "https://instagram.com/example",
    },
    { icon: "threads", label: "Threads", href: "" },
    {
        icon: "mastodon",
        label: "Mastodon",
        href: "https://mastodon.social/@example",
    },
],

Each social profile includes its icon name, accessible label, and full URL:

  • icon must match an icon in src/components/Icons.ts.
  • label is the social network’s accessible name.
  • href is the full profile URL.

Use an empty href ("") for a network you do not use. Empty links are automatically hidden from the footer.

Adding another social network

Add another object to social and check that its icon exists in src/components/Icons.ts. The footer and the site’s structured data use the configured profiles automatically.

The header navigation is an ordered list of links.

header: {
    links: [
        { label: "Blog", href: "/blog" },
        { label: "About", href: "/about" },
        { label: "Contact", href: "/contact" },
        {
            label: "External site",
            href: "https://example.com",
            external: true,
        },
    ],
},

Add, remove, or reorder entries to change the navigation without editing the header component. Internal links use a site-relative path and automatically show an active state for the current page. For a link to another website, use its full URL and add external: true so it opens safely in a new tab. Leave links empty for a logo-only header.

The footer navigation is split into labeled link groups and a smaller utility row.

footer: {
    linkGroups: [
        {
            label: "Explore",
            links: [
                { label: "Home", href: "/" },
                { label: "About", href: "/about" },
                { label: "Blog", href: "/blog" },
            ],
        },
        {
            label: "Resources",
            links: [
                { label: "RSS Feed", href: "/rss.xml" },
                { label: "Sitemap", href: "/sitemap-index.xml" },
            ],
        },
    ],
    utilityLinks: [
        { label: "Privacy", href: "/privacy" },
        {
            label: "GitHub",
            href: "https://github.com/example/example",
            external: true,
        },
    ],
},

Add, remove, or reorder groups and links in these arrays. The footer grid adjusts automatically when you add more groups. Use a site-relative path such as /about for pages on your website. For a link to another website, use its full URL and add external: true so it opens safely in a new tab.

The RSS feed belongs in a footer link group rather than in the social profile icons. Utility links are intended for smaller destinations such as privacy, terms, accessibility, or source code.

Analytics (analytics.umamiId)

This example uses Umami Analytics, but you can use any provider you want.

analytics: {
    umamiId: "",
},

Leave umamiId empty if you do not want analytics.

The analytics script is only added when this value is not empty.

Before you publish

Check that:

  1. url uses your real website address and has no ending slash.
  2. The name, title, description, and author are yours.
  3. The language and start year are correct.
  4. public/og-default.png is your image and has useful alternative text.
  5. Header and footer links point to your pages and external links use external: true.
  6. Unused social links and analytics are empty.
  7. Your pages and posts also have their own titles and descriptions.

About the author

Bryan Hogan is the creator of this Astro starter template, built to help make the web a better place. Learn more about Bryan.