Skip to content

Deploy a static website

Installing NodeJS

Section titled “Installing NodeJS”
  1. Login to the instance running on EC2
  2. Run the following commands to install node latest version
Terminal window
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
. ~/.nvm/nvm.sh
nvm install --lts
node -v

Creating your website

Section titled “Creating your website”
  1. You can start with creating your website either from scratch using any web framework like Angular, React.
  2. For this example you will be using react-static-app which is a popular framework for React. Clone the git repo you created in your shell.
Terminal window
git clone $COPIED_URL
  1. To run this project in local,
Terminal window
npm install
npm run start
  1. This will provide a localhost url with port number which you can see preview and modify code for live reloads.
  2. Once the changes are done and tested in local. We need to build this project so that it runs on browser. build will create JS files and minify the run time size of the code. This process will create the code which is required for your runtime in a build folder.
Terminal window
npm run build

Create a S3 Bucket

Section titled “Create a S3 Bucket”
  1. Navigate to the S3 service in the AWS Management Console.
  2. Click on the “Create bucket” button.
  3. Provide a unique name for your bucket. Choose the region where you want to store your website data. UNIQUEPREFIX-static-site
  4. Click on “Create bucket” to finalize the bucket creation.
  5. Select your newly created bucket from the list.
  6. Click on the “Properties” tab.
  7. Under “Static website hosting” towards the end, choose Enabled under “Use this bucket to host a website”. On the “Index Document” type index.html and for “Error Document” type 404.html
  8. Click on “Save changes” to enable website hosting for your bucket.
  9. Click on the “Permissions” tab and enable public access by clicking “Edit” under “Block Public Access” and unchecking “Block all public access” and on pop-up confirm.
  10. Click on “Bucket Policy” and choose “Edit policy.”
  11. Paste the following policy into the editor:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::UNIQUEPREFIX-static-site/*"
            ]
        }
    ]
}
  1. Click on “Save changes” to apply the policy.

Upload Website Files

Section titled “Upload Website Files”
  1. Open the S3 console and select your bucket.
  2. In the “Actions” menu, select “Upload files”
  3. Drag and drop your website files or select them from your local computer. You need to copy all the files under build

s3-upload

  1. Click on “Upload” to transfer the files to your S3 bucket.
  2. If you are using EC2 instance, then give the following command to copy all files from out directory to S3 bucket
Terminal window
aws s3 sync ./build/ s3://UNIQUEPREFIX-static-site --delete

Access Website

Section titled “Access Website”

You can access your website using your bucket’s static website hosting URL, which can be found in the “Static website hosting” section under your bucket’s properties. http://UNIQUEPREFIX-static-site.s3-website.ap-south-1.amazonaws.com

Voila! You just published a website for the whole world to see :)
Tutorial Videos Follow Us