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
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):
Grayscale - Free One Page Bootstrap Theme
Grayscale is a free Bootstrap theme with a dark color scheme, smooth scrolling page animations, and a collapsing top…
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:
How to host static website with https using amazon s3
You might have your application running in Java, PHP, or Ruby but you might not want to convert include your static…
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!