jmarlena/blogster

A collection of beautiful, accessible and performant Astro blog templates.

Blogster is a collection of beautiful, accessible and performant blog templates built with Astro and Markdoc. Blogster is in alpha preview. If you have any feedback, please open a discussion or issue. Follow me @flexdinesh on Twitter for updates.

Maintenance Status

Blogster was built before Astro released content collections. With content collections, Astro now has first party built in support for strongly typed content schema and Markdoc rendered content which is what Blogster was built for. So Blogster won't receive any updates in the future. I'm going to leave this as a reference for font load strategy, meta tags and a few other best practices for setting up a website.

Demo

Check out the demo for each theme.

• Demo: Sleek
• Demo: Newspaper
• Demo: Bubblegum
• Demo: Minimal

Key Features

• Fast. Fast by default. Astro websites are engineered to be fast and load before you could blink, even when not cached.
• Dark mode. All themes have light/dark mode built-in.
• Mobile first. Responsive and loads fast in all devices.
• Accessible. A well thought out semantic and accessible content.
• Perfect lighthouse score. 100 across the board.
• Easy content authoring Author content using markdown (.md) from your code editor or directly in GitHub.
• Extended markdown with Markdoc. Type-safe custom components like YouTube embed, Twitter embed (or anything you want really) in your markdown (.md) files.
• Built in RSS feed for you blog, excellent SEO and more.

Get Started

Get started with one simple command.

npx create-blogster@latest --theme sleek

Themes

Blogster comes in a variety of themes. You can easily find one that suits and goes well with your personality. All themes are performant, accessible, SEO friendly, built with the best practices out there and have a lighthouse score of 100 across the board.

• Minimal
• Sleek
• Newspaper
• Bubblegum

Minimal

A light weight theme built with plain old HTML and CSS. No external fonts or icons. Zero JavaScript. You get a full functional nice looking blog that loads super fast.

Check it out here - Blogster minimal template.

npx create-blogster@latest --theme minimal

Sleek

A beautiful, performant and accessible theme built with Tailwind.

Check it out here - Blogster sleek template.

npx create-blogster@latest --theme sleek

Newspaper

A beautiful, performant and accessible theme built with Tailwind.

Check it out here - Blogster newspaper template.

npx create-blogster@latest --theme newspaper

Bubblegum

A beautiful, performant and accessible theme built with Tailwind.

Check it out here - Blogster bubblegum template.

npx create-blogster@latest --theme bubblegum

FAQ

1. Why Markdoc or Why not MDX?

MDX is great but when you use MDX, your MDX content is stored as code within your `.md` files. Markdoc lets you build and use your own custom components (Eg. YouTube embed, Twitter embed, Carousel, etc) within your markdown files with a special syntax. Your content is stored as text without having to leak code (imports or JSX) into your `.md` files. You can build validations, type-safety and all sorts of customisations for your custom components with Markdoc. If you're still not convinced, hear this, you can pass Markdoc content as string (just like any other string) throughout your application, store it in local storage or send it as params over the network. IMHO, Markdoc based content authoring gives you the full flexibility of markdown without the limits of the markdown syntax.

Contributing

• When you are using cmd+shift+F to search for references across the repo, remember to exclude templates/ dir because templates are auto-generated using a script and only add noise in search results.
• Whatever you're changing, you will mostly only need to change in themes/ or packages/shared. The themes in templates/ dir is auto-synced using a script so you don't have to make any change in the templates/ dir.

License

MIT © Dinesh Pandiyan