Fast Static Website Deployment - Tech Cheat Sheet

[MyrinNew]

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

1. Create a new Pulumi project:
   
   
   
   mkdir tech-cheat-sheet && cd tech-cheat-sheet
   pulumi new static-website-aws-typescript
2. Create a new folder for the frontend:
   
   
   
   mkdir frontend && cd frontend
3. Create a new Next.js project with default settings:
   
   
   
   npx create-next-app@latest .
4. Update the Pulumi Stack Settings:
   
   Update config in Pulumi.dev.yaml from ./www to ./frontend/out:
   
   
   
   tech-cheat-sheetath: ./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

1. Frontend Architecture
   
   I started with Next.js 13+ using the App Router, focusing on creating a clean, organized structure
2. 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

1. S3 Bucket Configuration
   
   Setting up the S3 bucket for static hosting required careful configuration of ownership controls and public access
2. CloudFront Distribution
   
   Implementing CloudFront for content delivery was complex, requiring proper origin configuration and cache behavior settings
3. 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

1. S3 Website Bucket Configuration

const bucketWebsite = new aws.s3.BucketWebsiteConfigurationV2("bucketWebsite ", {

bucket: bucket.bucket,

indexDocument: {suffix: indexDocument},

errorDocument: {key: errorDocument},

});

1. Access Controls and Security

const ownershipControls = new aws.s3.BucketOwnershipControls("ownership-controls", {

bucket: bucket.bucket,

rule: {

objectOwnership: "ObjectWriter",

},

});

1. 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

1. Type Safety and IDE Support

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

1. Resource Dependencies

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

1. Configuration Management

config:

aws:region: us-east-1

tech-cheat-sheet:errorDocument: error.html

tech-cheat-sheet:indexDocument: index.html

tech-cheat-sheetath: ./frontend/out




More...