Oh dear. What a start for a first blog post for a professional website.
I (hello, I'm Karim, how are you?) have been tinkering with the freshest and most modern way of building a website in 2019. Because it's fun, and also because I actually needed a website for Grafig, my company.
Back in the time (2000s), it was rather fiddly to write up some HTML / CSS and upload that through an FTP client on some web hosting provider. Not cheap as well, unless you were happy to have ads on your own website.
I have been involved with websites since that time and tooling has evolved to something rather nice, clean and cool.
Were considered: Gatsby, Next.js, Hugo (go), Jekyll (ruby) and some others. For a split second, I was also tempted to open Wordpress' and Drupal's official websites to check out what has changed in the last 10 years.
The tiny problem is that everyone comes with some biases, some conscious and some more unconscious ones. Because I've been heavily involved in all things JavaScript since 2008, all the way to today's shiny TypeScript, I thought that picking something that's neat and fast in node would be good for many different reasons. If it had GraphQL, even better.
It didn't take long to check out Gatsby's static site architecture to understand that it was very versatile, and elegant.
Next, you need to get that system running online with all the things you'd expect from a modern host: SSL, CDN, DNS, CI, CD, serverless execution (lamdas, functions). All this automated, please. Oh, and free! Hey, can you also throw in all the other non-functional requirements? Reliability, speed, etc?
You get the picture. The great and only one that matches all these (rather crazy) requirements is Netlify. A second contender was Zeit's offering, but Netlify seemed to be the best choice at the time due to more generous quotas on the free tier and the sheer number of features.
Setting up Gatsby and Netlify was rather straightforward. You just need to follow the existing documentation that was up to date and flawless.
Next: using the serverless functions to integrate the contact form, which also uses reCAPTCHA for good measure. Nothing special here, a bit of configuration and all is well. To send emails, SendGrid's API remains my all time favourite option as the documentation and the offering are quite rich. They also provide email templates which are easy to use and customisable to your heart's content.
Data! Of course. Gatsby can get data from virtually anywhere. And this site required basic Markdown files for blog posts. Through GraphQL, Gatsby exposes any front matter of my choice and the HTML version of the Markdown source, which saves time. If I need to use my own parsers, I'd just pick the raw source and apply any filters, but we're not there yet.
I was about to use a headless CMS (Ghost, Netlify CMS or Strapi), which are all open source. But when one digs deeper, they're either too time consuming to configure or not trivial to deploy. Since I use my computer all the time, I thought of using a local version of these but they still would require some configuration. No configuration is the best configuration, so I looked at Markdown editors. It turns out that there are quite a few, some in browser, some as Mac Apps (more often than not, Electron based). I've settled for Mark Text for now, from which I have been writing this first blog post and I must admit that I'm enjoying it.
Of course, all this didn't happen in a single day. I've used my spare time (that is, after work, during commute, weekend time and even in between gym session rest times) amidst this busy festive period to fit all that together.
It's quite rewarding and, I hope, useful to some of you coming here (how did you get here?) to read about a mad scientists professional engineer's endeavours, and which technology to use for 2020.
What's next? Well, making this website's presentation as elegant as its technical solution. Wish me luck.