This template is based on Astro's official Blog Example, a lightweight, minimally-styled starting point for creating a fast and SEO-friendly blog with Astro.
It incorporates a few small changes to accommodate Tina, an open-source, Git-backed headless CMS which supports MDX components.
Features:
- ✅ Minimal styling (make it your own!)
- ✅ 100/100 Lighthouse performance
- ✅ SEO-friendly with canonical URLs and OpenGraph data
- ✅ Sitemap & RSS feed support
- ✅ Markdown & MDX support
- ✅ A modern headless CMS for editing rich content
Inside of your Astro project, you'll see the following folders and files:
├── public/
├── src/
│ ├── components/
│ ├── content/
│ ├── layouts/
│ └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json
Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
The [slug].astro file is a dynamic route. This generates a page based on each *.{md,mdx} blog post in the src/content directory and exposes it on the root (e.g. localhost:3000/using-mdx). This is the content which is managed as a collection in Tina.
If you require the ability to edit all content in Tina (e.g. the About page, or a second collection), this is easy. Simply define a new collection in .tina/config.ts.
There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/ directory.
This template includes one example of an MDX custom component: a simple counter built with Vue 3. This demonstrates how you can add rich interactive components to your markdown content - including components with input parameters - and edit them via the CMS!
Creating new components for use in Tina is easy. First define your component using React, Vue, or any of the UI frameworks supported by Astro, then import it and add it to the components prop in the blog post template ([slug].astro). Next add it to your Tina schema in .tina/config.ts as a template in your body field.
This will make it available to content editors under the 'Embed' menu in Tina CMS.
Tina offers a fantastic editing experience which includes support for MDX components, setting it apart from many competitors. Thanks to the simple and accessible UI (and the ability to edit without a Git account thanks to Tina Cloud, rich interactivity can be added to pages by non-technical users.
However, because Astro isn't NextJS-based, we do lose the ability to do full contextual editing and to see previews (for the time being...). You can read more about the non-React mode of Tina in their documentation.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts Astro's local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro --help |
Get help using the Astro CLI |
npm run tina |
Initialises Tina at localhost:3000/admin/index.html |
Check out Astro's documentation or jump into their Discord server.
To learn more about Tina, the next-gen version of Forestry CMS, check out the Tina docs or join their Discord server.
If you found this template useful, please consider submitting a PR.
This theme is based off of the lovely Bear Blog.