Highly available static website in less than 2 hours
Note: You will need an active subscription to Azure DevOps and AWS to complete the steps in the article.
Static sites are great for showcasing a new project, pitching a Hackathon idea, or hosting a personal project. Even though several cloud providers will give you a virtual space to bootstrap a new site, it often comes with high fees as they tend to give you a lot more than you asked for. This article goes over a quick way to bootstrap a highly available static website and in less than 2 hours and about $20 per year.
Here is a rough breakdown of the services used.
1- AWS — S3 bucker for cheapest possible cloud storage
2- Azure DevOps — for hosting source code and pushing changes Automatically to AWS S3 bucket
3- SSL for free certificate
4- Route 53 — Domain registration
5- AWS CloudFront — CDN
Register the domain
The first order of business, get a domain name on AWS Route-53. Head over to “Registered Domains” in the AWS console and add in your new domain name. You can also transfer a domain you already own to AWS [more information].
Once you secure a domain name, create hosted zone inside Route-53 using your domain name.
Get a free SSL Certificate
Once the hosted zone is created on Route-53, go to SSL for Free to download a free 3 month SSL certificate for your newly created website. I have found that using CNAME is the fastest way to get the domain verified.
After downloading the certificate files go to the AWS Certificate Manager to import your newly minted certificate.
Set up your S3 buckets
Head over AWS S3 and create buckets to hold your static website contents. You will need two S3 buckets, and they need to be named as follows.
www.[add your domain here] e.g. www.example.com
[yourdomain name] e.g. example.com
After you set up your bucket go to the permissions tab and give Everyone read access. All the bucket contents must be read accessible for the S3 bucket to be used as a website.
Under properties go to “Static website hosting” and add in your index and error document URL.
Once you set up the two S3 buckets you can have one redirect to the other so that you only push your static files into one S3 bucket. You can do that from the static website hosting options for your S3 bucket.
Note: It is recommended to add the region name in the S3 URL per AWS documentation.
Inside the buckets, you can now upload static HTML, JS & CSS files using the AWS webpage so that they can be hosted in your S3 bucket.
Set up a CDN distribution with CloudFront
CloudFront binds your SSL certificate with your static website hosting. To set up a binding for the SSL go to CloudFront and add a new distribution. Keep the default values except for the SSL certificate, select “Custom SSL certificate” and choose your certificate from the list displayed in the textbox.
Under origin settings and add a new origin with your S3 bucket URL.
Go to behaviors and add a new behavior, choose for Viewer Protocol Policy select “Redirect HTTP to HTTPS” option, you can keep the rest of the default options.
Wire things up together
So far we have all the services needed to host the website created in separate steps, to bind things together we need to map the domain name to the SSL certificate and eventually the S3 bucket that holds the website contents.
Go to Route-53 and your hosted zone and add an A — record, choose the Alias option and point to the cloud distribution that you created in the previous steps.
Congratulations! at this point your website should be up and running with the newly created SSL certificate.
Bonus: CI/CD
Even though the basic steps to host the website are listed above, if you are using a front-end platform such as Angular, React or Node you will also need a build process before generating your static content. Handcrafting your build on your machine and uploading it is a major inconvenience and error-prone if you have to do it multiple times. If you are collaborating with others for building the website, setting up your build framework and necessary libraries could also take some time. Setting up a pipeline that builds your website and auto deploys to S3 will save you a lot of time in the long run.
With Azure DevOps, you can set up your website to build (free trie 360 hours a month build allowance) and deploy to the S3 bucket automatically so that you don’t have to touch your intricate AWS set up.
To set up the CI/CD pipeline first, create a new user in AWS by going to your account > My Security Credential option. Create a new user and get the Access Key ID & Secret access key of the newly created user.
Next, go to Azure DevOps and set up your project and code repository for your website. I am skipping few more steps here but you can find detailed information about hosting a project in Azure DevOps on the support website.
After your project is created go to Pipelines and create a new pipeline with the S3 upload step. You will need the key and secret created on AWS (above) to complete the pipeline configuration.
The total cost of ownership so far:
Domain name — $12.00 (unavoidable fee)
AWS S3 bucket — < 0.01 a month
AWS Route 53 — $0.50 per month
Everything else — almost free
Estimated yearly Fee: < $20.00 /Yr
A similar set up will cost:
Azure (App Service set up — 9.49$ per month) — $125.88 / Yr
Managed AWS (AWS amplify 8.08 $ per month) — $108.96 /Yr
Google Cloud (Firebase 12.04$ per month) — $156.96 /Yr
If you end up incurring additional charges with this set up then you have a good problem! It means that your content is resonating well with your audience that you are exceeding your cloud free-tier limits. Get a great cloud team to support your project and optimize your solution.
