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:
- Make a change.
- Commit and
git push
to 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.
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.
Top comments (1)
Omg my website is Gatsby + Netlify too! I'll need to dig deep into everything you wrote here to see how I can make it slicker :)