My own blog, based on [Astro Cactus](https://github.com/chrismwilliams/astro-theme-cactus)
This is my blog, made via Astro and based on the awesome Astro Cactus Template by Chris Williams.
- Astro v5 Fast 🚀
- TailwindCSS Utility classes
- Accessible, semantic HTML markup
- Responsive & SEO-friendly
- Dark / Light mode, using Tailwind and CSS variables
- MD & MDX posts & notes
- Includes Admonitions
- Satori for creating open graph png images
- Automatic RSS feed
- Webmentions
- Auto-generated:
- Pagefind static search library integration
- Astro Icon svg icon component
- Expressive Code code blocks and syntax highlighter
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm dev |
Starts local dev server at localhost:3000 |
npm build |
Build your production site to ./dist/ |
npm postbuild |
Pagefind script to build the static search of your blog posts |
npm preview |
Preview your build locally, before deploying |
npm sync |
Generate types based on your config in src/content/config.ts |
- Replace & update files within the
/publicfolder:- icon.svg - used as the source to create favicons & manifest icons
- social-card.png - used as the default og:image
- Modify file
src/styles/global.csswith your own light and dark styles.- You can also modify the theme(s) for markdown code blocks generated by Expressive Code. Astro Cactus has both a dark (dracula) and light (github-light) theme, which can be found in
src/site.config.ts. You can find more theme(s) and options here.
- You can also modify the theme(s) for markdown code blocks generated by Expressive Code. Astro Cactus has both a dark (dracula) and light (github-light) theme, which can be found in
- Create/edit posts & notes for your blog within
src/content/post/&src/content/note/with .md/mdx file(s). See below for more details.- Read this post for adding webmentions to your site.
- OG Image:
- If you would like to change the style of the generated image the Satori library creates, open up
src/pages/og-image/[slug].png.tsto the markup function where you can edit the html/tailwind-classes as necessary. You can use this playground to aid your design. - You can also create your own og images and skip satori generating it for you by adding an ogImage property in the frontmatter with a link to the asset, an example can be found in
src/content/post/social-image.md. More info on frontmatter can be found here
- If you would like to change the style of the generated image the Satori library creates, open up
- 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-sansfont family stack.
- Fonts: This theme sets the body element to the font family
This theme utilises Content Collections to organise local Markdown and MDX files, as well as type-checking frontmatter with a schema -> src/content/config.ts.
Adding a post/note is as simple as adding your .md(x) files to the src/content/post and/or src/content/note folder, the filename of which will be used as the slug/url. The 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 the date option in src/site.config.ts. Note you can also pass additional options to the component <FormattedDate> if required. |
| updatedDate | This is an optional date representing when a post has been updated, in the same format as the publishDate. |
| 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] |
| coverImage | This is an optional object that will add a cover image to the top of a post. Include both a src: "path-to-image" and alt: "image alt". |
| ogImage | This is an optional property. An OG Image will be generated automatically for every post where this property isn't provided. If you would like to create your own for a specific post, include this property and a link to your image, the theme will then skip automatically generating one. |
| draft | This is an optional property as it is set to false by default in the schema. By adding true, the post will be filtered out of the production build in a number of places, inc. getAllPosts() calls, og-images, rss feeds, and generated page[s]. |
| Property (* required) | Description |
|---|---|
| title * | string, max length 60 chars. |
| description | to be used for the head meta description property. |
| publishDate * | ISO 8601 format with offsets allowed. |
This integration brings a static search feature for searching blog posts and notes. In its current form, pagefind only works once the site has been built. This theme adds a postbuild script that should be run after Astro has built the site. You can preview locally by running both build && postbuild.
Search results only includes pages from posts and notes. If you would like to include other/all your pages, remove/re-locate the attribute data-pagefind-body to the article tag found in src/layouts/BlogPost.astro and src/components/note/Note.astro.
It also allows you to filter posts by tags added in the frontmatter of blog posts. If you would rather remove this, remove the data attribute data-pagefind-filter="tag" from the link in src/components/blog/Masthead.astro.
If you would rather not include this integration, simply remove the component src/components/Search.astro, and uninstall both @pagefind/default-ui & pagefind from package.json. You will also need to remove the postbuild script from here as well.
You can reduce the initial css payload of your css, as demonstrated here, by lazy loading the web components styles.
You may want to track the number of visitors you receive to your blog/website in order to understand trends and popular posts/pages you've created. There are a number of providers out there one could use, including web hosts such as vercel, netlify, and cloudflare.
This theme/template doesn't include a specific solution due to there being a number of use cases and/or options which some people may or may not use.
You may be asked to included a snippet inside the HEAD tag of your website when setting it up, which can be found in src/layouts/Base.astro. Alternatively, you can add the snippet in src/components/BaseHead.astro.
By default the site will be built (see Commands section above) to a /dist directory.
GPL