Empower Your Online Presence: Hosting Multiple Websites with AWS

If you’re a developer seeking to launch your website or application on a domain, or a SaaS entrepreneur aiming to host marketing and application websites across distinct subdomains, then this blog is for you.

In today’s SaaS landscape, many apps host their landing pages on their primary domain (e.g., splitzup.net) while deploying their apps on designated subdomains (e.g., app.splitzup.com), bolstering their SEO and marketing efforts.

Throughout this blog, we’ll delve into two pivotal aspects:
1. Hosting a static website or application on a domain.
2. Hosting both a landing page and an app, adeptly utilizing domains and subdomains.

We will achieve these using AWS cloud service. The concepts here will help you to do the same with any other cloud service providers.

Technical Concepts and AWS services

Before diving into the practical steps, let’s equip ourselves with essential knowledge to navigate the intricacies of web hosting. Understanding these fundamental concepts will pave the way for a smoother journey.

Concepts and corresponding AWS services

Concepts

Frontend Development Tools and Languages: Familiarize yourself with HTML, CSS, and JavaScript — the building blocks of web development. These languages govern the structure, style, and interactivity of your website or application’s frontend.

DNS (Domain Name System): Think of DNS as the internet’s phonebook. Just as we need phone numbers to connect with individuals, web browsers require IP addresses to locate servers hosting domains. DNS translates user-friendly domain names into IP addresses, facilitating seamless communication across the web.

Site Certificate: Your domain can be hosted with http or https, where https stands for secure access to your website/app. It’s highly recommended to host with https to gain the trust of your users. In order to prove your users are communicating with your domain securely, you need to obtain a SSL/TLS certificate for your site.

AWS Services

Amazon Web Services (AWS) offers a plethora of cloud-based solutions tailored to diverse needs.

S3: It’s a robust storage service for hosting object data — ideal for storing website files such as HTML, CSS, and JavaScript.

CloudFront: As a content delivery network (CDN), CloudFront optimizes the delivery of your website bundle to users worldwide. By positioning servers closer to end-users, CloudFront accelerates content delivery, ensuring lightning-fast access to your website or application.

Route 53: It’s a DNS web service provided by AWS. You can register and host your domain on Route 53.

AWS Certificate Manager (ACM): It simplifies the process of obtaining and managing SSL/TLS certificates for your websites and applications hosted on AWS.

Setup the infrastructure

Infrastructure setup

1. Purchase Your Domain: Begin by acquiring a domain name, which you can do through various providers like Squarespace, GoDaddy, or directly from AWS. Compare prices across these platforms and make your purchase. For the steps here, we have bought a splitzup.net domain.
2. Set Up AWS Account and Route 53: If you haven’t already, create an AWS account. Log in to the AWS account and navigate to the Route 53 service. Here, create a hosted zone with the name splitzup.net. Follow the steps provided here for guidance.
3. Create a site certificate in ACM: Navigate to ACM service, create a site certificate. Important Step: Domain name should be *.splitzup.net , and select DNS as the validation option.
4. Upload assets to s3: Using S3, upload your HTML, CSS, and JavaScript bundle. Assuming you’ve already created the bundle locally, simply create an S3 bucket and upload the bundle to it. This will result in an index.html file at the root of the bucket. Follow the steps outlined here to set up and upload the bundle to S3. You’ll have to create two S3 buckets, one for hosting splitzup.net assets, while other for hosting app.splitzup.net assets.
5. Create CloudFront Distribution: Create a CloudFront distribution and point it to your S3 bucket. The bucket will serve as the origin for your content, while CloudFront will efficiently deliver this content to users. Important step. For splitzup.net asset distribution, select splitzup.net as Alternate domain name, and choose certificate created in step 3. For app.splitzup.net asset distribution. select app.splitzup.net as Alternative domain name. You can use a single certificate (of *.splitzup.net for both distributions.
6. Create A record in hosted zone: Finally, create two A records in hosted zone. One A record with name splitzup.net , and other A record with name app.spliztup.net , both routes traffic to its corresponding CloudFront distributions.

Parting notes

Congratulations! You’ve embarked on a journey to take control of your online presence by mastering the art of hosting multiple websites on AWS. By following the steps outlined in this guide, you’ve learned how to navigate through domain registration, set up DNS with Route 53, secure your websites with SSL certificates from ACM, host static content on S3, and accelerate content delivery using CloudFront.

If you found this guide helpful and want to stay updated on more tips and insights into web development, don’t forget to follow me on Twitter and LinkedIn.

Clap, follow, and let’s connect!