Astro Theme Cactus is a simple opinionated starter built with the Astro framework. Use it to create an easy-to-use blog or website.
- 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
Check out the Demo, hosted on Netlify
Create a new repo from this template.
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 |
- 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 filesrc/styles/global.css
. You can change fonts by removing the variantfont-mono
, after which TailwindCSS will default to thefont-sans
font family stack.
- Fonts: This theme sets the body element to the font family
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.
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] |
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.
This theme is inspired by Hexo Theme Cactus
Licensed under the MIT License, Copyright © 2022