Building a functional website from idea to launch in 2.5 hours

November 10, 2019

This was my first no-code project after deciding to set myself a goal of launching at least 10 apps in the next 10 months. I needed to prove to myself that I could launch something... anything... so I decided the best way was to get it done in one evening.

Feminist Parent falls into the category of an idea that got made purely because I knew I could build it quickly and be done. That’s not to say it’s not important or doesn’t have value, in fact quite the opposite. It’s a topic I’m passionate about, especially as I now have a young daughter. But in reality I know it would have stayed an idea were it not for the tools being available and easy to use.

I had seen it mentioned elsewhere that building a site withAirtable and Table2Site is quick and painless, and I knew from the examples I’d seen that the setup was perfect for list-style site. That day I had asked my Instagram friends for suggestions of media – books, TV shows, movies, podcasts etc – that promoted gender equality or female empowerment which I could show to my daughter to engrain in her from an early age that she is not constrained by her gender.

A fantastic and varied list of suggestions arrived in my inbox, and immediately I knew that, even if the idea never went anywhere, having these suggestions publicly available would benefit someone, somewhere. I also did a domain search using my favourite domain search tool and found, to my surprise, that feministparent.com was available. I love a good domain as I think it gives any product slightly more legitimacy and therefore chance of success, and this seemed perfect.

The build process

I had never used Airtable or Table2Site before so the first step was to create accounts on both sites, which was as easy as one would hope in 2019.

Table2Site is a simple website builder using Airtable spreadsheets as its back-end

Table2Site gave the option of starting from a template site which is always my preferred route because otherwise I spend ages procrastinating over design and layout. I picked the one which seemed the closest to what I needed and cloned it onto my account.

I had a brief look at the Table2Site instructions and then clicked through to the Airtable “base”, or what I would call a file, and started looking around to figure out how it works.

I could quickly see that the Airtable base was divided into a Settings sheet, a Content sheet, and an Items sheet. Glancing over them revealed that the Settings covered a handful of general settings for the website and the Items sheet was the database of ‘things’ for the list, so in my case it would be submitted media.

The most important sheet was the Content sheet, which listed each section on each page of the site and specified exactly what was in it. I could see the sections of the main page of the site and how the wording was simply feeding from a cell on the Contents page, and how the buttons and colours were also set from that page.

Each section on each page has:

  • An ID – this can be whatever you want but should be intuitive so you remember what it is, e.g. “joinus”
  • A Type – you select this from a dropdown list, it determines the layout of that section e.g. “Tile view” or “Newsletter subscription”
  • Text and background colour
  • Title – shown in your site’s title font
  • Text – shown in your site’s body font
  • Options – this is where you put all your other stuff like background images, buttons you want, links, layout options and so on
  • Page – this is the page you want the section to show on e.g. Home, Contact, About
The content tab on Airtable defines the entire layout of each section and each page of the website

Table2Site has lists of the different Types and Options you can choose so I used the existing setup from the template and added to it where necessary.

Altering the images

The quickest way to change the images that I found was to go on to pexels.com, the free stock photography site, and find an image I liked, then right click and view the image in a new tab to get its URL, and then just copy the URL into the Airtable sheet. This also saved me the hassle of downloading the image to my computer and uploading it elsewhere.

Changing the images was just a case of finding a the URL and replacing the link in Airtable

Customising how submitted content is displayed

After I had edited the wording, images, and colours on the site, I started looking at the Items sheet to work out how I wanted to display the actual list of submitted content. Table2Site automatically populates data in nice boxes with certain metadata in the four corners labelled Extra_1, Extra_2 and so on. It also had an upvoting feature on each item which I wanted to keep, and the ability to include a link on a button that appears when someone clicks on any item.

To get going I deleted all of the example data from the template and filled in the first row with a real item that I wanted to include. I then refreshed the site to see how it looked. I decided on a few small tweaks to the font sizes, and luckily Table2Site allows custom CSS on the settings sheet so I used my browser inspector to decide what changes I wanted and then pasted the CSS there.

