My wife came up with a business idea and she needed a simple website. So I decided to build one. And this post is basically me documenting some of the tools I've used.

Context

It's a simple page with one short form to gather emails and some extra data. It's likely going to have two more subpages, including one with extra form. Mostly static content. Easy-peasy.

I'm fully aware this may not work for everyone and this may not be enough (or too much!) for other scenarios. But this was my playground and my toys and I just wanted to share with you all my experience and rationale behind my choices.

Tools

I could build everything with pure HTML and CSS and then upload it through FTP on my own server. But I thought it's gonna be fun taking alternative path.

Frontend

Instead of creating one index.html file in Notepad.exe I decided to go with Gatsby - which is basically a framework for creating websites 🤷‍♂️.

It's based on React and its API/documentation seems pretty straightforward and understandable. Plus I wanted to play with React a bit more.

CSS

I used to use Sass or Less in my previous projects but this time I wanted to try something new so I went with PostCSS which basically adds a bit of magic to normal CSS.

Plugins I've added on top of PostCSS:

• Autoprefixer - so I don't have to add -moz or -webkit vendor prefixes to some CSS properties.
• PostCSS Nested - so I can use Sass-like nesting.
• postcss-preset-env - it lets you use some cutting-edge CSS but understandable by modern browsers.

CSS Modules

Since my project is based on Gatsby and React, I basically created components for everything: header, footer, forms, buttons and specific content sections. And because of componentized nature of my codebase, I decided to utilize CSS Modules concept so I don't have to be worried about using too generic names for my CSS selectors and everything can be scoped locally.

"Server"

GitHub

I store everything as a GitHub repo. You may wonder if it makes any sense to do so if it's a tiny project that I don't collaborate on with anyone else... And my answer is: YES! I make small commits and this alone saved my butt once or twice already - for example when I had to restore some previous version of a component. And you're right - I don't utilize 95% of what GitHub (or Git alone) provides, but the rest 5% is still worth it.

Netlify

And everything is online thanks to Netlify! I love how smooth this whole process is:

1. Make a change.
2. Commit and git push to my repo.
3. Boom, after a minute or two it's online.

^ My Netlify account is connected with my GitHub repo so it all happens automatically.

Forms!

But there's more! As I mentioned earlier - that landing page has one "interactive" element - a form to collect emails and some additional data. Apparently Netlify can handle form submissions and store all the collected data for you. The best part: all you have to do is basically add netlify attribute to the form and it will do all the hard work for you... 🤯

I could have done some things differently but I wanted to play with these particular tools as I personally consider them being the future of "simple" site building.