Making the blog

As I write this post, I have just finished implementing NetlifyCMS on the site.

First off: what a pesky little thing to set up, holy cow. Just to give you an idea: I created a branch on my repo and named it cms (makes sense, right?). Guess what: as it turns out, you can’t do that, otherwise the netlify won’t have a branch to save your content to, and thus will throw a build error and refuse to deploy the site ¯_(ツ)_/¯

Thankfully it all came together once I deleted the branch (not getting those hairs back though). Anyway, it’s being a very compelling journey to build and keep my own homepage, and I’d like to share my progress so far.

Why

I first thought of creating the website for the need of storing my cv somewhere accessible - also, maybe I wanted to build it using React (don’t do that). I tried this for a couple of weeks (around August 2019) but quickly realized it was not what I was looking for: it would not only be very costly to implement, but also changing anything would be a pain, and nailing the layout would take a lot of time.

It was a bad idea, but it led me to create a portolio page, which was really nice. I really didn’t foresee how much I appreciate a place to talk about my own stuff, even if only for myself - and this is what motivated the creation of the blog:

Writing about life and projects helps me understand who I am, which is the most important thing I can do for myself right now

I honestly have a very difficult time thinking about my own preferences for things, as well as my own identity, and it’s important for me to develop a sense of personality and authenticity, and being honest with myself more and more. Of course there is an aspect of showcasing what I do, but mostly it boils down to learning more about me, things I do and do not like, what is important for me and what isn’t, and where I want to head towards or not.

How

So, these are the tools I chose to set this thing up:

React

When you hold a hammer, everything starts to look like a nail. I do React-Native for a living today, which made React the obvious choice to make a portfolio. Funny enough, it didn’t even occur to me to deploy a React project on Heroku, since what I wanted was basically to generate a PDF. Instead, I started studying a way to make a static, styled HTML document with React - to later export it using some online tool (what an idea).

Gatsby.js

My friend Victor Landim gave me this tip (thanks buddy!). Gatsby is a static page builder based on React. It’s a brutal tool for generating content-oriented pages (i.e. blogs, portfolios) - which will become clear shortly. Gatsby allows for some very extensive templating and styling. For this particular application, I also used react-semantic-ui for the layout and components, which worked pretty fantastically. At this point, the site was basically the home and projects pages, without any content.

I still needed something to host the page, though.

Netlify

Netlify is an open-source, free hosting platform optimized for page builders (such as HUGO or Gatsby), and it’s ridiculously simple to set up through git - it took an afternoon to set it up, and comes with a complete git-integrated CI/CD solution with no additional cost. Finally, I bought the domain and set up the DNS in no time.

Watching it come to life was an unforgettably thrilling moment!

Markdown

By now, I was hearing a lot about the JAMstack, and it bothered me that all the data so far was basically a JSON object in the repo - there must be a better way to manage this content. So I tapped into one of the strongest tools offered by GatsbyJS: Static Queries.

Static Queries allow you to query content within the repository at compile-time, using GraphQL, and generate pages automatically, through JS code. In this case, I wanted to query all the available markdown files, and generate a page for each through a React template - and it would be also great to have a catalog made from the same files. I struggle with GraphQL a bit, but the tooling offered by Gatsby is so great I barely even broke a sweat.

By now, I was pretty satisfied with how it was coming together, but it was still very static - no animations, no nothing. I wanted to make something more dynamic and engaging.

P5

I’ve been a fan of Processing / p5 for a few years now - it’s the bread and butter for basically any digital artist. It would be awesome to use it to create a full-screen animation for the start page. Since p5 is javascript, there must be a way of embedding it into React. It turns out there is, and this makes me happy!

I basically stole a code snippet that creates a p5 canvas component and allows you to drop your sketch code inside. I even let it with the default animation for a few days until I figured out what to do with it. I’m very into Moiré Patterns, and maybe it would be cool to animate it and create something organic, and that’s how the home page animation was born! ✨✨✨

NetlifyCMS

This was the trickiest bit, for sure: I wanted a better experience writing and managing content for the page - a CMS, basically. I had fiddled with NetlifyCMS in the past and didn’t understand shit, so I decided to try it again now that I had more time with Gatsby. After many very cryptic bugs and a few hours of youtube and github issues, it eventually started working, and this is my test-run with it.

I have a gut feeling that Contentful would have work a lot nicer from the get go (Landim, help me out on this one), but I wanted to try Netlify’s solution first. Now that it’s working, though, I may not feel the need to change so soon.

Looking Forward

There are still a couple of pages I want to get done (inspirations, feedback), but for the time being, I think I’d rather focus on battle-testing the CMS, getting more and better content up (there’s a lot of exciting stuff to talk about!) and then figuring out where to go next. There are still many musical projects I want to catalog here, and I also need a place to put some sketches maybe.

Looking Back

I didn’t know how much I wanted to have this page until I made it, and it is a very personal experience indeed, but I feel like allowing myself to have it is important, if only as an exercise on self-affirmation and positive self-image.

I hope someone, someday may find inspiration in what I’ve been doing.