Creating and Hosting a Hugo Web App on AWS Amplify with a Namecheap registered Domain

Setup

In this tutorial, we’ll guide you through the process of creating a new Hugo web app, hosting it on AWS Amplify, and connecting it to a custom domain already registered.

Execute

Prerequisites

• An AWS account.
• A domain name registered.

Step 1: Creating a New Hugo Site

1. Install Hugo:

   brew install hugo  # For macOS
   # or
   sudo apt-get install hugo  # For Ubuntu
   

2. Create a new Hugo site:

   hugo new site my-hugo-site
   

3. Navigate to your new site’s directory:

   cd my-hugo-site
   

4. Add a theme or design your site as desired. For this tutorial, we’ll use a basic theme. More themes can be found at Hugo Themes.

Step 2: Creating a New Web App in AWS Amplify and Linking to a Git provider

Before deploying your Hugo site, you need to create a new web app in AWS Amplify and connect it to your Git repository.

1. Access AWS Amplify Console:

   • Navigate to the AWS Management Console.
   • Open the Amplify service.

2. Host a new web app:

   • Click the New app button.
   • Click the Host web app.

3. Connect to Git:

   • In the source repository service list, choose your Git provider.
   • You’ll be prompted to authenticate and grant AWS Amplify permissions to access your Git provider account. Click Authorize.

4. Choose a Repository and Branch:

   • Once authenticated, you’ll see a list of your Git repositories. Choose the repository where your Hugo site is stored.
   • Select the branch you want to deploy (typically main).

5. Configure Build Settings:

   • Amplify will try to auto-detect the build settings. However, ensure they match the Hugo build settings then click Next.

   version: 1
   frontend:
   phases:
       # IMPORTANT - Please verify your build commands
       build:
       commands:
           - hugo
   artifacts:
       # IMPORTANT - Please verify your build output directory
       baseDirectory: public
       files:
       - '**/*'
   cache:
       paths: []
   

6. Review and Save:

   • Review your settings to ensure everything is correct.
   • Click Save and deploy. This will start the initial deployment, but we’ll configure the custom domain in the subsequent steps.

Now that your Hugo site is connected to AWS Amplify via your Git repository, you can proceed with the deployment and domain configuration.

Step 3: Configuring Namecheap for AWS Amplify

1. In the AWS Amplify Console, under App settings, click Domain management.

2. Click Add domain, then enter your Namecheap domain.

3. Click Save

4. AWS will provide a set of DNS records to configure. These will include two CNAME’s and anANAME (Alias). Click Actions then View DNS records for your specific details.

5. Log in to your Namecheap account.

6. Navigate to Domain List and click on Manage next to your domain.

7. Go to the Advanced DNS tab.

8. Add the DNS records provided by AWS Amplify.

9. Save your changes.

Step 4: SSL Configuration

AWS Amplify provides free SSL certificates for custom domains. After adding your custom domain:

1. In the AWS Amplify Console, under Domain management, you’ll see “Pending verification” next to your domain.
2. Once AWS verifies the domain (which can take some time), it will automatically provision an SSL certificate.
3. After the SSL certificate is provisioned and associated with your domain, the status will change to “Available”.

Step 5: Finalizing Deployment

1. After setting up the DNS and SSL, it might take some time for the changes to propagate across the internet.
2. Once propagated, accessing your Namecheap domain in a browser should display your Hugo site hosted on AWS Amplify.

Finish

You’ve now successfully created a new Hugo web app, hosted it on AWS Amplify, and connected it to a custom domain from Namecheap. This setup provides a robust, scalable, and efficient solution for your web hosting needs. Dive in, customize your site, and enjoy your new online presence!