Fast Static Website Deployment - Tech Cheat Sheet

This is a submission for the Pulumi Deploy and Document Challenge: Fast Static Website Deployment What I Built I created an automated infrastructure setup that deploys a Next.js-based technical documentation website to AWS. The website is a comprehensive tech cheat sheet covering various topics including: Cloud platforms (AWS, Azure, GCP) DevOps practices (CI/CD, Containers, IaC) Programming concepts (Algorithms, Data Structures, Design Patterns) Key technical features: Static site generation using Next.js 13+ with App Router Modern UI with Tailwind CSS Type-safe development with TypeScript Optimized build output for static hosting Global content delivery through CloudFront Live Demo Link Visit my static website Project Repo mawais-afz / tech-cheat-sheet Static Website Hosting on AWS with Pulumi This project demonstrates how to deploy a static website to AWS using Pulumi, configuring S3 for hosting and CloudFront for content delivery. Prerequisites Pulumi CLI Node.js AWS CLI configured with appropriate credentials AWS Account Getting Started Create a new Pulumi project: mkdir tech-cheat-sheet && cd tech-cheat-sheet pulumi new static-website-aws-typescript Create a new folder for the frontend: mkdir frontend && cd frontend Create a new Next.js project with default settings: npx create-next-app@latest . Update the Pulumi Stack Settings: Update config in Pulumi.dev.yaml from ./www to ./frontend/out: tech-cheat-sheet:path: ./frontend/out Update path in index.ts from ./www to ./frontend/out: const path = config.get("path") || "./frontend/out"; Remove the www folder from the project. Project Structure ``` tech-cheat-sheet/ ├── frontend/ │ ├── .next/ │ ├── app/ │ ├── components/ │ ├── out/ │ ├── public/ │ ├── styles/ │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── next.config.mjs… View on GitHub My Journey I set out to create a comprehensive technical documentation platform that would serve as a quick reference for developers. The project evolved into a modern static website built with Next.js and deployed on AWS using Pulumi for infrastructure management. Development Process Frontend Architecture I started with Next.js 13+ using the App Router, focusing on creating a clean, organized structure Static Export Configuration One of the first challenges was configuring Next.js for static export. I solved this by updating the Next.js configuration Infrastructure Challenges S3 Bucket Configuration Setting up the S3 bucket for static hosting required careful configuration of ownership controls and public access CloudFront Distribution Implementing CloudFront for content delivery was complex, requiring proper origin configuration and cache behavior settings Deployment Automation I created a streamlined deployment process by configuring Pulumi to handle both infrastructure and content deployment Using Pulumi Infrastructure Setup I used Pulumi to create and manage the entire AWS infrastructure for hosting our static documentation website. The core infrastructure components were defined using TypeScript, providing type safety and better IDE support. Key Components S3 Website Bucket Configuration const bucketWebsite = new aws.s3.BucketWebsiteConfigurationV2("bucketWebsite", { bucket: bucket.bucket, indexDocument: {suffix: indexDocument}, errorDocument: {key: errorDocument}, }); Access Controls and Security const ownershipControls = new aws.s3.BucketOwnershipControls("ownership-controls", { bucket: bucket.bucket, rule: { objectOwnership: "ObjectWriter", }, }); Content Synchronization const bucketFolder = new synced_folder.S3BucketFolder("bucket-folder", { path: path, bucketName: bucket.bucket, acl: "public-read", }, { dependsOn: [ownershipControls, publicAccessBlock]}); Benefits of Using Pulumi Type Safety and IDE Support Using TypeScript provided compile-time checking Excellent IDE integration with autocomplete Caught potential errors before deployment Resource Dependencies Automatic handling of resource dependencies Clear visualization of infrastructure relationships Prevented race conditions during deployment Configuration Management config: aws:region: us-east-1 tech-cheat-sheet:errorDocument: error.html tech-cheat-sheet:indexDocument: index.html tech-cheat-sheet:path: ./frontend/out

Mar 30, 2025 - 18:51

This is a submission for the Pulumi Deploy and Document Challenge: Fast Static Website Deployment

What I Built

I created an automated infrastructure setup that deploys a Next.js-based technical documentation website to AWS. The website is a comprehensive tech cheat sheet covering various topics including:

Cloud platforms (AWS, Azure, GCP)
DevOps practices (CI/CD, Containers, IaC)
Programming concepts (Algorithms, Data Structures, Design Patterns)

Key technical features:

Static site generation using Next.js 13+ with App Router
Modern UI with Tailwind CSS
Type-safe development with TypeScript
Optimized build output for static hosting
Global content delivery through CloudFront

Live Demo Link

Visit my static website

Project Repo

mawais-afz / tech-cheat-sheet

Static Website Hosting on AWS with Pulumi

This project demonstrates how to deploy a static website to AWS using Pulumi, configuring S3 for hosting and CloudFront for content delivery.

Prerequisites

Pulumi CLI
Node.js
AWS CLI configured with appropriate credentials
AWS Account

Getting Started

Create a new Pulumi project:

mkdir tech-cheat-sheet && cd tech-cheat-sheet
pulumi new static-website-aws-typescript

Create a new folder for the frontend:
```
mkdir frontend && cd frontend
```
Create a new Next.js project with default settings:
```
npx create-next-app@latest .
```
Update the Pulumi Stack Settings:
Update config in Pulumi.dev.yaml from ./www to ./frontend/out:
```
tech-cheat-sheet:path: ./frontend/out
```
Update path in index.ts from ./www to ./frontend/out:
```
const path = config.get("path") || "./frontend/out";
```
Remove the www folder from the project.

Project Structure

```
tech-cheat-sheet/
├── frontend/
│   ├── .next/
│   ├── app/
│   ├── components/
│   ├── out/
│   ├── public/
│   ├── styles/
│   ├── tailwind.config.js
│   ├── tsconfig.json
│   ├── next.config.mjs

