This piece focuses on hosting a static website with AWS using AWS Amplify and/or Amazon S3.
In today’s world, websites serve many purposes. They can be used for businesses, landing pages, event pages, portfolios, personal websites, blogs and many more.
The simplest form of website is to host a static website. It uses static content like HTML, images, videos, CSS, JS files to deliver a website. It does not require any server-side code. Some uses of static websites include landing pages, microsites, and personal websites.
There are two ways to launch a static website on AWS. The first method uses AWS Amplify, and the second method uses Amazon S3. Both methods are incredibly easy and cost-effective to use, and you will learn how to deploy using both services in the next part.
AWS Amplify uses a repository which you will need to create and initialize first on your machine. This will be done using npx. Open up a Command Prompt on Windows or a Terminal Window on Linux and key in the commands below:
npm create vite@latest tutorialapp -- --template react
cd tutorialapp
npm install
npm run dev
These commands allow you to easily create a React application that is used for AWS Amplify. It will take a while, so be patient. Now, you will need to save this code to a GitHub repository. You can do this using Git Bash or Github Desktop. You can use the tutorial here to complete this step before continuing this tutorial. If you prefer using Bitbucket, GitLab or some other similar service, make sure to edit the instructions accordingly as you continue in this tutorial.
After creating your Git Repository and committing your React application into GitHub, browse to the AWS Amplify console. Click on “Deploy an App”.
Next, you will connect your GitHub repository, select it in the menu (Or whichever you chose) and click “Continue”. It will ask you for your GitHub credentials for authentication and authorization purposes.
After authenticating, choose the repository which you just created. In the example below I chose the “AWS-Static-Website-Tutorial” repository and the “main” branch. Click “Next”.
