My Portfolio

🚀 Project Case Study: High-Performance Static Portfolio with Serverless CMS Backend

🎯 Project Summary

A personal portfolio website developed to showcase expertise in the modern Jamstack ecosystem, focusing on performance, maintainability, and self-hosted authentication. The site uses Nuxt for a static build, the Nuxt Content module for simplified writing, and Decap CMS for content editing. A key technical challenge solved was implementing a fully self-hosted, serverless GitHub OAuth flow using Cloudflare Workers (via Cloudflare Pages Functions) to authenticate the CMS.

🛠️ Technology Stack & Key Modules

📈 Performance & Optimization Focus

A core objective was achieving exceptional performance scores, leveraging the advantages of static site generation (SSG) and strategic Nuxt modules.

• Static Site Generation (SSG): By deploying static files built during the CI/CD pipeline, the site eliminates server-side processing overhead on page requests, ensuring extremely fast Time to First Byte (TTFB).
• Image Optimization: The Nuxt Image module was implemented to automatically generate different image formats and sizes, serving the smallest possible image based on the user's device and viewport.
• Third-Party Script Loading: Nuxt Scripts was used to ensure scripts like Google Tag Manager are loaded non-render-blocking, preserving a high performance score.
• Zero-Cost Email Solution: Cloudflare's free email forwarding service was used, combined with a manual SPF record update in the DNS settings, to allow sending email via a verified address without the need for a separate, costly email server.

Performance Metrics (Google PageSpeed Insights)

💻 Technical Deep Dive: Self-Hosted Serverless Authentication

The biggest technical challenge was implementing a fully self-hosted solution for the Decap CMS authentication, avoiding reliance on third-party backends like Netlify Identity. This required learning and implementing GitHub OAuth 2.0 using Cloudflare Pages Functions (built on Workers).

Challenge: Implementing OAuth using Cloudflare Workers

The solution required creating an API endpoint that lives within the static site's deployment environment.

1. Cloudflare Pages Functions: Backend logic was implemented by placing TypeScript files (.ts) within a functions directory, automatically creating serverless API routes (e.g., /decap/auth).
2. GitHub OAuth Application: An OAuth App was registered in GitHub to obtain the necessary Client ID and Secret Key.
3. Secure Secret Management: The Client ID and Secret Key were securely stored as environment variables (Secrets) within the Cloudflare Pages project settings, ensuring they are not exposed in the client-side code.

Key Implementation Steps (Auth Request)

To simplify the OAuth process, an OAuthClient class was created to handle configuration and token exchange. The first function handled the initial request:

• The Cloudflare function is triggered at the custom endpoint (e.g., /decap/auth).
• It generates the GitHub authorization URL using the stored Client ID and scope requirements.
• It redirects the user's browser to GitHub to authorize the application.

// /functions/decap/auth.ts
export function onRequest(context) {
    const url = new URL(context.request.url);
    // handleAuth utilizes the environment variables (context.env) 
    // to build and return the redirect to GitHub.
    return handleAuth(url, context.env); 
}

The OAuthClient class was central to abstracting the logic for generating the authorization URL and, crucially, handling the subsequent token exchange in the callback function.

// OAuthClient authorization method snippet
authorizeURL(options: { redirect_uri: string; scope: string; state: string }) {
    const { clientConfig } = this;
    const { tokenHost, authorizePath } = clientConfig.target;
    // Constructs the final URL used to redirect the user to GitHub
    return `${tokenHost}${authorizePath}?response_type=code&client_id=${clientConfig.id}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}`;
}

This successful implementation allows the Decap CMS to fully authenticate against GitHub, enabling secure content editing without any additional, external server or service cost.

⭐ Skills Demonstrated

• Front-End Development: Nuxt 3, Component Architecture, Content Management (Nuxt Content).
• Performance Optimization: Static Site Generation (SSG), Image Optimization (Nuxt Image), Script Management (Nuxt Scripts), High PageSpeed Scores.
• Serverless Architecture: Cloudflare Pages Functions (Workers), Serverless API Endpoint Creation.
• Security & Authentication: Implementation of GitHub OAuth 2.0 Flow, Secure Secret Management (Cloudflare Variables and Secrets).
• DevOps/CI/CD: Automated deployment via GitHub and Cloudflare Pages.
• Networking: DNS Configuration (SPF records), Email Forwarding.