Make a Brochure Site!

This post will help you to:

  • quickly set up a design tool to create content
  • use git to version your content
  • quickly set up an S3 bucket to put the content into
  • configure the bucket to be a web site
  • use command line tools to test and publish your content
  • create a domain name or alias to point to the bucket web site
  • create a free and awesome SSL certificate to secure your site
  • bank your savings

There are literally millions of options for hosting web content where cost is a consideration and ease of use is important. Almost all require either a purchase, a monthly fee or a server to run on. Those that are free are hosted in a CMS as a service type site and have restrictive functionality around SSL or domain names. Think Wordpress, or similar blogging platform.

Something that has improved in the last few years are how good and usable the web-GUI interfaces are for content creation. Take a look at Canva for making documents. Slick UI, thousands of free images, hundreds of options for layout and design.

AWS makes running small web servers quite cheap, yet does a brochure site need to cost anything at all?
Is there a way to leverage these useful GUI tools that create beautiful content using free stock images, carefully made themes and responsive/adaptive buzzwords?

Using AWS S3 and *any* CMS or design tool it is possible to set up an awesome and nearly free web site. Nearly free meaning it will cost cents per month to run, if anything at all.
Awesome because you get to keep all the excellent useful features of your favorite CMS tool for making websites and mirror the content over to S3 (and your VCS).

Make your content, stick it in a bucket.

To do this you need to set up an AWS account and choose a design tool. You could use Word, a design tool with a preview mode, an online tool, or install an opensource CMS on your computer and work in that. The only stipulation is that you can spider a flat-file version of the site or export all the artifacts from the system. (There are probably design tools that save to S3 buckets - if you have one - skip these sections).

In your AWS account, go to S3 and create a bucket. The name is important and should match whatever domain name that will point at it. If you don't need a special domain - call it whatever you like but remember that S3 bucket names are globally unique.

In your S3 bucket adjust the properties and set it to be a static web server,

Create your content! By now you have figured out where you want to get your content from. This site used to be a silverstripe CMS site. I scraped it, followed this blog post, redirected the DNS and I have a new free site. You should have a look at webflow. A designer directed us to this some years ago and it is an excellent tool. (Please check carefully the terms of service for this application for any CMS type sites that see scraping as a breach of their terms).

I tested this with a friends site and it worked a treat. So, if you are finished making your brochure - now we need to scrape it.

Scraping sites is a process of copying a part or all of a site. For our puposes we want a copy of all web assets to be saved as a traversable HTML structure. Put simply, we need the files.
I searched the web for scraping tools and found many 'paid for' solutions, some 'online' solutions etc etc etc ad nauseum.
The simplest tools are always the best, and for this application, one of the oldest useful tools is indispensible.

wget

Read at stack about this solution - as we are web-scraping, I will leave this here. Those who have HTML authoring installed locally don't need to worry about this detail: https://stackoverflow.com/questions/9265172/scrape-an-entire-website
Open a terminal session on your linux or mac machine. So, using this tool and method we can cd over to the destination directory and clone down our content with:

$prompt>wget -m -k -K -E -l 7 -t 6 -w 5 http://webflow.com/your-new-site

For all other CMS options export or mirror your content to a folder on your PC/Mac.

We have content.

Having content is great - we own our IP and our important 'finger minutes'. Now we need to get this content into our bucket, but *before* we rush to publish, we need to 'version' our content in a repo. There are a few really good VCS sites that offer git or mercurial or subverion --- I avoid discussions about religion, but will offer you all git , as is it has become the universal VersionControlSoftware standard and is available on all platforms. I use bitbucket, but there is github and now even CodeCommit on AWS. You are going AWS native so you should think about CodeCommit as a soltion. For now, you don't need a remote repo. Install git on your machine, cd to your content directory and run a couple of commands in your terminal.

$prompt>git init && git add . && git commit -am 'initial commit'

git is excellent as it can run locally on a machine and do its thing, or it can take part in a community of programmers working together on a remote repository. At any time you can add a remote repo to your folder and push out code.
Remember: every time you make a change and copy your site down to this folder, 'commit your changes'.

$prompt>git commit -am 'subsequent commit'

