How to create & deploy a beautiful website after dinner

Photo by Engin Akyurt from Pexels

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!

--

--

--

Creator of Boxapopa, the iOS game for young kids with zero ads, just fun! https://apps.apple.com/ie/app/boxapopa/id1550536188

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Multi-server Chat in Node Without a Database

Hot to make Elastic Beanstalk log Sidekiq or anything else on Amazon Linux 2 to CloudWatch Logs

Exploring Microservices

Building containers without waiting for pull completion of base images on BuildKit

Like a Boss: Summarizing Data in a Summary Table

Demo: hotglue.xyz as a data integration tool with Cumul.io

Meet WidgetKit

Long read: What’s happening with the OpenActive standards?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andy O'Sullivan

Andy O'Sullivan

Creator of Boxapopa, the iOS game for young kids with zero ads, just fun! https://apps.apple.com/ie/app/boxapopa/id1550536188

More from Medium

My Top Five YouTube

Implementing a FAB in Your Quick App

A Revenue Management Reset in Consumer Goods

a-revenue-management-reset-in-consumer-goods

How we automated duty in Slack using Vercel