I recently launched a coming soon landing page for Engineering Tourist – a side project I’ve had in mind for a while. The goal is to highlight and discover engineering or technical tourist sites depending on your location. For example if you were in Tucson Arizona, you might discover the Pima Air & Space Museum which is really fantastic. Putting together this landing page was pretty simple (after all, it’s just a single static page), but involved learning and wiring up a bunch of services. Also, every service here is at the free or nearly-free level, so that keeps the costs minimal as well.
Amazon Web Services
The core of this solution is all built on AWS. This site is the example I used while following along with Learn AWS By Using It. It was really helpful to have an actual live project rather than just an “example.com” sort of thing.
Deploying a static website on AWS required learning and using several different services:
- S3 for static files (the easy part)
- CloudFront CDN for better performance around the world
- Route 53 for DNS management
- Certificate Manager for domain registration and SSL certificate
- Simple Email Service for sending messages from EmailOctopus (more below)
Web Site Content
The goal here was to create a single “coming soon” landing page to collect email addresses, so I started with the Eventually from HTML5 UP. I wanted to set up a more automated build process for the CSS and JavaScript, so I learned and used gulp for the first time. Among other things it minimizes the image sizes automatically and compresses/combines the status CSS/JS files.
For a starting set of background images, I went through my own collection and picked Walkway Over The Hudson, Indianapolis Motor Speedway, Pima Air & Space, The Henry Ford, and USS Midway Aircraft Carrier.
For deployment, I have a script that uses the AWS CLI to publish everything to S3. With the CLI I can also control the cache time for all the static files: the main index.html is set for 1 hour and everything else is set for 7 days (but could be longer actually). When I start making changes more frequently here it’ll make sense to automate this deployment with each push to GitHub, but for now running this script works fine.
StaticKit
The StaticKit service provides forms and server-side functionality for static websites. In my case I’m using a simple contact form to gather email addresses which are stored and downloadable from the StaticKit site. Adding and deploying this signup form to my static site was really easy and the free plan should be good enough for now.
Zapier
Zapier is used to wire up the new data captured into StaticKit. Thanks to the Zapier StaticKit integration, it was easy to create two Zaps:
- New form submission → Add subscriber in EmailOctopus
- New form submission → Send SMS via Twilio to my mobile phone
Since I’m just on the free plan with Zapier, this had to be two separate Zaps. For those on any of the paid plans, you can implement this with a simpler “multi step Zap”. Receiving a text message with each new subscriber is just for fun and I’d probably turn that off for anything that became popular.
EmailOctopus
I’m using MailChimp for some of my other projects but their free tier has become confusing and more restrictive over time. EmailOctopus has a generous free tier so I’m giving it a try with this project.
EmailOctopus uses Amazon SES to send emails, so you’ll need to have an AWS account. The setup process has several steps (including giving EmailOctopus permission to send via your account and setting up SES to send from your domain), but the documentation provided walks you through everything and I didn’t have any problems.
Conclusion
Now that I’ve written it all down, that’s a long list of services just to launch a simple single-page website and collect email addresses! If your goal is to just quickly put together a coming soon page like this, it would probably be faster to use a paid service or a WordPress site + plugin. In my case I guess “the journey is the reward”, i.e. a chance to learn a bit about all these services.
The other takeaway is how easy it is to assemble something out of all the parts. Even though there are a lot of moving pieces here, most of it was just “wiring up” services. The only code I wrote was a bit of JavaScript.
Finally, if you’re interested in engineering tourism at all, please sign up to keep in touch!