Astrofilio is a clean, fast portfolio and blog template built with Astro, Tailwind CSS, and Cloudflare Pages, designed to turn Markdown and MDX content into a high-performance personal website.
What is Astrofilio?
Astrofilio is a static site template for personal portfolios and blogs. It takes Markdown or MDX files placed in the /content folder plus site metadata from src/config.js and outputs a fully generated website with RSS, sitemap, Open Graph images, and SEO tags. The template is an open-source port of Nextfolio, created by Vikas in 2024 and released under the MIT license.
Key Features
- MDX Support — Write blog posts in Markdown or MDX and embed JSX components directly in content.
- Light and Dark Mode Toggle — Switch between themes at runtime for better readability.
- Dynamic OG Images — Auto-generate Open Graph images for social sharing without manual image creation.
- SEO Optimization — Includes sitemap and robots.txt generation out of the box.
- Dynamic RSS Feed — Automatically generates an RSS feed at /rss.xml from blog content.
- KaTeX Integration — Render mathematical expressions in posts using KaTeX.
- Vercel Web Analytics — Built-in performance tracking via Vercel's analytics service.
- Interactive Embeds and Captions — Embed tweets and YouTube videos, and add captions to photos, tweets, and videos.
- Image Grid — Showcase photo galleries or image collections with a built-in grid component.
- View Transitions — Smooth page transitions powered by Astro's View Transitions API.
Tech stack: Astro framework, Tailwind CSS for styling, Vercel Geist Font for typography, and deployment targets including Cloudflare Pages and Vercel.
Who is it for?
- Developers who want a fast, lightweight portfolio and blog with minimal JavaScript.
- Technical writers who need Markdown/MDX authoring plus math rendering via KaTeX.
- Designers and photographers who want to present work with the image grid and captions.
What can you do with Astrofilio?
- Developers: Publish a personal site with a blog, project showcase, and social links, configured from a single config file.
- Writers: Write posts in Markdown or MDX and include interactive embeds like tweets and YouTube videos.
- Photographers: Use the image grid to display galleries and add descriptive captions to each image.
How does Astrofilio work?
Install dependencies with bun, then run bun dev for local development. Update src/config.js for site metadata and social links, then add posts to the /content directory. Deploy to Cloudflare Pages or use the one-click Vercel deploy button.
Alternatives
- Nextfolio — the Next.js-based template Astrofilio is ported from, which uses React instead of Astro.
FAQ
Is Astrofilio free?
Yes, Astrofilio is open source and released under the MIT License, so it is free to use, modify, and distribute.
How do I customize the site?
Edit src/config.js to update site metadata, SEO settings, social links, and Open Graph configuration. Blog content lives in the /content folder.
Does Astrofilio support math notation?
Yes, KaTeX is integrated, so you can render mathematical expressions in Markdown and MDX posts.
Can I deploy to Vercel?
Yes, the template includes a one-click "Deploy with Vercel" button, and it can also be deployed to Cloudflare Pages.
