AWS Logo
Menu
Deploy your static frontend faster than brewing coffee using CloudFront Hosting Toolkit

Deploy your static frontend faster than brewing coffee using CloudFront Hosting Toolkit

Learn how to quickly deploy a static website on AWS with CloudFront Hosting Toolkit and a custom domain, using a straightforward process.

front-endcloudfronthostingawsstatic
Corneliu CROITORU
Published Aug 26, 2024

Speed meets control

As an amateur street photographer, I wanted a simple and cheap way to share my photos online, so I created ManBehindLens.com - my personal portfolio - in 2021 and used AWS Amplify (check out the How is made page) for its dynamic features, but I kept searching for a more cost-effective solution for static websites.
In this article, we’ll dive into how the CloudFront Hosting Toolkit combines speed and control for deploying static websites.
If you want to host your static site on AWS with a custom domain quickly, the CloudFront Hosting Toolkit, available as a CLI, streamlines the process and deploys all required services transparently, so there's no need to deal with complex service configurations.
This CLI is perfect for developers who want:
  1. Fast deployment of static websites on AWS
  2. Global content delivery through Amazon CloudFront
  3. Full access to underlying AWS resources for customization
  4. Cost-effectiveness
Let's dive into the step-by-step process of using CloudFront Hosting Toolkit to deploy your frontend website with a custom domain on AWS. Whether you're showcasing a photography portfolio or any other static content, this guide will help you get your site up and running in no time.

Prerequisites

Before we begin, ensure you have the following:
  1. AWS Account: You need an active AWS account with appropriate permissions to create and manage services like S3, CloudFront, Route 53, and AWS Certificate Manager.
  2. Custom Domain Name: For this tutorial, we assume you already have a custom domain name registered and managed in Amazon Route 53. If you don't have a domain in Route 53, you can either transfer an existing domain to Route 53 or register a new one through AWS.
  3. GitHub Account: You need a GitHub account and basic knowledge of Git, as we'll be using GitHub for version control and automated deployments.
  4. Node.js and npm: The CloudFront Hosting Toolkit is installed via npm, so make sure you have Node.js (version 18 or later) and npm installed on your local machine.
  5. AWS CLI: The AWS Command Line Interface should be installed and configured with your AWS credentials.
  6. Basic HTML/CSS knowledge: While we provide a sample HTML file, basic understanding of web technologies is helpful.

Let's start

This tutorial demonstrates a scenario where you're deploying a simple static website for a fictional company called MyCompany. We'll use a basic HTML/CSS frontend, but the process is similar for more complex static sites built with frameworks like React, Vue, or Angular.

Step 1: Install CloudFront Hosting Toolkit

This global installation makes the toolkit available as a command-line tool, essential for managing your hosted frontend.

Step 2: Prepare your frontend website files

You can use an LLM to help create a first draft of your website. This approach is useful for prototyping, allowing you to quickly develop a starting base.

Let's create our sample static website using an LLM

  1. Use your preferred AI tool or model (such as Claude or others you have access to).
  2. Use a prompt like the following to generate a basic HTML structure for a simple business website:
I asked on my side and here is the generated content that I will use for next steps:
This is how it looks - not very slick but it will do the job.
My Company screenshot
My company website
4. Save this content into a file named index.html in your project directory.

Step 3: Push your file to GitHub

Now, let's push your file to a GitHub repository, which CloudFront Hosting Toolkit will use for automatic deployment.
1. Create a new repository on GitHub (e.g., tech-solutions-aws-frontend).
2. Initialize a git repository in your local project folder, add your files, and push to GitHub:

Step 4: Initialize your hosting project

Navigate to your project directory and run:
This command launches a guided wizard that will walk you through configuring your hosting.
You will see the following:
Follow the instructions:
  1. GitHub Repository Information:
Confirm your GitHub repository URL and branch name.
  1. Framework:
Our sample code doesn't require any build process, so we'll select basic. If you're using a framework like React, Vue, or Angular, the toolkit will automatically detect it.
  1. Custom domain configuration:
Answer "yes" to set up a custom domain with AWS Route 53.
  1. Domain name details:
Enter your custom domain and select where it is registered. If your domain is registered with a provider other than AWS, you will receive instructions on how to update your DNS settings with your registrar.
  1. Hosted Zone ID (if using Route 53):
Enter the Hosted Zone ID from your Route 53 configuration.
After providing this information, you'll see a summary of your configuration:
You can push these 3 files to your GitHub repository along with your static files to ensure versioning and easy management.

Step 5: Deploy your frontend

To deploy your frontend run:
This will start the deployment process, and you'll see a series of steps with progress bars indicating their status:
At this stage, the process will pause to allow you to set up an OAuth connection between your AWS account and your GitHub account. This configuration ensures that no credentials are stored locally.
You will need to:
  • Create the connection: The toolkit will establish a secure AWS CodeStar connection to your GitHub repository.
  • Authorize the connection: Follow the prompts in the AWS console to complete the setup.
  • Grant permissions: Install the AWS Connector for GitHub app and grant it access to your repository.
  • Select your repository: Choose the GitHub repository that contains your website files.
Once you have configured the connection, type OK to resume the deployment process.
The progress bar will keep updating until the deployment is complete. This process may take a few minutes.
If the deployment is successful, you'll see a summary of the resources created:
The pipeline is now triggered and in progress. You will need to wait until it completes.
Once finished, your website will be live and accessible at your custom domain www.mycompany.com
Your static frontend website is now deployed on AWS, uses a custom domain, and is globally available through Amazon CloudFront.

Making changes to your frontend

CloudFront Hosting Toolkit enables automatic deployment when you push updates to your GitHub repository.
Let's make a change:
1. Edit your `index.html` file:
2. Commit and push the change:
3. Check the deployment status:
You'll see the pipeline status:
4. Once completed:
5. Refresh your browser to see the updated website.

Conclusion

The CloudFront Hosting Toolkit simplifies deploying static frontend websites on AWS with custom domains. It leverages AWS services like CloudFront and Route 53 to provide easy deployment of static frontends on AWS and custom domain integration

Explore more

Ready to dive deeper? Check out the resources below to get the most out of the CloudFront Hosting Toolkit:

Comments