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.
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.
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.
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.
Plugins I've added on top of PostCSS:
Autoprefixer - so I don't have to add
-webkitvendor 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.
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.
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.
And everything is online thanks to Netlify! I love how smooth this whole process is:
- Make a change.
- Commit and
git pushto my repo.
- Boom, after a minute or two it's online.
^ My Netlify account is connected with my GitHub repo so it all happens automatically.
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.