🚀 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

chrismwilliams / mehdi4j