Skip to content

Latest commit

 

History

History
159 lines (126 loc) · 7.45 KB

README.md

File metadata and controls

159 lines (126 loc) · 7.45 KB
Raw

Contributors Forks Stargazers Issues MIT License

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 Feature

demo-preview

Table of Contents

  1. Motivation
  2. Key Features
  3. Demo
  4. Quick Start
  5. Commands
  6. Configure
  7. Deploy
  8. Extra Functionality
  9. 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
  • 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-cody

(back to top)

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

(back to top)

Configure

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

(back to top)

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.

(back to top)