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.

Open Table of contents

Configuring SITE
Configuring locale
Configuring social links

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.

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
  dir: "ltr", // "rtl" | "auto"
  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;src/config.ts

Here are SITE configuration options

Options	Description
`website`	Your deployed website url
`author`	Your name
`profile`	Your profile url. This will be used as a link in the footer of the site.
`desc`	Your site description. Useful for SEO and social media sharing.
`title`	Your site name.
`ogImage`	Your default OG image for the site. Useful for social media sharing. OG images can be an external image url or they can be placed under `/public` directory.
`lightAndDarkMode`	Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default.
`postPerIndex`	The number of posts to be displayed at the home page under `Recent` section.
`postPerPage`	You can specify how many posts will be displayed in each posts page. (eg: if you set SITE.postPerPage to 3, each page will only show 3 posts per page)
`scheduledPostMargin`	In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post’s `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don’t like the default 15 minutes margin.
`showArchives`	Determines whether the `Archives` link is shown in the navigation header.
`editPost`	This feature allows users to suggest changes by providing an edit link under blog posts. You can disable this by setting `editPost.enabled` to `false`.
`dynamicOgImage`	Enable or disable automatic dynamic OG image generation for blog posts.
`dir`	The direction of the text in your blog. (rtl for right-to-left, ltr for left-to-right)
`lang`	Your site’s language. Default is “en”.
`timezone`	Default global timezone for date formatting. Uses IANA timezone format (e.g., “America/New_York”, “Asia/Tokyo”).

Configuring locale

You can configure the default locale used for building your site. The configuration is stored in src/utils/datetime.ts.

You can configure your own social links along with its icons.

Currently 20 social icons are supported. (Github, LinkedIn, Facebook, Twitter, Threads, Instagram, Dribbble, Behance, YouTube, Discord, Codepen, Medium, Dev, Mastodon, Telegram, Mail, X, Pinterest, Bluesky, RSS)

You can specify and enable certain social links in Hero section and Footer. To do this, go to /src/config/site.ts and then you’ll find SOCIALS array of object.

export const SOCIALS: SocialObjects = [
  {
    name: "Github",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: ` ${SITE.title} on Github`,
    active: true,
  },
  {
    name: "Facebook",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: `${SITE.title} on Facebook`,
    active: true,
  },
  // ...
];

You have to set specific social link’s active to true in order to appear in the hero and footer section. Then you need to specify your social link in href property.

For instance, if I want to make my Github appear, I’ll set it like this.

export const SOCIALS: SocialObjects = [
  {
    name: "Github",
    href: "https://github.com/satnaing", // update the Github link
    linkTitle: `${SITE.title} on Github`, // this text will appear on hover/screen-reader
    active: true, // makesure to set active to true
  }
  // ...
]

Another thing to note is you can specify the linkTitle in the object. This text will display when hovering on the social icon link. Besides, this will improve accessibility and SEO. AstroPaper provides default linkTitle values for all social objects; but you can replace them with your own texts.

How to configure AstroPaper theme

Table of contents

Configuring SITE

Configuring locale

Configuring social links