Static Website Deployment on AWS Amplify via GitHub (Entry-Level Guide)

#aws #awsamplify #github

There are many ways to deploy a website using different technology, but doing it with AWS services takes your skills and game to the next level. One a beginner developer can gauge their learnings on is using AWS Amplify and GitHub for deploying a Static Website.

Unlocking something that helps in your entry-level projects—whether it’s a small website or a useful tool—is not just beginner’s luck; it’s progress.

For starters, it's important to first understand the tools needed to successfully follow the steps and instructions.

Prerequesites

An AWS Account and Basic Understanding of AWS IAM
GitHub Account
Basic Understanding of Web Technologies

Steps

Create a new React App (or directly deploy through GitHub Page)

On your local host:

a. run using npm run dev (for actual React App)

b. run using npx serve (for static website, e.g. personal portfolio using the template) or simply use local hosting instead of React App

Initialize GitHub Repository
Deploy with AWS Amplify
Clean up resources
(For reference: https://docs.aws.amazon.com/hands-on/latest/host-static-website/host-static-website.html)

Start

Create a React App

On a new bash terminal, input the following to create a React App framework:

npm create vite@latest staticwebsite -- --template react
cd static website
npm install
npm run dev

But since we will only be deploying a static website (personal portfolio), instead of npm run dev, run:

npx serve

or simply use Open Live Server.

View App For react app:

➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

For static website alone:
Serving!

│ - Local: http://localhost:3000 │

Note: Make sure all the files are under the root directory and not inside the App if using purely Static Website.

If using [REACT APP Framework]

1. Sign in to GitHub and Create a GitHub Repository:
If you have no account yet, please sign-up first: https://github.com/

*2. Search Through your AWS Console and Create IAM Account *

You can always use your root account for deployment, but it could pose possible major security risk. It's a common practice to many AWS Services Users.

3. Search AWS Amplify to your console
a. Start with Deploy an App
b. Select GitHub and Click Next.

c. Select Repository Branch
i. Authenticate first with GitHub.

ii. Update GitHub Permission, and Select Repository and Branch

d. Review Build Settings

If not using [REACT APP Framework]

just follow the same steps but run npx serve first for the static website or simply use Open Live Server

d.a Review Build Settings
Since, we are building a purely Static Website, make sure that the main html file, and assets and components folders are in the root directory. Check the YML File if it is stating a command: "npm run dev" (no command should state running an app). Leave Frontend Build Command blank and the Build Output Directory with only a dot (.).

e. Deploy the App (or the Static Website)
To deploy your web app or static website to a global content delivery network (CDN), review first the inputs selected, and choose Save and deploy.

f. View the Deployed App

Note: Incorrect Build Settings will result to the failure of your deployed URL. You may visit this Documentation for more in-depth guide on AWS Hosting especially with using different frameworks: https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html

And that's it! You just deployed your own website. But before we celebrate. it's also important to know how to clean up our resources (especially if you are using databases for your application).

*4. Clean up your Resources *
Scan to your left nav bar, and look for App Settings. In the General Settings, you can select delete app and confirm by typing "delete".

AND VOILA! You just figured out how to elevate your game as a developer.