Hosting a Static Website on Amazon S3

Amazon Simple Storage Service, or simply Amazon S3, is a scalable, web-based cloud storage service offered as part of Amazon Web Services.

It is used for backing up data and applications online. Besides, it also provides a provision to host or deploy a static website. In this guide, we will look at the steps required to host a static website on Amazon S3.

Prerequisites

• Contentstack account
• Amazon Web Services account with S3 services enabled
• A Gatsby website up and running on localhost

Deploying a website on S3 is a 4-step procedure:

1. Create an IAM account
2. Install and configure the AWS Command Line Interface (CLI)
3. Create a bucket in S3
4. Deploy the website on S3

Note: Before we start, it is assumed that you already have a website running on the localhost with Gatsby as the front-end and Contentstack as the back-end. We suggest you follow the steps mentioned in the Build a Sample Website Using Gatsby and Contentstack and get your website ready.

1. Create an IAM account

   If you followed the above tutorial, you should have your website running on localhost, port 8000. Now that it is ready, let's deploy it on S3. For that, you need to create an account in AWS with S3 services enabled.

   1. Go to the Amazon S3 page and click on Get Started with Amazon S3.
   2. On the next screen, you will be asked to log in. If you already have an account, just log in with your credentials. Else, click on Create a new AWS account.
      

      Note: You need to create an IAM account with administrative permissions so that you are able to create an access ID and secret key within your AWS console.

   3. Then, follow the on-screen instructions and get your account created. AWS will notify you by email when your account gets activated and available for use.
   4. Once your account is set up, log in and click on the arrow next to your username at the top and select My Security Credentials as shown below:
      
      
      
      
   5. Then, click on Access keys (access key ID and secret access key).
   6. Click on Create New Access Key and then Show Access Key to view your keys. Ensure that you save the keys. You will need these keys later on while configuring the AWS CLI. You can also download the keys by clicking on the Download Key File button.

   With these steps, we have set up the account and are ready with the essentials. Let's now move ahead and install the Amazon CLI and configure it.

2. Install and Configure the AWS Command Line Interface

   Follow the steps given below to install AWS CLI on Ubuntu and Windows:

   1. On Ubuntu run the following command:

      sudo apt install awscli

   2. On Windows, use the AWS CLI MSI installer link and install it. Once it is installed, open the command prompt and run the following command to check if it is installed correctly:

      aws --version

      After running the above command, it will display the installed version of the AWS CLI on your system. If you have python installed on your machine, you can also install it using the following command:

      pip3 install awscli 

      Note: Before running the above command, ensure you have Python 3 and pip3 installed on your machine. For more information on Windows installation, refer to AWS docs.

   3. After installing the AWS CLI on respective systems, you need to configure it. So, open the command prompt and run the following command:

      aws configure

   4. After executing the above command, it will prompt you to enter your AWS access ID secret key as shown below:
      
      
   5. It also prompts you to enter the default region and output format. You can leave them blank for now and hit the enter key.

   With these steps, we have configured the AWS CLI.

3. Create a Bucket in S3

   A bucket in S3 is basically cloud storage that will host your website data. Proceed with the steps given below to create a bucket:

   1. Log in to AWS Management Console, click on the Services drop-down, and select S3. You will see your S3 Management Console as shown below:
      
      
      
      
   2. Click on Create bucket to add your objects in it. Provide a suitable name to your bucket, uncheck the Block all public access option, and click on Create bucket as shown below:
      
      
      
      

   Now that you have created a bucket, let's move ahead and host your Gatsby site on S3.

4. Deploy the Website on S3

   Before deploying the website make sure you have the website running in a browser on localhost:8000. So the AWS access to it is sorted out.

   You must have also downloaded the code from the sample app page. Now follow the steps given below:

   1. Open your terminal and move inside the project root directory that you have downloaded from the above link.
   2. Then staying inside the project root directory, install the Gatsby S3 Plugin by using the following command:

      npm i gatsby-plugin-s3

   3. Once it is installed, open the gatsby-config.js file and add the following snippet in your plugins array:

      {
          resolve: `gatsby-plugin-s3`,
          options: {
            bucketName: "mention your s3 bucket name here",
          },
        },

      An example is shown below. You may refer to the Gatsby S3 Plugin guide for more detail.
      
      
      
   4. Finally, add the deployment script (deploy:gatsby-plugin-s3 deploy) within the script section inside the package.json file as shown below:
      
      
      
   5. Staying inside the root directory, run npm run build && npm run deploy to build the site, and to have it immediately deployed to S3. Once deployed, you will get a link like http://gatsby-site-deploy-v1.s3-website.us-east-2.amazonaws.com/ in our case.

Additional resource: For more information on deploying Gatsby sites on S3, refer to Gatsby docs.