Personal blog of Christopher Kennedy-Nuñez, built with Astro.
This README covers setup, commands, and deploying. For how individual features are built —
the markdown/lightbox pipeline, theming, search, webmentions, OG images, the CMS — see
docs/.
- Key Features
- Live site
- Quick start
- Commands
- Configure
- Updating
- Adding posts, notes, and tags
- Pagefind search
- Analytics
- Deploy
- Acknowledgment
- Astro v6 Fast 🚀
- Tailwind v4
- Accessible, semantic HTML markup
- Responsive & SEO-friendly
- Dark & Light mode
- MD & MDX posts & notes
- Includes Admonitions
- Satori for creating open graph png images
- Automatic RSS feeds
- Webmentions
- Auto-generated:
- Pagefind static search library integration
- Astro Icon svg icon component
- Expressive Code code blocks and syntax highlighter
Check out the site at furioursus.dev
Create a new repo from this template.
npm create astro@latest -- --template furioursus/furioursus.dev-cactus
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run postbuild |
Pagefind script to build the static search of your blog posts |
npm run preview |
Preview your build locally, before deploying |
npm run sync |
Generate types based on your config in src/content/config.ts |
- Edit the site config file
src/site.config.ts- Important: set the url property with your own domain.
- Modify the settings for markdown code blocks, generated by Expressive Code. This site has both a dark and light theme. You can find more options @ expressive-code.
- Update file
astro.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, and customise Tailwind's theme settings. - Edit social links in
src/components/SocialList.astroto add/replace your media profile. Icons can be found @ icones.js.org, per Astro Icon's instructions. - Create/edit posts & notes for your blog within
src/content/post/&src/content/note/with .md/mdx file(s). See below for more details.- See Webmention.io for adding webmentions to your site.
- Add any custom Tag pages for related blog posts in
/src/content/tag/, ensuring that the file name is the same as the tag.
- OG Image:
- If you would like to change the style of the generated image the Satori library creates, open up
src/pages/og-image/_ogMarkup.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. More info on frontmatter can be found below
- If you would like to change the style of the generated image the Satori library creates, open up
- Optional:
- Fonts: the site sets the body element to the font family
font-mono, insrc/layouts/Base.astroon the<body>. You can change fonts by removing the variantfont-mono, after which TailwindCSS will default to thefont-sansfont family stack.
- Fonts: the site sets the body element to the font family
If you've forked the template, you can sync the fork with your own project, remembering to not click Discard Changes as you will lose your own.
If you have a template repository, you can add this template as a remote, as discussed here.
The site uses 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/tag is as simple as adding your .md(x) files to either src/content/post, src/content/note, and src/content/tag folders, the filename of which will be used as the slug/url.
The Tag collection allows you to override the content shown for generated tag pages.
Note For a tag page to work, the file name (
src/content/tag/*) must also be in a post's tags frontmatter.
The Astro docs have 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 your-domain.com/posts & your-domain.com/tags, and generate the page(s) your-domain.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, generation will then be skipped. |
| 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 * | Used as the link text to the note, the pages title property, and the h1 of said note page. Has a max length 60 chars. |
| description | Optional. Used for the head meta description property. |
| publishDate * | ISO 8601 format with offsets allowed. |
| Property (* required) | Description |
|---|---|
| title | Optional. Used as the h1 on the tags' page, and the pages title property. Has a max length of 60 chars. |
| description | Optional. Used for the head meta description and the first paragraph under the h1. |
This project includes a helpful VSCode snippet which creates a frontmatter 'stub' for posts and note's, found here -> .vscode/post.code-snippets. Start typing the word frontmatter on your newly created .md(x) file to trigger it. Visual Studio Code snippets appear in IntelliSense via (⌃Space) on mac, (Ctrl+Space) on windows.
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 site 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 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 project 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.
For guidence, the Astro docs has a great breakdown of how to deploy your own Astro site on various platforms and their idiosyncrasies.
By default, the site prerenders all pages and endpoints, with the 'static' output, and the './dist' output directory.
You do not need to add any adapter to build this site.
If deploying via Cloudflare Workers, you may have issues with regards to the OG image endpoints and it requiring a Node environment. To solve this, you will need to add a Wrangler configuration file for a static build.
If you are intending to use the Clouflare adapter, please set the prerenderEnvironment to 'node', and follow the Cloudflare docs.
Please note the
nodejs_compatflag, and the main entry point which is incorrect on Cloudflare's docs at the time of writing.
{
"name": "furioursus-dev",
"main": "@astrojs/cloudflare/entrypoints/server",
// Set this to today's date
"compatibility_date": "2026-05-11",
"compatibility_flags": ["global_fetch_strictly_public", "nodejs_compat"],
"assets": {
"binding": "ASSETS",
"directory": "./dist",
"not_found_handling": "404-page"
},
"observability": {
"enabled": true
}
}This project doesn't handle subdirectory/base-path deployments (e.g. GitHub Pages project sites) out of the box and will cause issues.
All internal links are root-absolute and don't take into account base path values.
See Astro's docs on base and internal linking if you require this.
This site is built on the Astro Cactus starter template by Chris Williams, which was in turn inspired by Hexo Theme Cactus.
MIT
{ "name": "furioursus-dev", // Set this to today's date "compatibility_date": "2026-05-11", "assets": { "directory": "./dist", "not_found_handling": "404-page" } }