Astro Theme Cactus

Overview

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

Features

• Astro Fast: Built with the Astro framework for fast performance.
• TailwindCSS Utility classes: Utilizes TailwindCSS utility classes for easy styling.
• Accessible, semantic HTML markup: Uses semantic HTML markup for improved accessibility.
• Responsive & SEO-friendly: Provides a responsive design that is optimized for search engines.
• Dark / Light mode: Supports dark and light mode using Tailwind and CSS variables.
• Astro Assets Integration: Integrates with Astro Assets for optimized images.
• MD & MDX posts: Supports Markdown and MDX files for creating blog posts.
• Satori for creating open graph png images: Uses Satori library for generating open graph images.
• Pagination: Includes automatic pagination for blog posts.
• Automatic RSS feed: Generates an RSS feed automatically.
• Shiki code syntax styling: Provides code syntax styling using Shiki.
• Auto-generated sitemap: Generates a sitemap automatically.
• Pagefind static search library integration: Integrates with Pagefind static search library for search functionality.

Installation

To install the Astro Theme Cactus, follow these steps:

1. Create a new repository from the provided template.
2. Deploy the theme with either Netlify or Vercel.
3. Run the following commands:

• pnpm install to install dependencies.
• pnpm dev to start the local development server at localhost:3000.
• pnpm build to build your production site to ./dist/.
• pnpm postbuild to run the Pagefind script for building the static search of your blog posts.
• pnpm preview to preview your build locally before deploying.
• pnpm sync to generate types based on your config in src/content/config.ts.

4. Configure the theme by:

• Editing the src/site.config.ts file for basic site meta data.
• Updating the astro.config.ts file’s site property with your own domain.
• Replacing and updating files within the /public folder, such as favicon.ico and robots.txt.
• Modifying the src/styles/global.css file with your own light and dark styles.
• Editing social links in src/data/constants.ts and src/components/SocialList.astro to add or replace your media profiles.

5. Create or edit blog posts within the src/content/post/ directory using .md or .mdx files.

6. Customize the OG Image:

• To change the style of the generated image, open src/pages/og-image/[slug].png.ts and modify the markup function.
• To generate SVG OG images instead of PNG, remove the @resvg/resvg-js library and modify the get function in src/pages/og-image/[slug].png.ts.
• Alternatively, you can create your own OG images by adding an ogImage property in the frontmatter of your blog post files.

7. Optional: Fonts can be customized by editing the font family in the src/styles/global.css file.

Summary

Astro Theme Cactus is a simple and opinionated starter theme built with the Astro framework. It provides key features such as fast performance, TailwindCSS utility classes, accessible HTML markup, responsive design, dark and light modes, optimized images, support for Markdown and MDX posts, code syntax styling, automatic pagination, RSS feed generation, sitemap generation, and search functionality. It can be easily installed and customized to create a blog or website.