Astro Theme Cody
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 FeatureTable of Contents
- Motivation
- Key Features
- Demo
- Quick Start
- Commands
- Configuring Your Website
- Deploy
- Extra Functionality
- Credit
Motivation
Although 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.
Key Features:
- Astro v4 Fast 🚀
- TailwindCSS Utility classes
- Accessible, semantic HTML markup
- Responsive & SEO-friendly
- Multi-language support
- 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
Demo
Check out the demo here.
Quick Start
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-codyCommands
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 |
Configuring Your Website
Site Config, Social Media Links and Navbar Links
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.
Adding Posts and Projects
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.
Blog post frontmatter
| 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 |
| hide | Optional boolean. Hide a post on /blog page. Will still show up in /archive |
Project frontmatter
| 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 |
Multi-Language Support
See the wiki to set up multi-language support for your blog.
Deploy
Astro provides great documentation for deploying your Astro websites on various platforms. You can find it here.
Extra Funtionality
Check out Astro Recipes to add other functionality like a RSS feed.
Credit
This theme is based off of the theme Astro Cactus and Hugo Risotto.