Astro Portfolio + Blog + Wiki Template

The Astro Portfolio + Blog + Wiki Template is a buildable Astro starter that provides a portfolio site, an editorial blog, and an optional knowledge wiki, shipped with example content and placeholder SVG assets that must be replaced before publishing.

What is the Astro Portfolio + Blog + Wiki Template?

It is a generic Astro project that generates a multi-section static website from Markdown and MDX content. Built with Astro and Tailwind CSS, it takes configuration from src/config.ts, author profiles from src/authors.js, and posts or wiki entries from content collections, and outputs a static dist/ directory ready for any static host. The template is created by Eloy Martínez Cuesta and is released under the MIT license.

Key Features

• Astro framework — the site is built on Astro, with Markdown, sitemap, and Tailwind integration configured in astro.config.mjs.
• Tailwind CSS styling — visual tokens and global styles live in src/styles/ and src/components/.
• Markdown and MDX content — blog posts go under src/content/blog/ and the content schema is defined in src/content.config.ts.
• Optional wiki collection — wiki entries are placed under src/content/wiki/iluminacion/, and the collection and route can be renamed for another subject area.
• Portfolio, blog, tags, archive, and API routes — page routes are organized under src/pages/ with dedicated layouts for site, home, interior, and articles.
• Search and RSS — the repository includes search and RSS support as part of its page and API routes.
• Responsive navigation and SEO metadata — navigation, SEO components, and social links are configurable through src/config.ts and shared UI components.
• Cloudflare Pages ready — an optional wrangler.toml is included, and the built dist/ folder can be deployed to any static host.

Who is it for?

• Developers building a personal portfolio: use the portfolio routes and configuration file to present projects and profile details.
• Writers launching an editorial blog: add Markdown or MDX posts and use the blog, tag, and archive routes without building the scaffolding from scratch.
• Knowledge-base maintainers: populate the wiki collection with structured entries and rename the collection for a different subject area.

What can you do with the Astro Portfolio + Blog + Wiki Template?

• Publish a combined portfolio and blog: configure site identity in src/config.ts, replace author profiles, and add posts to produce a working multi-section site.
• Run a subject-specific wiki: add entries to the wiki collection and adjust the route to match a chosen topic.
• Deploy to a static host: run npm run build and upload the generated dist/ directory to Cloudflare Pages or any other static hosting service.

How does the Astro Portfolio + Blog + Wiki Template work?

After installing dependencies with npm, the local development server runs at http://localhost:4321 via npm run dev. Content is added as Markdown or MDX files in the blog and wiki collections, configuration is edited in src/config.ts and src/authors.js, and a production build is generated with npm run build. Node.js 22.12.0 or newer is required.

FAQ

Is the Astro Portfolio + Blog + Wiki Template free?

Yes. The template is released under the MIT license, with copyright attributed to Eloy Martínez Cuesta. The repository includes example content, placeholder SVG assets, and example URLs, names, social handles, analytics IDs, and legal text that should be replaced before publishing.

What Node.js version does the template require?

The template requires Node.js version 22.12.0 or newer, along with npm. Development starts with npm install followed by npm run dev, and the local site is served at http://localhost:4321.

Where do I add blog posts and wiki entries?

Blog posts are added as Markdown or MDX files under src/content/blog/, and wiki entries go under src/content/wiki/iluminacion/. The content collection schema and loader are defined in src/content.config.ts, which can be adjusted for different content patterns.

How is the site deployed?

Running npm run build produces a dist/ directory that can be deployed to any static host, including Cloudflare Pages. An optional wrangler.toml file is included for Cloudflare Pages settings.