A production-ready website template for frontend developers built with Nuxt 4, TypeScript, and Tailwind CSS. Features a blog, portfolio showcase, contact form with email integration, and automated CI/CD. Deploy to Cloudflare Workers via NuxtHub.

Check out the example live site

• Nuxt 4 & TypeScript - Vue 3 framework with server-side rendering and full type safety
• Bun - Fast JavaScript runtime and package manager
• Tailwind CSS v4 - Utility-first CSS framework with dark mode support
• Nuxt Content - Markdown-powered blog and portfolio with tag system
• Contact Form - Email delivery via Resend API with anti-spam protection and rate limiting
• Testing - Comprehensive unit test suite with Vitest
• CI/CD - Automated linting, formatting, type checking, testing, and deployment
• Security - Dependabot with auto-merge for safe updates, weekly vulnerability audits, branch protection

• Bun (recommended) or Node.js 20+
• GitHub account (for deployment)
• NuxtHub account (for hosting)

# Install dependencies
bun install

# Copy environment variables
cp .env.example .env
# Edit .env with your values (see below)

# Start development server
bun run dev

Visit http://localhost:3000

Create a .env file:

# NuxtHub Configuration
NUXT_HUB_PROJECT_KEY=your_nuxthub_project_key

# Email Configuration (optional - for contact form)
RESEND_API_KEY=your_resend_api_key
MAIL_FROM=[email protected]
MAIL_TO=[email protected]

# Rate Limiting
MAX_SUBMISSIONS=3
RATE_LIMIT_TTL_SECONDS=3600

# Development
bun run dev              # Start development server
bun run build            # Build for production
bun run preview          # Preview production build

# Testing
bun run test             # Run tests in watch mode
bun run test -- --run    # Run tests once (CI mode)

# Code Quality
bun run lint             # Run ESLint
bun run format           # Format code with Prettier
bun run format:check     # Check formatting
bun run typecheck        # TypeScript type checking
bun run check            # Run quality checks and tests

# Security
bun run audit            # Check for vulnerabilities
bun run audit:fix        # Auto-fix vulnerabilities
bun run outdated         # Check for outdated packages

touch content/writing/my-post.md

---
title: "My Post Title"
description: "Post description"
date: "2024-01-01"
tags: ["nuxt", "typescript"]
image: "/images/post.jpg"
---

Your content here...

touch content/projects/my-project.md

---
title: "Project Name"
description: "Brief description"
date: "2024-01-01"
tech: ["tech", "stack"]
heroImage: "/images/projects/placeholder.png"
thumbnail: "/images/projects/placeholder.png"
---

Project details...

Every push to main automatically:

1. Runs quality checks (lint, format, typecheck)
2. Executes unit tests
3. Builds the project
4. Deploys to NuxtHub/Cloudflare

1. Fork this repository to your GitHub account

2. Check it out locally and set up local environment variables in .env file (as above)

3. Create NuxtHub Project

   • Visit hub.nuxt.com
   • Create new project and link Cloudflare account
   • Link your GitHub repository in NuxtHub
   • Add environment variables in NuxtHub
   • Optional add a custom domain in NuxtHub/Cloudflare

4. Configure Repository Settings

   • See GitHub Settings Guide for detailed instructions
   • Enable branch protection with required status checks
   • Enable Dependabot for automated dependency updates
   • Configure Actions permissions (read/write)
   • Push to your main branch to trigger deployment (or if you have not added a rule exception for the repo admin, you need to create a PR and merge it to deploy updates.)

# Build the project
bun run build

# Deploy to NuxtHub
npx nuxthub deploy

The project includes unit tests covering components and pages:

# Run all tests
bun run test

# Run specific test file
bun run test -- MainComponent.test.ts

# Run tests in CI mode
bun run test -- --run

Tests run automatically in CI/CD and block merges/deployments if failing.

• Dependabot - Weekly dependency scans with auto-merge for patch/minor updates
• Security Audits - Weekly vulnerability scans with bun audit
• Branch Protection - Required status checks block bad code from reaching production
• Contact Form Security - Honeypot, rate limiting, input sanitization, XSS prevention

• Email delivery via Resend API
• Honeypot anti-spam field
• Rate limiting with Cloudflare KV (configurable IP-based limits)
• Server-side validation and sanitization

1. Homepage - Edit content/pages/home.md with your introduction
2. About Page - Edit content/pages/about.md with your background
3. Blog Posts - Replace examples in content/writing/
4. Projects - Replace examples in content/projects/
5. Images - Add your images to public/images/
6. Footer - Update components/main/MainSiteFooter.vue with your name

• Main styles and theme - Edit assets/css/main.css
• Tailwind config - Modify nuxt.config.ts
• Component styles - Some components have scoped styles as well as tailwind classes
• Favicon - Replace public/favicon.ico and the other .pngs with your own

• SEO - Edit meta tags in app.vue and individual pages/components as needed, add OG tags, edit robots.txt, etc. See Nuxt documentation for details
• App config - Edit app.config.ts
• Nuxt config - Edit nuxt.config.ts
• Content config - Edit content.config.ts

• GitHub Settings Guide - Complete repository setup with branch protection
• Quick Reference - Fast setup checklist
• Dependabot Guide - Dependency management and security

This project is open source and available under the MIT License.

Issues and pull requests welcome, fork and create a branch, then a PR. All code quality checks must pass.

Built with Nuxt 4 • Deploy on Cloudflare Workers via NuxtHub