The console interface for S3 is great, and will allow you to upload the entire folder/site in one hit.
I prefer terminal commands to talk with AWS and so I will be using terminal to synchronise my folder and the S3 bucket.
(look at AWS documentation for setting up your awscli tools)
My command for moving the site to the bucket in terminal is:

$prompt>aws s3 sync ./ s3://www.doctrinaire.com.au --acl public-read --delete

Seeing our site* *(debugging why we can't see our site)

So, get into S3 properties for the bucket and reassure yourself you have set up the static hosting elements, copy the endpoint address which looks like a big ugly website, then try to load it in your browser.
You need to set up default pages like index.html, error.html and so on, also verify that all the files in the bucket are public by selecing the bucket and choosing in the More (. . .) options 'Make Public'. Once you have a bucket that is serving files, you are 'over-the-line'.
Rules for S3 bucket websites:

  • bucket name matches the domain name
  • bucket is set to be a static web server
  • all files in the bucket had the 'make public' treatment
  • all files are served on port 80 meaning not encrypted

Name it! Lock it down!

Now that you can see your content in the S3 bucket endpoint URL, its time to set up a domain and SSL.

The read ahead for AWS is that there are some 'as-we-go-along' compromises in the platform. For now the only way to get SSL on your S3 bucket is to distribute it onto cloudfront. S3 has no SSL options, so you need to use your content bucket as an origin and push your site out to cloudfront and secure it in the CDN.

To name your site you need to:

  • choose a domain name (this must exacly match the bucket name, right down to the dots)
  • go to Route53 and buy that domain then set up a hosted zone.
  • point your apex and www cname at the CloudFront distribution
  • make cocktails

In AWS go to certificate manager and then choose us-east-1 as your region.
Create a new SNI certificate for your naked domain and a catchall.

  • doctrinaire.com.au
  • *.doctrinaire.com.au
  • www.doctrinaire.com.au
So now you have the ability to encrypt traffic from those origins to your customers.

Move your content *to the edge*

Set up Cloudfront.
Go to the screen in the web console and create a distribution for your S3 content. In the options for the distribution you will be able to choose the new certificate for the distribution. Set up your headers as needed,

Last Step

Everything is set up except pointing your domain name to the Cloudfront SSL endpoint.
this is done in the Route53 panel.

Create an A record for the naked, (non - subdomain like www), domain and choose ALIAS -- in the drop list, choose the Cloudfront distribution. Repeat this for each of *, www and the naked domain.
NB:It can take a while for the Cloudfront distribution to show up in the list.

After all this is done, there are several areas in the AWS configuration that are designed with Queue based multithreaded and asynchronous processing *features*. So you may need to wait some hours for everyting to work. Especially on the DNS side.

From here, anon

Now you can continue to work on the Rich GUI based in the web with loads of free stock images and templated designs. When you have a publishable version you simply repeat the clone and copy steps to get the content to S3. To force the CDN to show the new content, you log into cloudfront and create an invalidation for all objects. Using the pattern /*
will invalidate (remove) all objects from the cache and start again with the copy on S3.

A word on costs

The previous site used a T2 micro instance with the database installed on the instance. SSL and everything else was handled on the instance with no redundancy and no provision for heavy traffic. (I admit I am unlikely to generate much traffic).
Summarising the features of the one server system.

  • Limited network throughput
  • Limited speed
  • Limited space (e.g. left long enough an unattended log could use all the disk)
  • High operating cost. (Maintain a DB, server software, security patches)
  • Imperfect security. (most CMS systems have a login page that can be brute forced)
It has been running for about 5 years without interruption, but EC2 instances can fall over from time to time. The cost is $0.016 per hour running 24hrs a day. Per 30 day month that is $11.52 . By itself this is amazingly cheap, but its not cheaper than free.

Summarising the features of the serverless S3/Cloudfront system.
  • Unlimited network throughput
  • Great speed
  • Unlimited space
  • Low/No operating cost ($0.025 per 1GB per 1 month. Site is 560KB so the cost is AUD$0.000014 per month)
  • Great security. (Provided you are careful with your AWS credentials)
  • Bullet proof. (A DDOS attack wouldn't last long enough to add costs and there are no servers to topple)

So there it is! A Free(ish) CMS to make nice looking content and a means to pubish it for minimal cost. There isn't a comments section, but feel free to email questions, suggestions and contradictions to chris@@doctrinaire.com.au.