…

View on GitHub

My Journey

I set out to create a comprehensive technical documentation platform that would serve as a quick reference for developers. The project evolved into a modern static website built with Next.js and deployed on AWS using Pulumi for infrastructure management.

Development Process

Frontend Architecture
I started with Next.js 13+ using the App Router, focusing on creating a clean, organized structure
Static Export Configuration
One of the first challenges was configuring Next.js for static export. I solved this by updating the Next.js configuration

Infrastructure Challenges

S3 Bucket Configuration
Setting up the S3 bucket for static hosting required careful configuration of ownership controls and public access
CloudFront Distribution
Implementing CloudFront for content delivery was complex, requiring proper origin configuration and cache behavior settings
Deployment Automation
I created a streamlined deployment process by configuring Pulumi to handle both infrastructure and content deployment

Using Pulumi

Infrastructure Setup

I used Pulumi to create and manage the entire AWS infrastructure for hosting our static documentation website. The core infrastructure components were defined using TypeScript, providing type safety and better IDE support.

Key Components

S3 Website Bucket Configuration

const bucketWebsite = new aws.s3.BucketWebsiteConfigurationV2("bucketWebsite", { bucket: bucket.bucket, indexDocument: {suffix: indexDocument}, errorDocument: {key: errorDocument}, });

Access Controls and Security

const ownershipControls = new aws.s3.BucketOwnershipControls("ownership-controls", { bucket: bucket.bucket, rule: { objectOwnership: "ObjectWriter", }, });

Content Synchronization

const bucketFolder = new synced_folder.S3BucketFolder("bucket-folder", { path: path, bucketName: bucket.bucket, acl: "public-read", }, { dependsOn: [ownershipControls, publicAccessBlock]});

Benefits of Using Pulumi

Type Safety and IDE Support

Using TypeScript provided compile-time checking
Excellent IDE integration with autocomplete
Caught potential errors before deployment

Resource Dependencies

Automatic handling of resource dependencies
Clear visualization of infrastructure relationships
Prevented race conditions during deployment

Configuration Management

config: aws:region: us-east-1 tech-cheat-sheet:errorDocument: error.html tech-cheat-sheet:indexDocument: index.html tech-cheat-sheet:path: ./frontend/out