Skip to content

pksjce/pkodmad-astro-site

Repository files navigation

Blogster

Theme: bubblegum

Blogster is a collection of beautiful, accessible and performant blog templates built with Astro and Markdoc.

Check out the demo here - Blogster bubblegum template.

Bubblegum Template

A beautiful, performant and accessible theme built with Tailwind.

  • 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.
  • RSS feed. Your blog has an RSS feed setup that can be accessed at /rss.xml.
  • SEO. All pages are setup with all the SEO you might need.

How do I add content?

All the content is written in markdown (.md) and grouped as blog or projects in the content directory. All the default markdown syntax will work. You also have a few example custom markdown elements like YouTube embed, Twitter embed, etc. You can create your own custom components too in two easy steps.

  1. Add a markdoc config. Check out the markdoc config in src/lib/markdoc/config.ts to learn how to add custom components.
  2. Add a component to render your custom component. Check out the Renderer in src/components/Renderer.astro.

How do I make it my blog?

Easy.

  • All content is static and everything is straight forward. Change whatever you need to change.
  • Delete or update the content in content/{content-group}. content-group could be blog, projects or anything.
  • (Optional) If you need more content types like Notes, just create a new dir in content and add a new frontmatter validator like src/lib/markdoc/blog/frontmatter.

How do I deploy?

yarn build will generate a static website in dist dir. You can host it with any static hosting. If you need a recommendation, check out Netlify.

Credit

Thanks to other templates that inspired this theme.

License

MIT © Dinesh Pandiyan