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
3. In the Create bucket form, name the Bucket your website’s URL
4. In the same form, turn off Block all Public access and then Create the Bucket
5. Go back and click on your newly created Bucket and then click on Properties
6. Scroll down to Static website hosting and Edit to enable it
7. 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.
8. 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
9. In your Bucket go to the Permissions and scroll down to Bucket policy and click on Edit
10. In here we will be pasting the following code. Click here if you want to read more about it
“Action”: [ “s3:GetObject” ],
“Resource”: [ “arn:aws:s3:::example.com/*"]
Make sure to replace example.com with your website.
11. Check to make sure the Access is Public on your S3 Buckets dashboard
12. 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 Data
Important Note: make sure to remove the http:/ when pasting the URL from AWS.
3. 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)
4. 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 (email@example.com, firstname.lastname@example.org, email@example.com etc) will get forwarded.
3. Go on AWS and search for Certificate Manager
If this is your first time using this, you will need to get a Provision certificate
4. Click on Request a certificate
5. Request a public certificate & click on Request a certificate
6. Write your domain name with and without www and with a *. and click Next
7. We will be using Email validation
8. Skip the tags and click Review
9. Review and confirm request and continue
10. It will currently say the Status is Pending Validation
11. Check your email that you set for forwarding and approve the request for your your www and non www website
12. Click on I Approve for both
13. 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
2. Click on Create Distribution and Get Started
3. 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/)
4. Scroll down to Viewer Protocol Policy and click on Redirect HTTP to HTTPS
5. In Distribution Settings write your domain names with and without www where it says Alternate Domain Names
6. Click on Custom SSL Certificate and select from the dropdown your domain certificate that we created in Certificate Manager
7. Create Distribution & it should say that your website Status is In Progress
8. Copy your Domain Name
9. Go back to Google Domains DNS and scroll to Custom resource records
10. Click Edit and change the Data to what you just copied
11. 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.
If you have any questions or run into any errors, feel free to reach out to us at firstname.lastname@example.org or leave a comment below.
Good luck with your websites!