At first glance, five minutes and fifty-five seconds seems like a pretty arbitraty unit of time to measure something by. Does it read better as 1 “Bohemain Rhapsody”?
I had a goal to show off how to create and deploy a website as fast as possible -- and after a few tries, I couldn't do it under five minutes. But six minutes... plenty of time! Especially when you've got a sweet Brian May guitar solo to give you a little boost 4 minutes in.
I demoed these steps at a weekly work meeting, but everyone in the room had about the same background as me, so for you, random Internet stranger, some assumptions:
If these assumptions don’t apply to you, you’ll need to budget some more time. If you’re just getting started with git or npm, you might need the entirety of Live at Wembley '86. If you’re brand new to development, consider loading up the entire Queen discography.
Now that you’ve got a reasonable time bound for this, let’s get to it.
We’re going to use Gatsby for this. Gatsby is a React based static site generator. There’s some comprehensive getting started instructions here, but here’s the TL;DR version.
npm install --global gatsby-cli
from your favorite command line, pick a folder and then:
1gatsby new gatsby-site 2cd gatsby-site 3gatsby develop
and once it’s done loading, like magic you’ve got a website at localhost:8000.
Create a new repo at your git host of choice (bitbucket or github). Either of them will give you instructions for pushing up new code, basically:
1git init 2git remote add origin [your-origin-here] 3git push origin master
I cannot speak more highly of Netlify, but if you’re doing this at “Bohemian Rhapsody” speed for now I’ll just say that Netlify makes Gatsby deploys crazy easy. Sign up for an account, ideally using the login for your git host (github, bitbucket, etc). Once you’re in you’ll see a dashboard with a big “New site from Git” button. Click that then:
The charade of creating a site and deploying it in under six minutes aside, this is awesome for a few reasons:
gatsby developspins up a hot-reloading development environment, but Netlify actually did the build step for you. There are other services that will do this, but there’s usually a few more hoops involved to get it working.
That’s it. Hopefully you followed along and got a website up and running. If not, at least you got to enjoy some Queen.