Here's my website setup...
Tags: webdev, coding
Published: 2021-03-02 11:00:18

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](http://gatsbyjs.com/) - which is basically a framework for creating websites 🤷‍♂️.

It's based on [React](https://reactjs.org/) 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](https://sass-lang.com/) or [Less](http://lesscss.org/) in my previous projects but this time I wanted to try something new so I went with [PostCSS](https://postcss.org/) which basically adds a bit of magic to normal CSS.

Plugins I've added on top of PostCSS:

- [Autoprefixer](https://github.com/postcss/autoprefixer) - so I don't have to add `-moz` or `-webkit` vendor prefixes to some CSS properties.
- [PostCSS Nested](https://github.com/postcss/postcss-nested) - so I can use Sass-like nesting.
- [postcss-preset-env](https://preset-env.cssdb.org/) - 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](https://github.com/css-modules/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](https://github.com) 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](https://www.netlify.com/)! 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](https://www.netlify.com/products/forms/) 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.