How do we host our static website

Hoang Le
Hoang Le
Nov 3 · 4 min read

You are building a static website and wanted to know how to host your site, but;

  • You don’t want to perform manual steps.
  • You want to host for multiple environments such as Development, UAT, Staging, Production.
  • You want to reduce cost, provide high-levels of reliability, require almost no IT administration, and scale to handle enterprise-level traffic with no additional work.
  • You wanted to deliver HTML, JavaScript, images, video and other files to your website visitors around the world with CDN.

In this article, I will show you how to host a static website in a few minutes without manual steps, you can define the CI/CD pipeline to automate your deployment process pretty easy. Amazon Web Services is the most popular public cloud vendor in the world, they provide services to simply making a website on their infrastructure around the world. Check out this article to know more details.

If you are new to AWS, you want to practice in order to know steps to host a site on AWS, this article will help you.

DevOps at Innomize is the most important aspect of our solutions and required for all our projects. Automation reduces time-to-market, the risk of human errors and redundancy in the system while increasing the efficiency of the project delivery. To automate the static website deployment, there are a couple of ways:

Let’s Get Started

Now, I will show steps to build and deploy a website using Serverless Component. Below are the reasons why I selected this approach:

  • It is pretty fast, in less minute you will have a site up and running.
  • It is an easy way to apply to our Monorepo since we have multiple apps per repo.
  • For consistency with our backend framework, we use the Serverless framework to build backend services with AWS Lambda, API Gateway, Cognito, and other AWS services.

Follow this guide, you will able to build and deploy your site, however, the Serverless component hasn’t provided a way to deploy to multiple environments/stages using the same serverless.yml (or serverless.js) file yet. I have raised this issue, check out this if you want to know more details.

Note, I wrote this post based on suggestments and comments from the above Github issue.

Before getting started to deploy the site, if you haven’t had a domain registered, you might need to:

After you had the SSL certificate and Route53 issued and registered, follow the following steps to compose and deploy your site:

  • Install Serverless
npm install serverless -g
  • Create a sample React application, you can skip this step if you already have your app.
npx create-react-app sls-dev-app
  • Install serverless component packages
npm install @serverless/core @serverless/template -D
  • Create serverless.js file in the project root directory
  • You can modify the serverless.js file based on your requirements. such as replace your domain name (i.e. change the domain.com to your registered domain name). Note, right now if you use the full domain name for the bucketName (i.e. www.my-app.domain.com), you will end up with an error related to CloudFront distribution, that is the reason why I used hyphens (-) instead of using dots (.) for bucket name.
  • Deploy
# --env can be any value for your environment
sls --debug --env=dev
# then you can deploy to another environment
sls --debug --env=prod

In a few minutes (it depends on how fast the CloudFront distribution provision and register your site), you will have your site up and running.

Visit our blog for more interesting articles. If you have any questions or need help you can contact me via Twitter.

My name is Hoang, I am the Co-founder and CTO of InnomizeTech. My title is CTO but I am a full-stack developer and software architect, passionate about Cloud Computing, Serverless, DevOps, Machine Learning, and IoT.

If you are looking for developers, offshore team, or need consulting about the AWS cloud, Serverless architecture, and so on, then hire us, we can help you!

This post is originally published on our blog.

Thank you for reading!

Hoang Le

Written by

Hoang Le

Co-Founder & CTO @innomizetech | AWS Solution Architect | Startup | Outsourcing | IoT

InnomizeTech

We are an offshore, software development, IT consulting company. Our aim is to create awesome products that will make your everyday life easier. As a start-up company, we always put humans on first priority and welcome young people to join our team. Our site www.innomizetech.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade