Best Boilerplates for Portfolio and Personal Sites 2026

TL;DR

Astro is the consensus best framework for developer portfolios in 2026 — zero JavaScript by default, excellent Markdown support, and sub-1s load times are table stakes. Astro Nano is the fastest minimal option. Hugo PaperMod is best for blog-heavy portfolios. Next.js gives maximum customization if you want to add dynamic features later. Choose based on whether you prioritize performance (Astro/Hugo) or flexibility (Next.js).

Portfolio Sites: Simplicity Wins

Portfolio sites have the opposite priorities from enterprise SaaS: simplicity, fast loads, easy content updates, and great design out of the box. The feature set is small — about you, your projects, a blog, and contact. The quality of execution matters more than the feature count.

The framework choice for a portfolio should answer: how much do you want to maintain? Astro and Hugo compile to static HTML with minimal JavaScript — updates are fast, hosting is free, and there's nothing to break. Next.js gives more power but requires more maintenance.

Quick Comparison

Starter	Framework	JS Shipped	Update UX	Hosting	Best For
Astro Nano	Astro	~1KB	MDX files	Free (static)	Developer minimalists
Astro Sphere	Astro	~5KB	MDX files	Free (static)	Design-forward devs
Hugo PaperMod	Hugo	~2KB	Markdown	Free (static)	Blogger-first portfolio
Next.js Portfolio	Next.js	~80KB	MDX files	Vercel free	Devs who know Next.js
Hugo Blox	Hugo	~10KB	Markdown	Free (static)	Academic/researcher

The Starters

Astro Nano — Best Minimal Developer Portfolio

Price: Free | Creator: Mark Horn | GitHub Stars: 2k+

Roughly 10KB total JavaScript. About page, projects section, blog with MDX, dark mode toggle, RSS feed, and clean typography. The fastest portfolio starter available — Lighthouse scores 100 across all metrics with zero configuration.

npm create astro@latest my-portfolio -- --template nano
cd my-portfolio && npm run dev

Content structure:

src/content/
├── blog/
│   ├── post-1.md         # Markdown posts with frontmatter
│   └── post-2.mdx        # MDX for interactive examples
└── projects/
    ├── project-1.md
    └── project-2.md

Frontmatter for blog posts:

---
title: "Building a CLI Tool in Rust"
description: "How I built and shipped a developer CLI that saves an hour per day."
date: 2026-01-15
tags: ["rust", "cli", "developer-tools"]
---

Astro Nano's design is minimalist — monospace font, no animations, high contrast. It's a coder's portfolio, not a designer's showcase. If you want something more visually impressive, consider Astro Sphere instead.

Choose if: You want the fastest possible portfolio with minimal maintenance overhead, and clean minimalism suits your aesthetic.

Astro Sphere — Best Design-Forward

Price: Free | Creator: Mark Horn | GitHub Stars: 3k+

More visually impressive than Nano. Smooth page transitions, animated project cards, skills/stack section, work timeline, and social links. Still fast (Astro), but with more visual polish than the ultra-minimal Nano.

npm create astro@latest my-portfolio -- --template sphere

Sections included:

• Hero with animated intro
• Featured projects with screenshots
• Work/experience timeline
• Tech stack icons grid
• Blog with tags
• Social links and contact section

Choose if: Your work is design or UI-heavy and you want a portfolio that visually demonstrates your capabilities.

Hugo PaperMod — Best Blog-Forward Portfolio

Price: Free | Creator: Aditya Telange | GitHub Stars: 10k+

Hugo's most popular theme. Blazing-fast builds (Hugo compiles 10,000 pages in seconds), clean blog layout, reading time estimates, table of contents, code syntax highlighting, and search. Best when your portfolio is primarily a technical blog with an about page attached.

# Install Hugo
brew install hugo  # macOS

# Create new site with PaperMod
hugo new site my-site
cd my-site
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
echo 'theme = "PaperMod"' >> config.toml
hugo server

Hugo config for portfolio:

# config.toml
baseURL = "https://yourname.dev"
title = "Your Name"
theme = "PaperMod"

[params]
  homeInfoParams = { Title = "Hi, I'm Your Name 👋", Content = "Backend engineer at Company. Writing about Go, distributed systems, and developer tooling." }
  ShowReadingTime = true
  ShowShareButtons = false
  ShowPostNavLinks = true

[[params.socialIcons]]
  name = "github"
  url = "https://github.com/yourname"
[[params.socialIcons]]
  name = "twitter"
  url = "https://twitter.com/yourname"

Choose if: You write technical content regularly and want the best blog experience with portfolio capabilities.

Next.js Portfolio — Best Customizable

