🚀 Astro Theme Cactus 🌵

Astro Theme Cactus is a simple opinionated starter built with the Astro framework. Use it to create an easy-to-use blog or website.

Key Features

• Astro Fast 🚀
• TailwindCSS Utility classes
• Accessible, semantic HTML markup
• Responsive & SEO-friendly
• Dark / Light mode, using Tailwind and CSS variables
• Astro Image Integration for optimised images
• MD & MDX posts
• Pagination
• Shiki code syntax styling
• Auto-generated sitemap

Demo 💻

Check out the Demo, hosted on Netlify

Quick start

Create a new repo from this template.

Commands

Replace pnpm with your choice of npm / yarn

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:3000
pnpm build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm sync	Generate types based on your config in src/content/config.ts

Configure

• Edit the config file src/site.config.ts for basic site meta data
• Update file astro.config.ts site property with your own domain
• Replace & update files within the /public folder:
  • favicon.ico
  • /images folder - add your own icon
  • robots.txt - update the Sitemap url to your own domain
  • manifest.webmanifest
• Modify file src/styles/global.css with your own light and dark styles
• Create / edit posts for your blog within src/content/post/ with .md/mdx file(s). See below for more details.
• Optional:
  • Fonts: This theme sets the body element to the font family font-mono, located in the global css file src/styles/global.css. You can change fonts by removing the variant font-mono, after which TailwindCSS will default to the font-sans font family stack.

Adding posts

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.

Adding a post is a simple as adding your .md(x) file(s) to the src/content/post folder, the filename of which will be used as the slug/url. The two posts included with this template are there as an example of how to structure your frontmatter. Additionally, the Astro docs has a detailed section on markdown pages.

Frontmatter

Property (* required)	Description
title *	Self explanatory. Used as the text link to the post, the h1 on the posts' page, and the pages title property. Has a max length of 60 chars, set in src/content/config.ts
description *	Similar to above, used as the seo description property. Has a min length of 50 and a max length of 160 chars, set in the post schema.
publishDate *	Again pretty simple. To change the date format/locale, currently en-GB, update/pass the locale arg to function getFormattedDate, found in src/utils/date.ts.
tags	Tags are optional with any created post. Any new tag(s) will be shown in yourdomain.com/posts + yourdomain.com/tags, and generate the page(s) yourdomain.com/tags/[yourTag]

Deploy

Astro docs has a great section and breakdown of how to deploy your own Astro site on various platforms and their idiosyncrasies.

By default the site will be built (see Commands section above) to a /dist directory.

Acknowledgment

This theme is inspired by Hexo Theme Cactus

License

Licensed under the MIT License, Copyright © 2022