Launch a Custom Website With Minimal Coding Ability, for Free
I’m at best a hobby developer (working on it!) and needed to get a simple website up quickly to launch Perennial City Composting. In less than a week of part time work, I managed to hack out exactly what we needed. In this post, I’ll walk you through how I managed this.
First, for some background: my wife and I set out to launch a residential compost pickup service in St. Louis. The idea at first was to use one of the great website building sites out there (why reinvent the wheel?)We decided on Shopify, the same options were available for Squarespace. As a miser, my first issue was we were paying for Shopify monthly with inflated CC fees, then we also had to use a subscription management add-on that took another $40/mo plus 1%. This put our cost at over $70/mo, plus .30 and nearly 4% on every charge. Nahhhh…
In addition to cost, the user experience was just not right. As a service, we just needed a way for folks to sign up, and have us do the rest. In order to use Shopify, our subscription had to be an item added to a shopping cart, and a full checkout process after that. Tax would be present, as well as shipping fee (which would have been zero, but still required). The cost and UI issue was similar with Squarespace. After setting this all up, it looked real nice, but these other issues kept us from being happy. We needed something simpler, more affordable, custom. And, we didn’t have a lot of time, experience, or extra cash.
If you have no experience at all, you could acquire my early 2018 level of HTML/CSS skill by simply doing the introductory courses at Codecademy. The following is a list of exactly what I did to get us up and rolling.
Domain — Google Domains
Options to purchase and manage a domain abound. If you don’t already have a domain name, you can use any service you’d like. I’ve personally used a number of services, and found Google Domains to be the simplest for me, particularly when updating DNS. Adding A Records for Netlify (more on that later) was the extent what I I needed to do with DNS.
Purchasing a domain is a minimal cost ($12/yr with Google) that will renew according to your preferences, and there are plentiful discounts for purchasing more than a year at a time with certain registrars. We already had ours, so at this step there was nothing out of pocket.
Development Environment — Cloud9
Not only do I exclusively use Chrome devices, when I have Crouton’ed Linux to use a local development environment I hated it.
With this cloud development environment, everything is accessible from anywhere you have a browser and internet connection. Outside of your terminal, it’ll be exactly as you left it, the same files open, even the cursor in the same place. You also do not have several different pieces of software to keep up to date and maintained, it’s always ready to go.
I’ve been using Cloud9 since before it was owned by Salesforce. It allowed a certain number of free projects until it was purchased, like everything someday, by Amazon. It costs me maybe a couple of bucks a month for the half dozen or so projects I have going. That is worth it for me to keep it all in the cloud and accessible from any device. If you use a local environment, zero cost for you environment.
Repo — GitLab
Another choice initially made because I prefer not to spend money! GitLab and Bitbucket both offered free private repos. I initially used Bitbucket for projects (a couple tutorials), and if I remember correctly I went looking for something else when it got weird with Atlassian login.
I just heard from a friend that GitHub now offers free private repos. If I were trying to land a job or otherwise get some hacker-cred I might work there, I’m satisfied with GitLab.
Templates — Free Bootstrap Templates Online
Just type that in your search browser and see what you get. There are so many free bootstrap templates online, I copied and pasted from several to get our site looking the way we wanted it. It would require some forensics to tell you exactly with sources I used, and it doesn’t really matter.
Completing a short tutorial on Bootstrap would help you a bit. You could definitely get by minimal CSS knowledge, the Bootstrap documentation, and some search skills to find a template you like and bend it to your will.
Little Extra Touches — CodePen
I wanted custom radio buttons for our soon-to-be composting members to choose their subscription.
CodePen is my go-to spot to find those final details. If you need something as simple as a button, or complicated as a fancy CSS animation, you will find it here.
With a built-in text editor, you can begin modifying to your liking and see the changes real-time.
Hosting & SSL — Netlify
By far one of my favorite products I discovered in 2018, Netlify is brilliant for hosting your site.
I initially paid $60/yr for hosting elsewhere, and it required FTP. As I mentioned earlier, I’m all Chrome, so this meant I had to boot up the windows laptop I have for situations like this (and wait an hour for all the updates) and get FileZilla going. That sucked.
I stumbled upon Netlify while looking for an easier way to get my site onto the world wide web. It updates via your repository! It really is amazing. The first time I set up Netlify it took less than 5 minutes to deploy, could not be easier.
For me, I simply fire up Cloud9, make some changes, then git add,commit, push, and the site is updated.
Even better, it’s free. Hosting and SSL (via LetsEncrypt) is 100% free. There are paid tiers for collaborating and other fancy things.
That’s it! (for a Simple Static Site)
Last week I needed to put up an incredibly simple site, basically a business card, and I followed these steps (minus a bootstrap template, I simply stitched CodePen snippets together) The page was up start to finish in about an hour. It took less time to get the site launched than writing this post!
For our composting business project, we needed a little more; to create members, add payment, and start a subscription.
Stripe for Subscriptions
The add-ons for recurring charges in Shopify/Squarespace only managed subscriptions through Stripe. It made sense to bypass the extra cost from these third party services and go straight to the source.
Crunched for time, and not confident around JS, I reached out to a dear friend who helped set up the Stripe-side of things. I styled the form. While the initial site doesn’t have user authentication or management, the single page with the ability for customers to easily sign up got us rolling.
Serverless Endpoints for Stripe — webtask
We needed somewhere to put that Stripe action. I was initially messing around with AWS buckets, and similar to my experience with FTP, it just annoyed me.
That’s when I found webtask, yet another free and stupid-simple service. It hosts the “Webtask” to get everything from our form to Stripe.
Onward
Thanks so all these wonders of modern technology, we were able to get our site up quickly and practically free, so we could begin building the business.
Managing subscriptions and payments after the initial sign up is currently done manually through the Stripe dashboard, but infrequent and an opportunity to provide great service.
For the past couple months, I’ve been transferring everything over to Rails, which has been a lot of fun. A new, full feature web application will be exactly what we need as we head into our second year of business.
