How to create & deploy a beautiful website after dinner
Bootstrap + AWS === Easy
I’m (thankfully) really busy at the minute, with actual work and also an app I’m making for heart patients stuck at home because of Covid-19 (with the Team-OSV community). However, my wife mentioned that the residents’ association that she chairs needed a way to get info out during the lockdown and I magnanimously (AKA foolishly) said,”I could make you a website, easy” … so that’s how I found myself needing to create a website that I didn’t have time to make … one evening after dinner.
I know there’s quick-fix options like Wordpress, or those sites that you can pay to deploy a template site for you in minutes, but I like building things so wanted to create it myself. I considered doing it in React as I’m using that a lot in work at the minute, but then decided that was overkill for a simple site that I had very little time to spend on, so I decided on:
- Find and change a free bootstrap template
- Deploy on AWS
Bootstrap
I said I like building things myself, not that I have time to design things from scratch — so I went to startbootstrap.com and found a nice looking free template (MIT license):
which looks like this at the top:
but what I was really interested in was the bottom section:
as I liked the look of those cards.
So, I created a new project in WebStorm, and butchered … I mean edited … the template, so it now looks simply like this:
(No, I don’t live in the Dark Knight’s hometown, just wasn’t sure about putting where I really live on Medium!)
and that’s the site! I’m a huge believer in simple designs and knowing when to stop designing / building, and that’s (currently) all they need.
Deploy on AWS
The high-level steps, all on AWS:
- Buy domain name via Route 53 ($12).
- Create certificate via ACM.
- Create S3 bucket and deploy code into it, as a statically hosted website.
- Create Cloudfront distribution pointing at the S3 site. (needed for https for S3 sites).
- Point the domain name at the Cloudfront distribution via Route 53.
and it’s done — a https enabled website deployed!
I’m not going to show you how to do all those steps, but here’s an awesome post by Ly Channa with lots of detail:
Morale of the story
That all took me about 4 hours, most of which was messing around with the bootstrap template as I tried to figure out what I wanted it to look like.
Making simple website for things like a residents’ association or a sports club isn’t difficult and shouldn’t cost much, either in cash or time. It’s also a fun way to put in a few hours after dinner!
Any thoughts or comments let me know below!
