Deploy Hugo Site to AWS S3

Overview

In this tutorial, you’ll learn how to deploy a Hugo static site to Amazon S3 and set up CloudFront for global content delivery. This approach provides a cost-effective and scalable solution for hosting static websites.

Prerequisites

Before starting, ensure you have:

• A Hugo site ready for deployment
• AWS CLI installed and configured
• Basic understanding of AWS S3 and CloudFront

Steps

Step 1: Build Your Hugo Site

First, build your Hugo site for production:

hugo --minify

This creates a public/ directory with your static files.

Step 2: Create an S3 Bucket

Create a new S3 bucket for your website:

aws s3 mb s3://your-site-name.com

Step 3: Configure Bucket for Static Website Hosting

Enable static website hosting on your bucket:

aws s3 website s3://your-site-name.com --index-document index.html --error-document 404.html

Step 4: Upload Your Site

Sync your Hugo public directory to S3:

aws s3 sync public/ s3://your-site-name.com --delete

Step 5: Set Up CloudFront Distribution

Create a CloudFront distribution to serve your content globally with better performance and HTTPS support.

1. Go to the CloudFront console
2. Create a new distribution
3. Set your S3 bucket as the origin
4. Configure caching behaviors
5. Set up SSL certificate

Step 6: Configure DNS (Optional)

If you have a custom domain, configure your DNS to point to the CloudFront distribution.

Conclusion

You now have a Hugo site deployed to AWS S3 with CloudFront distribution. This setup provides:

• Global content delivery
• HTTPS support
• Cost-effective hosting
• High availability

For automated deployments, consider setting up GitHub Actions or AWS CodePipeline to deploy changes automatically when you push to your repository.