How to configure AstroPaper theme

AstroPaper is a highly customizable Astro blog theme. With AstroPaper, you can customize everything according to your personal taste. This article will explain how you can make some customizations easily in the config file.

Table of contents

Configuring SITE

The important configurations resides in src/config.ts file. Within that file, you’ll see the SITE object where you can specify your website’s main configurations.

During development, it’s okay to leave SITE.website empty. But in production mode, you should specify your deployed url in SITE.website option since this will be used for canonical URL, social card URL etc.. which are important for SEO.

// file: src/config.ts
export const SITE = {
  website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
  author: "Sat Naing",
  profile: "https://satnaing.dev/",
  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerIndex: 4,
  postPerPage: 4,
  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
  showArchives: true,
  showBackButton: true, // show back button in post detail
  editPost: {
    enabled: true,
    text: "Suggest Changes",
    url: "https://github.com/satnaing/astro-paper/edit/main/",
  },
  dynamicOgImage: true, // enable automatic dynamic og-image generation
  lang: "en", // html lang code. Set this empty and default will be "en"
  timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
} as const;

Here are SITE configuration options

Configuring logo or title

Prior to AstroPaper v5, you can update your site name/logo in LOGO_IMAGE object inside src/config.ts file. However, in AstroPaper v5, this option has been removed in favor of Astro’s built-in SVG and Image components.

There are 3 options you can do:

Option 1: SITE title text

This is the easiest option. You just have to update SITE.title in src/config.ts file.

Option 2: Astro’s SVG component

You might want to use this option if you want to use an SVG logo.

• First add an SVG inside src/assets directory. (eg: src/assets/dummy-logo.svg)

• Then import that SVG inside src/components/Header.astro

  ---
  // other imports
  import DummyLogo from "@/assets/dummy-logo.svg";
  ---

• Finally, replace {SITE.title} with imported logo.

  <a
    href="/"
    class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
  >
    <DummyLogo class="scale-75 dark:invert" />
    <!-- {SITE.title} -->
  </a>

The best part of this approach is that you can customize your SVG styles as needed. In the example above, you can see how the SVG logo color can be inverted in dark mode.

Option 3: Astro’s Image component

If your logo is an image but not SVG, you can use Astro’s Image component.

• Add your logo inside src/assets directory. (eg: src/assets/dummy-logo.png)

• Import Image and your logo in src/components/Header.astro

  ---
  // other imports
  import { Image } from "astro:assets";
  import dummyLogo from "@/assets/dummy-logo.png";
  ---

• Then, replace {SITE.title} with imported logo.

  <a
    href="/"
    class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
  >
    <image src="{dummyLogo}" alt="Dummy Blog" class="dark:invert" />
    <!-- {SITE.title} -->
  </a>

With this approach, you can still adjust your image’s appearance using CSS classes. However, this might not always fit what you want. If you need to display different logo images based on light or dark mode, check how light/dark icons are handled inside the Header.astro component.

Configuring social links

You can configure social links in SOCIALS object inside src/constants.ts.

export const SOCIALS = [
  {
    name: "Github",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: ` ${SITE.title} on Github`,
    icon: IconGitHub,
  },
  {
    name: "X",
    href: "https://x.com/username",
    linkTitle: `${SITE.title} on X`,
    icon: IconBrandX,
  },
  {
    name: "LinkedIn",
    href: "https://www.linkedin.com/in/username/",
    linkTitle: `${SITE.title} on LinkedIn`,
    icon: IconLinkedin,
  },
  {
    name: "Mail",
    href: "mailto:yourmail@gmail.com",
    linkTitle: `Send an email to ${SITE.title}`,
    icon: IconMail,
  },
] as const;

Configuring share links

You can configure share links in SHARE_LINKS object inside src/constants.ts.

Conclusion

This is the brief specification of how you can customize this theme. You can customize more if you know some coding. For customizing styles, please read this article. Thanks for reading.✌🏻