When an idea comes to mind, or when building a new product, I like to move quickly to get the project into the hands of customers to test.
My starting point will often be a lo-fi mock-up on a white board, or multiple pieces of paper. I’m a big fan of jotting shapes and patterns in a Field Notes notebook for future reference.
Once I have curated my ideas, I like to quickly move to deploying a real website or application of my idea. I find this identifies flaws much faster, and brings the idea to life for less technical members of the team.
Here are some of the tools I use to build and deploy my prototypes.
Version control
The first thing I’ll do when starting a new prototype is get create a Git repository. Take your pick from the three main Git providers:
I personally use GitHub (and pay for private repositories), as I prefer their UI, but this is one section where you can’t really go wrong. Bitbucket and GitLab both offer private repositories for free, so if you’re looking to minimise costs and keep your work private, either of these would be a good choice.
Static site hosting
Once you’ve got some code in your repository, you need somewhere to host the content. Whilst something like BrowserSync may work well on your LAN, I always prefer to get my idea onto the web to share with colleagues, collaborators and friends.
GitHub pages
If you’re using GitHub, you can utilise GitHub pages to get your content online in a couple of easy steps. This also gives you a simple sharing link of: https://<username>.github.io/<your-project>.
GitHub pages can also be used in conjunction with Jekyll CMS to build a simple static website.
Netlify
My personal preference for static site hosting is Netlify. I recently discovered this service and have been using them for multiple prototypes, projects, including this blog.
Netlify can build basically any static site using your technology of choice. I currently run this blog on a combination of Webpack and Hugo, whilst one of my other projects on Netlify uses Gulp and Jekyll. Each site can also be attached to a domain name and comes with a real Let’s Encrypt HTTPS certificate with one click setup.
Dynamic hosting
If the prototype is not a static web page or client-side single page application, there are still options for hosting. Two popular options are
Zeit offers Docker and Node.js support, whilst Heroku supports almost every language and framework. The downside for Heroku is that on the free tier your application will shut down after 30 minutes of inactivity, although I would say that is plenty for a prototype.
DNS
The final stage to getting a prototype live on the web is giving it a real domain to be accessed via. Whilst you can’t purchase a domain for free, I will often give my project a sub-domain via Cloudflare DNS.
Whilst I have some reservations about Cloudflare (My TLS conundrum and why I decided to leave Cloudflare), the ability to quickly assign a sub-domain, and to have it be secured with a HTTPS certificate for free is a massive advantage.
Summary
So there we go, with the tools above you can version control a website, set up a sub-domain, and host it, all for free and all within a few minutes.
If you have any other suggestions for tools, feel free to tweet me and let me know.