astro-theme-cody

Table of Contents

• Motivation
• Key Features
• Demo
• Quick Start
• Commands
• Configuring Your Website
  • Site Config, Social Media Links and Navbar Links
  • Adding Posts and Projects
  • Multi-Language Support
• 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
• Search through posts with PageFind
• 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-cody

Commands

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.