Published in


How do we host our static website

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

  • You don’t want to perform manual steps.

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.

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 to your registered domain name). Note, right now if you use the full domain name for the bucketName (i.e., 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.
# --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!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hoang Le

Co-Founder, CTO at @innomizetech | Software Architect, Full-stack DEV | Passionate about #cloudcomputing #aws #serverless #devops #machinelearning #iot #startup