Price: Free | Creator: Various (Lee Robinson's leerob.io is popular)

Next.js App Router with MDX blog, syntax highlighting, shadcn/ui components, and Vercel analytics. Less blazing-fast than Astro (React hydration adds ~80KB JavaScript) but significantly more customizable for developers who know React.

// app/blog/[slug]/page.tsx — dynamic MDX posts
import { getBlogPosts } from '@/app/blog/utils';
import { MDXRemote } from 'next-mdx-remote/rsc';

export async function generateStaticParams() {
  const posts = await getBlogPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <article className="prose prose-neutral dark:prose-invert">
      <h1>{post.metadata.title}</h1>
      <MDXRemote source={post.content} />
    </article>
  );
}

When to choose Next.js over Astro:

• You plan to add dynamic features (contact forms with server actions, guestbook, views counter)
• You're already deeply familiar with React/Next.js and want to minimize context-switching
• You want to use React components in your blog posts (interactive demos, calculators)

Hugo Blox — Best Academic Portfolio

Price: Free | Creator: Hugo Blox team

The standard for academic and researcher portfolios. Publications list, talks and presentations, teaching pages, project cards, and integration with Google Scholar. Used by thousands of professors and researchers at universities worldwide.

Choose if: You're building an academic portfolio with publications, citations, and research focus.

What Makes a Great Developer Portfolio

The Essential Sections

1. Hero — Name, one-line description, quick links (GitHub, LinkedIn, Email)

• Write one sentence: "Senior backend engineer specializing in distributed systems at Acme Corp."
• Link directly to GitHub, not through a separate contact page

2. Projects — 3-5 best projects, not 20 mediocre ones

For each project include:

• Screenshot or demo GIF
• One-sentence description of what it does
• The tech stack (keep it brief)
• Link to live demo AND source code

3. Blog — Even 3-5 posts signal communication ability and technical depth

Write about problems you solved, not tutorials that already exist. Recruiters notice "I debugged a production memory leak" more than "How to use React hooks."

4. Contact — Keep it simple: email link or form

SEO for Portfolios

Portfolios should rank for your name + developer keywords:

<!-- Essential meta tags -->
<title>Sarah Chen — Backend Engineer | Go, Kubernetes, Distributed Systems</title>
<meta name="description" content="Backend engineer at Acme Corp. 8 years building distributed systems, author of go-caching library (2k+ stars), writing about Go and observability.">
<meta property="og:image" content="https://sarahchen.dev/og.png">

<!-- JSON-LD for search engines -->
<script type="application/ld+json">
{
  "@type": "Person",
  "name": "Sarah Chen",
  "jobTitle": "Backend Engineer",
  "url": "https://sarahchen.dev",
  "sameAs": [
    "https://github.com/sarahchen",
    "https://linkedin.com/in/sarahchen"
  ]
}
</script>

All Astro and Next.js portfolio templates include SEO components — Hugo themes do too. The main thing to customize is the JSON-LD schema with accurate personal information.

Deployment: Free Hosting Options

All these starters deploy for free on static hosting:

Provider	Build Minutes	Bandwidth	Custom Domain
Vercel	6,000/month	100GB	Free SSL
Netlify	300/month	100GB	Free SSL
Cloudflare Pages	Unlimited	Unlimited	Free SSL
GitHub Pages	N/A	1GB/month	Free SSL

Recommendation: Cloudflare Pages for the best free tier (unlimited builds, global CDN, no bandwidth limits). Vercel if you're using Next.js for the best deployment experience.

# Deploy Astro to Cloudflare Pages
npm run build
# Output to dist/ — upload via Cloudflare dashboard or GitHub integration

Performance Targets

For a developer portfolio, aim for:

Metric	Target	Achieved by
LCP	< 1.5s	Static HTML + image optimization
FID/INP	< 100ms	Minimal JavaScript
CLS	0	Explicit image dimensions
PageSpeed	95+	Any well-configured Astro/Hugo starter

Astro and Hugo hit these targets by default. Next.js reaches them with proper configuration: static export, next/image for all images, and minimizing client-side JavaScript.

Choosing the Right Framework for Your Portfolio

The framework choice isn't as consequential as it feels when you're starting. Any of these starters will get you a fast, professional portfolio. What matters more is actually building it and publishing it.

That said, here's the simplest decision framework:

Pick Astro Nano if:

• You want to be done with framework decisions today
• Your content is primarily text (blog posts, project writeups)
• Performance scores matter to you personally

Pick Hugo PaperMod if:

• You write frequently — Hugo's build speed at scale (1,000+ posts in <1 second) is unmatched
• You're comfortable with Go templating syntax
• You want a battle-tested, extremely stable platform

Pick Next.js if:

• You're already deeply comfortable with React and don't want to learn new framework conventions
• You plan to add interactive features: comment systems, contact forms with server actions, live coding demos in posts
• You want the portfolio to also serve as a playground for Next.js experiments

Pick Hugo Blox if:

• The academic template fits your situation precisely: publications, talks, courses

The mistake to avoid: overthinking this and not shipping. A live portfolio on Astro Nano is worth more than a perfect portfolio in progress. The frameworks are fast enough that migrating later is always an option.

What Content Recruiters Actually Look For

Beyond the technical setup, the content is what converts. Based on hiring patterns at developer-focused companies:

1. A personal README-style intro — 3-4 sentences on what you do, what problems you solve, and what you're excited about. Generic bios ("passionate developer") are skipped.
2. 3-5 well-documented projects with visible impact — "Reduced API response time by 60%" beats "Built a REST API". Screenshots and live demos matter.
3. At least one long-form post showing how you think through a problem. Even one post on debugging a production incident or explaining a technical decision demonstrates engineering communication more effectively than any skill badge.
4. GitHub activity that matches your claims — recruiters check. Consistent green squares matter more than a single big project.

The portfolio is a signal, not the whole story. Its job is to get you to the next conversation.

---

Astro Content Collections for Type-Safe Portfolio Content

Astro's Content Collections API provides type-safe access to Markdown and MDX files — the right way to manage projects and blog posts without a CMS. Define a schema once and TypeScript catches missing fields before they reach production:

// src/content/config.ts — define your content schemas
import { defineCollection, z } from 'astro:content';

const projects = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    tech: z.array(z.string()),
    github: z.string().url().optional(),
    live: z.string().url().optional(),
    featured: z.boolean().default(false),
    date: z.date(),
  }),
});

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { projects, blog };

With this schema defined, Astro generates TypeScript types automatically. Access your projects anywhere:

// Filter to featured projects, sorted by date
const allProjects = await getCollection('projects');
const featured = allProjects
  .filter((p) => p.data.featured)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());

Type errors surface immediately when frontmatter is missing or wrong — instead of runtime failures when a project page renders without its title. This is the same end-to-end type safety approach that full-stack TypeScript boilerplates apply to database-to-UI flows, applied here to content files.

---

Custom Domain Setup

A custom domain separates a serious portfolio from a generic subdomain. Setup is straightforward:

With Cloudflare Pages (recommended):

1. Add your site in Cloudflare Pages (connected to your GitHub repo)
2. Go to Custom domains → add yourname.dev
3. If your domain is already on Cloudflare DNS, it connects instantly with SSL

With Vercel:

1. Add your domain in the Vercel dashboard (Settings → Domains)
2. Add a CNAME pointing www to cname.vercel-dns.com and an A record for the apex domain
3. Vercel provisions SSL automatically

.dev domains cost $10-15/year. For a portfolio, this is the single best investment — a custom domain signals professionalism and is immediately memorable in a way that yourname.vercel.app is not.

---

Portfolio Maintenance Reality

A static portfolio has minimal maintenance compared to a web application. What actually requires ongoing attention:

Quarterly:

• Update project descriptions when work evolves
• Check that live demo links still work — a dead link is worse than no link
• Add significant new projects or blog posts

When changing jobs:

• Update the hero intro and work timeline immediately
• Verify that work samples from the previous role are still accessible (many are taken down)

Annually:

• Run npm audit and update critical security issues in dependencies
• Astro major versions release every 12-18 months with clear migration guides — the upgrade is typically 2-3 hours

The practical benefit of a static portfolio: there is no server to patch, no database to back up, and no downtime incidents. You write and push; the CDN handles the rest.

---

What Content Recruiters Actually Look For

Beyond the technical setup, the content determines results. Three things that matter more than framework choice:

Specificity over volume. Three well-documented projects beat ten half-finished ones. For each project: a screenshot or demo, one sentence on what it does and why it exists, the tech stack, and links to both the demo and source. Vague projects ("A web app I built to learn React") contribute nothing — if you can't describe the value in one sentence, consider whether it belongs in the portfolio at all.

Blog posts that show reasoning. Recruiters at technical companies read portfolios, not just scan them. One post that describes debugging a production issue, explaining a technical decision, or walking through a system design demonstrates engineering communication more effectively than any skill badge. Tutorials that already exist online are worth writing — they show you understand the material — but posts about real problems you encountered carry significantly more weight.

Consistency between GitHub and portfolio. Recruiters verify claims. If your portfolio says "5 years of Go experience" but your GitHub shows no Go repositories, that's a red flag. Active commit history on the projects you highlight is the strongest corroboration of your portfolio claims.

The portfolio's job is not to get you hired — it's to get you to the next conversation. Design for that goal: make it easy to find your work, easy to contact you, and easy to verify your experience.

---

Browse all portfolio and personal site boilerplates in the StarterPick directory.

Compare Astro starters vs Next.js to choose the right framework for your next project.

Review AstroWind — the best Astro template for landing pages alongside portfolios.

See also: best Astro boilerplates 2026 for a deeper look at Astro starters beyond portfolios. If your portfolio is the start of a larger SaaS product, the best SaaS boilerplates 2026 guide covers what to use when you need auth, billing, and a database.