For 2023, I redesigned my blog (based on & heavily inspired by AstroPaper theme). This post explains all the old features and a few features I developed for this blog.
Frontmatter
Frontmatter is the main place to store some important information about the post (article). Frontmatter lies at the top of the article and is written in YAML format. Read more about frontmatter and its usage in astro documentation.
Here is the list of frontmatter property for each post.
| Property | Description | Remark |
|---|---|---|
| title | Title of the post. (h1) | required* |
| description | Description of the post. Used in post excerpt and site description of the post. | default = SITE.desc |
| author | Author of the post. | default = SITE.author |
| datetime | Published datetime in ISO 8601 format. | |
| slug | Slug for the post. Usually the all lowercase title seperated in - instead of whtiespace | default = slugified title |
| featured | Whether or not display this post in featured section of home page | default = false |
| project | Whether or not display this post in project section | default = false |
| draft | Mark this post ‘unpublished’. | default = false |
| category | Main category of the post. | |
| tags | Related keywords for this post. Written in array yaml format. | |
| ogImage | OG image of the post. Useful for social media sharing and SEO. | default = SITE.ogImage |
title and slug fields in frontmatter must be specified.
Title is the title of the post and it is very important for search engine optimization (SEO).
slug is the unique identifier of the url. Thus, slug must be unique and different from other posts. The whitespace of slug needs to be separated with - or _ but - is recommended. If slug is not specified, the slugified title of the post will be used as slug.
Here is the sample frontmatter for the post.
# src/contents/sample-post.md
---
title: The title of the post
author: your name
datetime: 2023-01-14T00:00:00Z
slug: the-title-of-the-post
featured: true
project: false
draft: false
category: your-category
tags:
- some
- example
- tags
ogImage: ""
description: This is the example description of the example post.
---What does it look like?
Typography and markdown related content covered in Tailwind Typography
OG Image
The default OG image will be placed if a post does not specify the OG image. Though not required, OG image related to the post should be specify in the frontmatter. The recommended size for OG image is 1200 X 640 px.
Configuring Site Settings
Site configurations are available at site property of _astro.config.mjs file .
// file: src/config.ts
export const SITE = {
website: "https://the-log-book.vercel.app/",
author: "Priyanka Sachan",
desc: "Logging down all binary adventures.",
title: "The Log Book",
ogImage: "site-og.jpg",
lightAndDarkMode: true,
postPerPage: 4,
};Here are SITE configuration options
| Options | Description |
|---|---|
website | Your deployed website url |
author | Your name |
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 image can be updated 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. |
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) |
Configuring logo or title
You can specify site’s title or logo image in src/config.ts file.
// file: src/config.ts
export const LOGO_IMAGE = {
enable: false,
svg: true,
width: 216,
height: 46,
};Configuring social links
You can configure your own social links along with its icons at /src/config.ts > SOCIALS.
Conclusion
This is the brief specification of how you can customize this theme. Thanks for reading.✌🏻