Astro Blog

The fastest way to get a blog started in Astro 🚀

astro-blog automatically adds several routes, and provides several schemas to get your blog up and running in minutes, not hours.

With built-in pagination, specifying author profiles, creating tags for your articles, and also support for draft articles. astro-blog should cover everything you need to get creating content for your website.

Demo here: astro-blog.futurethemes.io

Features

astro-blog is packed with great features to help you get going asap!

• Support for articles, authors and tags
• Automatic pagination support with customisable config option paginationSize
  • This also includes generating /blog/1, /blog/2 pages as the pages of posts
• A simple default layout
  • This includes amazing SEO support out-of-the-box with astro-seo!
• Great SEO support per page, and also for your /blog page itself!
• Ability to add your own page Layout component. BYOLC... Bring your own Layout Component 👀
• Great support for images out-of-the-box with Astro <Image>
• Allows setting a Featured Post when you set featured: true in a blog post!

Installation

Astro Add

astro-blog supports installing via the astro add command for super easy install:

## Astro
astro add astro-blog

Manual Install

Or if you'd prefer to instal manually

## npm
npm install astro-blog

## pnpm
pnpm install astro-blog

Then add the integration to your astro.config.mjs

+ import AstroBlog from 'astro-blog'

export default defineConfig{
    site: 'https://www.mysite.com',
    integrations: [
        ...,
+       AstroBlog({
+           title: 'My Blog',
+       })
    ]
}

Set up schemas

Just one last step before you can start adding content is to set up your content collection schemas.

astro-blog provides schemas for Articles, Authors and Tags. So we can easily add definitions in the src/content/config.ts:

import { defineCollection } from 'astro:content'
import { ArticleSchema, AuthorSchema, TagSchema } from 'astro-blog/schema'

export const collections = {
    blog: defineCollection({
        type: 'content',
        schema: ArticleSchema,
    }),


    author: defineCollection({
        type: 'content',
        schema: AuthorSchema,
    }),

    tag: defineCollection({
        type: 'content',
        schema: TagSchema,
    }),
}

Set up Tailwind

Install Tailwind if you don't already have it installed astro add tailwind.

Then in your tailwind.config.mjs import the content paths from astro-blog:

+ import { AstroBlogTailwindPaths } from 'astro-blog'

/** @type {import('tailwindcss').Config} */
export default {
	content: [
        './src/**/*.{astro,html,js,jsx,ts,tsx}',
+        ...AstroBlogTailwindPaths, // Very important to spread these as it's an array!
    ],
    ...
}

Now you're all set up to start adding content! 🔥🙌

Creating content

Now you can create authors in your content/author folder, tags in your content/tag folder, and finally articles in your content/blog folder.

# content/author/jacob.md
---
name: Jacob Jenkins
description: Just some dude, doin some stuff
imageSrc: '../assets/jacob.png'
imageAlt: 'One hell of a guy'
---

# content/tag/space.md
---
tag: Space
---

# content/blog/andromeda.md
---
title: Andromeda - The Majestic Galaxy
description: It's a galaxy... From outer space!
datePublished: 2023-11-20T22:58:27.197Z
isDraft: false
author: jacob
tags: [space]
imageSrc: './images/andromeda.jpg'
imageAlt: 'Andromeda'
---

# 🌌✨ Meet Andromeda
## The majestic galaxy that's not just a pretty face in the cosmic crowd! 🚀🌠
...

Routes

astro-blog add 3 routes to your app:

1. /blog this will be the home of all your articles. By default it will show as many articles as specified by your paginationSize (default 9). And if you have more than 9 articles, it'll show the pagination buttons.
2. /blog/:page these pages are your pagination pages for if you have more than paginationSize articles.
3. /blog/:article-slug This is your article!

Config Options

Title

Title for your website. Will be used in metadata and as browser tab title.

AstroBlog({
    title: 'My Site',
})

blogRoot

These options will get used on your blog root page: /blog

blogRoot.seo

An object containing config for Astro SEO.

AstroBlog({
    blogRoot: {
        seo: {
            description: 'A really cool description full of key words!',
        },
    },
})

blogRoot.description

Description metadata for your website. Can be used in page metadata.

AstroBlog({
    blogRoot: {
        description: 'A really cool description full of key words!',
    },
})

layoutComponent

Your standard layout component.

AstroBlog({
    layoutComponent: './src/components/layouts/Layout.component',
})

logo

A string of a path to your logo image. Or you can specify a light and dark version of your logo

AstroBlog({
    logo: {
        src: './src/path/to/image.png',
    }
})

OR

AstroBlog({
    logo: {
        light: './src/path/to/image.png',
        dark: './src/path/to/dark-image.png',
    }
})

paginateSize

default: 9

How many blog posts should be visible per page.

AstroBlog({
    paginateSize: 6,
})

prerender

default: true

Specify whether you want your blog pages to be prerendered. Useful for SSR/Hybrid environments.

AstroBlog({
    prerender: true,
})

License

MIT - 2024-present, jdtjenkins