A minimalist blog theme built with Astro. A quick and easy starter build for anyone who wants to start their own blog.
View Demo · Report Bug · Request FeatureAlthough there are already so many blog themes out there, I wanted one that would give off that terminal/dev vibe and a few features that other themes did not have.
- Astro v4 Fast 🚀
- TailwindCSS Utility classes
- Accessible, semantic HTML markup
- Responsive & SEO-friendly
- Dark / Light mode, using Tailwind and CSS variables
- Pinned posts and projects
- Astro Assets Integration for optimised images
- MD & MDX posts
- Pagination
- Automatic RSS feed
- Auto-generated sitemap
- Astro Icon svg icon component
- Back To Top button
Check out the demo here.
Create a new repo from this template.
# npm 7+
npm create astro@latest -- --template kirontoo/astro-theme-cody
# pnpm
pnpm dlx create-astro --template kirontoo/astro-theme-cody
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
pnpm install |
Installs dependencies |
pnpm run dev |
Starts local dev server at localhost:4321 |
pnpm run build |
Build your production site to ./dist/ |
pnpm run preview |
Preview your build locally, before deploying |
pnpm run astro ... |
Run CLI commands like astro add , astro check |
pnpm run astro -- --help |
Get help using the Astro CLI |
Your site config, social media links and Navbar links are all placed within src/consts.ts
.
There you can configure your site default title, description, language, profile, social media links and visible nav bar links.
This theme utilises Content Collections
to organise Markdown and/or MDX files, as well as type-checking frontmatter
with a schema -> src/content/config.ts
.
You can find examples of blog posts in src/content/blog
and examples of projects in src/content/project
.
Property (* = required) | Description |
---|---|
title * | Title of your post. Limited to a maximum of 150 characters |
description * | Short description of your post, which will also be used for SEO. Has a max length of 250 characters. |
pubDate * | Published date |
updateDate | Optional date representing when the post has been updated. Note that this date will be used instead of the published date to order posts when available. |
heroImage | Optional cover image for you post. Include both a src and a alt property. Check src/content/blog/first-post.md for an example. |
ogImage | Optional image used for SEO. |
tags | Use optional tags to organize your posts into categories or topics. All tags will be shown in yourdomain.com/tags . |
series | Use optional series to organize your posts into a series of posts. All series will be shown in yourdomain.com/series . |
draft | Optional boolean. Removes posts from being published. |
order | Optional number value from 1 - 5 to pin certain posts to the top. Limited to only 5 pinned posts |
Property (* = required) | Description |
---|---|
title * | Title of your project. Limited to a maximum of 150 characters |
description * | Short description of your project, which will also be used for SEO. |
pubDate * | Published date |
heroImage | Optional cover image for you project. Include both a src and a alt property. Check src/pages/projects/project-1.md for an example. |
ogImage | Optional image used for SEO. |
stack * | A list of technologies your project used which will be rendered as icons. This theme uses the SVG Logos librar, you can use icones.js.org to find the icons you need. |
platform | Link to website or demo |
website | Link to website or demo |
github | Your github repo link |
draft | Optional boolean. Removes projects from being published. |
order | Optional number value from 1 - 5 to pin certain projects to the top. Limited to only 5 pinned posts |
Astro provides great documentation for deploying your Astro websites on various platforms. You can find it here.
Check out Astro Recipes to add other functionality like a RSS feed.
This theme is based off of the theme Astro Cactus and Hugo Risotto.