One slightly fiddly part was the filter feature. Table2Site automatically shows a list of tags above the main content list which can be used to filter the content. I wanted the tags to show plurals (e.g. books, TV shows) but I also wanted each item to have its type shown in the corner but as a singular (e.g. book, TV show), but it turns out Airtable allows you to use formulae in a similar way to Excel so I was able to work out how to cut off the last letter of each tag name to populate the Extra_1 column.

I also found out that the filter by default will allow you to select multiple options and will look for items which meet both criteria. This works fine for tags where each item may have multiple tags applicable to them, but for categories it makes less sense as not many items would be both a book and a podcast for example. I tried out the Table2Site templates and realised the other one worked the way I wanted, and that the solution was simply adding “filter type = select one” to the options.

This was the important change that made the filter work correctly!

One great feature of Airtable is the ability to search the web for images to add to the image column. This makes it much quicker to add images to posts, so I did this for each item in my initial list of content.

The Items sheet after I'd added some real content

Submissions

I didn’t want people to submit content straight to the site without any moderation so I cloned the Items sheet and renamed it Submissions. I then looked in the Airtable instructions to find out how to make a form to populate a sheet – it turns out this is quite easy as there’s a form view on each sheet. By viewing this I was able to create a submission form that would collect data in the appropriate format e.g. short text, long text, dropdown list of options, and populate the submission sheet.

The form view on Airtable is available on each sheet

Airtable also gave me the option to receive an email when anyone submits an item, and to redirect them to a custom page afterwards. I was quickly able to make a Thank You page by simply adding it to the Content sheet.

So when someone clicks on the submit button on the website, it sends them to the Airtable form, which they complete and submit. The data shows on the Submissions sheet and the person is redirected to the Thank You page on the website.

Creating a Thanks page was as simple as adding "Thanks" in the page column and then defining some sections

Once I’ve checked the submission I search for an image on Airtable, and then copy the whole row over to the Items sheet so it will show up on the website. There is probably a better way of doing this, for example having all submissions go straight to the items sheet and then having a checkbox to say approved or not, but I didn’t bother working it out. I’ll cross that bridge if it ever hits scale!

The built-in image web search makes adding images fast and easy

Adding a newsletter signup

I added a newsletter signup section which didn’t exist in the template. Detail on how to do this was slightly vague in the Table2Site documentation but luckily their other template had a signup section so I viewed the Airtable sheet and worked out how to do it.

First I had to set up a Mailchimp account, which was fine, but then I needed my Audience ID and API key, which were much more difficult to find than they should be! I got there eventually. Once you have those the actual Table2Site part was ridiculously simple.

Adding the newsletter signup was as simple as adding the Mailchimp API key and list ID on the settings tab and then adding a section with the type "Newsletter Subscription" on the content tab

Launching

Two-and-a-half hours after starting I had the site ready to launch. Sure, it’s extremely simple and hastily done, but it served my purpose which was to get something out there quickly before I got distracted!

The last part was putting the site on my new domain, and this was a bit tricky as I don’t really understand DNS redirects at all. Thankfully Maarten from Table2Site was available on their chat support and was very helpful, so I managed to get it sorted in the end. Waiting for the DNS changes to propagate was the worst and slowest part, but there’s not much anyone can do about that.

I was quite excited to have launched something in what I considered to be a short amount of time, so I posted about it on Indiehackers.com. Surprisingly the first comment was quite negative, but I knew that it was unusual for the Indiehackers community which is normally extremely supportive (caveat: I’ve only been a member for a short time), and sure enough all the comments that followed were really positive.

Ultimately though, this was just a small and rushed experiment, and although I’m passionate about the subject matter, the execution was done in such a way that I won’t mind if it doesn’t take off – I learned a lot in doing it and take confidence from the simple fact that it’s out there.

The finished site

I write about no-code tools and the people using them to build profitable online businesses.
Sign-up below for snappy summaries and helpful tips, straight to your inbox.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.