|
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. |
Demo
Check out the demo for each theme.
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 sleekThemes
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
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 minimalSleek
A beautiful, performant and accessible theme built with Tailwind.
Check it out here - Blogster sleek template.
npx create-blogster@latest --theme sleekNewspaper
A beautiful, performant and accessible theme built with Tailwind.
Check it out here - Blogster newspaper template.
npx create-blogster@latest --theme newspaperBubblegum
A beautiful, performant and accessible theme built with Tailwind.
Check it out here - Blogster bubblegum template.
npx create-blogster@latest --theme bubblegumFAQ
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+Fto search for references across the repo, remember to excludetemplates/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/orpackages/shared. The themes intemplates/dir is auto-synced using a script so you don't have to make any change in thetemplates/dir.
License
MIT Β© Dinesh Pandiyan