Ah, there’s nothing as satisfying as finishing all your code for a website you’re making. But then comes the hard part — deploying it. Don’t worry, we got you covered with this guide.
We will go through deploying without a custom domain, with a HTTP custom domain, and a secured HTTPS domain custom.
What Will I Need For This?
Files containing code for your Website
An account on Amazon Web Services (services used in this article are free up to a year on a new account)
A custom domain, I am using Google Domains for this article
Deploying on Amazon Web Services (AWS)
Login in or create an account on AWS
Click on or search S3 and click on Buckets. Click on Create Bucket
In the Create Bucket form, name the Bucket your website’s URL
In the same form, turn off Block all public access and then Create the Bucket
Go back and click on your newly created Bucket and then click on Properties
Scroll down to Static website hosting and Edit to enable it
Click on Enable and write the name of your index or main file in Index document (mine was index.html)
If you have a file for errors, specify it in Error document. If not hit save changes.
Add your website’s files in your Bucket folder by clicking on Upload
Click on Add files to add your code
Scroll down to Upload
In your Bucket go to the Permissions and scroll down to Bucket policy and click on Edit
In here we will be pasting the following code. Click here if you want to read more about it
Make sure to replace example.com with your website.
Check to make sure the Access is Public on your S3 Buckets dashboard
Click on your button and go to Properties and scroll down to Static website hosting and click on the Bucket website endpoint link
Open the URL to make sure your website is working and displaying!
If all you wanted was to share your website then you’re done!
But if you have a custom domain, stay tuned and keep your website URL handy.
We will need it a few more times later on.
HTTP Custom Domain
Go to wherever you purchased your domain from. I’m using Google Domains.
Go to DNS settings and scroll down to Custom resource records
In the Name column type in www
Choose CNAME in Type
60 in TTL
Copy the URL we got from AWS in Dta
Important Note: make sure to remove the http:/ when pasting the URL from AWS.
To make your site be accessible without writing www, scroll up to Synthetic records and write
@ in Subdomain
www in Destination URL
Click on Permanent redirect (301)
Your site should now be live! You may need to refresh or wait a few minutes but test out to make sure it’s working.
If you’ve noticed, this is a http:// site meaning it is not secure. If you want to have an HTTPS site and see the lock on the URL there will be a few extra steps.
Adding HTTPS and Securing Your Site
To do this we need to get a certificate from AWS.
First we set up email forwarding on Google Domain so we can verify we own the site
On Google Domains, click on Email. Scroll down to Email forwarding and Add email alias
Putting a * in the Alias email will make it so any emails from your website (info@yoururl.com, admin@yoururl.com, water@yoururl.com etc) will get forwarded.
Go on AWS and search for Certificate Manager
If this is your first time using this, you will need to get a Provision certificate
Click on Request a certificate
Request a public certificate & click on Request a certificate
Write your domain name with and without www and with a *. and click Next
We will be using Email validation
Skip the tags and click Review
Review and confirm request and continue
It will currently say the Status is Pending Validation
Check your email that you set for forwarding and approve the request for your your www and non www website
Click on I Approve for both
Go back to AWS to make sure Validation status shows up as Success
Now that we have obtained our certificate, we are going to use another AWS service, Cloudfront, to tell our site to use the certificate and HTTPS
Search CloudFront on AWS
Click on Create Distribution and Get Started
In Origin Domain Name paste your AWS link
Very Important: Make sure you don’t use the ones from the dropdown menu! Paste the link we got way before, mine was (http://www.heyastha.com.s3-website-us-east-1.amazonaws.com/)
Scroll down to Viewer Protocol Policy and click on Redirect HTTP to HTTPS
In Distribution Settings write your domain names with and without www where it says Alternate Domain Names
Click on Custom SSL Certificate and select from the dropdown your domain certificate that we created in Certificate Manager
Create Distribution & it should say that your website Status is In Progress
Copy your Domain Name
Go back to Google Domains DNS and scroll to Custom resource records
Click Edit and change the Data to what you just copied
Save & visit your website!
It may take a few minutes to show up but if you followed these steps correctly, you will be seeing a secured lock on the browser.
Closing Remarks
If you have any questions or run into any errors, feel free to reach out to us at info@lovespreadsheets.com!