Intro

I’m starting to explore the interesting world of Amazon Web Services and all the aspects related to best practice, DevOps and related Architectures. Coming from a networking background I really enjoy the steep learning curve in understanding all the services available on AWS and realizing the potential advantage to use AWS to solve common IT challenges.

This HTML5 website is a simple example that I downloaded from the HTML5 UP website and gives a simple static website that is very easy to upload to AWS in a few easy steps. I have put more detail on the architecture under the Detail page.

Detail

The technology used behind this simple and static website is all based on Amazon Web Services. Using only AWS this website is hosted on AWS with all website files and content distributed across the world for improve reliability and fast delivery to the end users. It uses an Amazon certificate to encrypt all traffic over the internet via SSL to make sure it is secure and private. And all this don’t even require a web server or EC2 compute to host the HTML5 website.

So where to start and what did this cost? If you sign up for the Amazon Free Tier you will ALMOST get all this for free for the first year. The only service I had to pay for is the $11 per year for the domain name ZAllison.net which is not done by AWS and they outsourced to 3rd party. This is not required but it is a lot more user friendly to use ZAllison.net instead of http://zallison.net.s3-website-us-east-1.amazonaws.com to access your website.

The final architecture of this website is shown below and shows all components required to setup this website.

High level steps to setup a similar website:

  1. Register your domain with Route53
  2. Download a HTML5 template from HTML5 UP
  3. Create S3 Bucket and upload the HTML5 files to the bucket
  4. Enable web hosting on the S3 bucket and make files public accessible
  5. Create a new SSL certificate on AWS Certificate Manager
  6. Create a CloudFront Distribution with the S3 bucket as the source to be distributed to all Edge locations
  7. Assign the SSL certificate to the CloudFront Content
  8. Route all website traffic to the CloudFront edge with Router53 A and CNAME records

The only drawback is that this website is only static HTML5 content delivered to the web browser, so you cannot enable any server side scripts because this will require a web server that can execute the script using something like PHP, Perl, or ASP.

About

I'm just a regular and passionate technologist looking at learning more about AWS. Background in Networking, IT and all related topic.

You can find more about me on my very much static ZAllison.com website.

Elements

Just a preview of html elements and css styles:

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.


Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Blockquote

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.

Preformatted

i = 0;

while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}

print 'It took ' + i + ' iterations to sort the deck.';

Lists

Unordered

  • Dolor pulvinar etiam.
  • Sagittis adipiscing.
  • Felis enim feugiat.

Alternate

  • Dolor pulvinar etiam.
  • Sagittis adipiscing.
  • Felis enim feugiat.

Ordered

  1. Dolor pulvinar etiam.
  2. Etiam vel felis viverra.
  3. Felis enim feugiat.
  4. Dolor pulvinar etiam.
  5. Etiam vel felis lorem.
  6. Felis enim et feugiat.

Icons

Actions

Table

Default

Name Description Price
Item One Ante turpis integer aliquet porttitor. 29.99
Item Two Vis ac commodo adipiscing arcu aliquet. 19.99
Item Three Morbi faucibus arcu accumsan lorem. 29.99
Item Four Vitae integer tempus condimentum. 19.99
Item Five Ante turpis integer aliquet porttitor. 29.99
100.00

Alternate

Name Description Price
Item One Ante turpis integer aliquet porttitor. 29.99
Item Two Vis ac commodo adipiscing arcu aliquet. 19.99
Item Three Morbi faucibus arcu accumsan lorem. 29.99
Item Four Vitae integer tempus condimentum. 19.99
Item Five Ante turpis integer aliquet porttitor. 29.99
100.00

Buttons

  • Disabled
  • Disabled

Form