Skip to main content
Get Started

Theme Setup

After you’ve had some time to familiarize yourself with the the theme files you’re probably wondering “How do I make it my own?” This guide will help you swap out titles, descriptions, logos, etc.

Global SEO

In the theme files you’ll find a settings.js file under the src/config/ folder. The contents of the file should look something like this:

js
export default {
  title: `Odyssey Astro Theme | A Marketing Website Theme for Startups and Businesses`,
  description: `A simple, clean, and modern theme a startup or businesses' marketing website.`,
  url: `https://odyssey-theme.littlesticks.dev`, // No trailing slash!
  name: `Odyssey`, // The short name of the business or brand name. Used for things like the copyright in the footer.
  enableThemeSwitcher: true,
};

The title and description fields here are used as the global defaults if one is not provided at the page level.

Under src/components/ you’ll see a Logo.astro file that should look something like this:

astro
<p class="odyssey-logo">Odyssey</p>
<style>
  .odyssey-logo {
    width: fit-content;
    margin: 0;
    font-family: var(--theme-font-family-serif);
    font-size: var(--font-size-md);
    color: inherit;
  }
  .odyssey-logo:hover {
    text-decoration: underline;
    cursor: pointer;
  }
</style>

The easiest way to swap out the Odyssey logo across the site is to replace this code with the SVG code for your company’s logo or using an <img> tag linked to your company logo.

You should see that the Odyssey logo changes across the theme once this is updated.

If you would like more control or don’t like this method of using a <Logo> component you will find most of the components also include a <slot> for the logo which will let you completely replace it.

Favicon

To replace the favicon you simply need to create your own favicon.png file and replace the one found under the public/ folder.

If you don’t want to use a .png file you will need to go to the BaseHead.astro component under src/components/head/ and find this line to replace with your own favicon file.

html
<link rel="icon" type="image/png" href="/favicon.png" />

Open Graph / Social Image

To replace the default Open Graph image that displays when the link to your website is shared create your own social.png file and replace the one found under the public/ folder.

Customizing the navigation items is easily done by editing the array of items in the nav.js file found under the src/config/ folder.

It will look something like this:

js
export const nav = [
  {
    title: 'Home',
    slug: '/',
  },
  {
    title: 'Blog',
    slug: '/blog',
  },
  {
    title: 'About',
    slug: '/company/about',
  },
  {
    title: 'Contact',
    slug: '/company/contact',
  },
];

In the src/config/ folder you’ll find at footer.js file which is where the footer social icons, social links, and the footer nav items are updated.

The social links list will look something like this.

js
export const footerSocials = [
  {
    url: 'https://instagram.com/',
    icon: instagramIcon,
  },
  {
    url: 'https://youtube.com/',
    icon: youtubeIcon,
  },
  {
    url: 'https://twitter.com/littlesticksdev',
    icon: twitterIcon,
  },
  {
    url: 'https://github.com/littlesticksdev/odyssey-theme',
    icon: githubIcon,
  },
];

The URLs are already set to safely open a new tab for the user when clicked so simply change our the URLs if you’re happy with the icons provided.

However, if you’d like to customize the icons you can do this by providing your own icon SVGs in the icons.js file under the src/icons/ folder.

Similar to the top-level nav items you’ll see a footerLists array in footer.js

js
export const footerLists = [
  {
    title: 'Landing Pages',
    items: [
      {
        title: 'Landing Page 1',
        slug: '/landing-pages/landing-1',
      },
      {
        title: 'Landing Page 2',
        slug: '/landing-pages/landing-2',
      },
    ],
  },
  ...

The title is the non-clickable title of the list and the nested items array is the list of links under that title. Feel free to customize the lists as needed.

Sitemap

Odyssey Theme will automatically generate a sitemap.xml file for you using Astro’s @astrojs/sitemap integration.

To setup the sitemap with the correct URLs you will need to open the astro.config.mjs at the base level of the theme files which should look something like this

js
import { defineConfig } from 'astro/config';
import lit from '@astrojs/lit';
import sitemap from "@astrojs/sitemap";
// https://astro.build/config
export default defineConfig({
  site: 'https://odyssey-theme.littlesticks.dev/',
  // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
  sitemap: true,
  // Generate sitemap (set to "false" to disable)
  integrations: [lit(), sitemap()] // Add renderers to the config
});

Simply edit the site: field with the live URL that your website will be hosted on and you’re all set!