My Own Space on the Internet and how it's alive!
A little bit of context
I've been a developer for a couple of years now and in all those years I haven't had a well though and decent space on the internet. First, it was college and the endless excuse of not having enough time (half true, half-lie). Then it was work, tight deadlines, new things to learn, and not much time to do it (debatable). And in the end, it was the fear of leaving my personal comfort zone, not having enough content, or not having any content at all.
Why Now
The idea for my personal site was peacefully laying on my mind for some time. Then, the COVID-19 outbreak took us by surprise, and suddenly everyone was in shock, including me. One of the ways I cope with stress and anxiety it's by being creative and productive, so earlier this year I decided this was the perfect time to start working on my own space.
What I Wanted
I had a group of specific requirements for my page:
It needs to be fast
It needs to be hosted as a Static Site on a CDN
It needs to have an easy content management
It needs to support multiple locales
I envision this as a space where people could learn a little about me, and also as a place where I can put thoughts, opinions, and really anything that I want to share with the world. Therefore, I build it with a very basic structure, catchy landing page, an about me page, an open-source page, and a blog.
What I ended up using
Considering what I wanted to achieve I already had two things pre-selected. I chose Netlify to host the site, manage builds, domains, and more stuff. I also went with Gatsby.js; a Static Site generator thas uses React, to create the UI and statically generate all the pages. The only piece that was missing and probably the most important for me was something that would make multi-locale content management an easy task. I've heard great things about Contentful, but I didn't have the chance to try it out, and this seemed like a perfect fit.
Discovering Contentful
I knew Contentful was a new headless CMS that was blazing fast, easy to use, language-agnostic, and most importantly it was a service. Besides that, I didn't know much about its features, caveats, and content modeling strategies. I found out that Contentful has a free learning platform, with a bunch of different courses for content authors, content modelers, and developers. In this platform, you can learn from the very basics to complex topics, like running data migrations directly into your CI/CD pipelines.
I started with a couple of basic authoring and modeling courses. The first thing I learned was that content modeling its one of the most important steps for any Contentful project. If you do it wrong, managing content could become a challenging task. You should take your time to review it and iterate as much as you need. This is your content hub, so it needs to be way more than ok.
I will dig deeper into how Contentful works but for this time lets try to put this as simple as possible. There's one big data container called Space, they have Content Types which are our custom blocks of data, and those are made up of fields like Text, Media, Dates, Locations, Booleans, JSON, Rich Text and References to other Content Types.
To put this in perspective it looks like this:
Referencing other Content Types is something very flexible that allowed me to not only reuse and share content but also to create proprietary complex Content Types.
When you think about how a CMS works its usually a bunch of content that's created and managed under the premise that would be used on a given page with a given design. Since Contentful isn't your regular CMS, content is treated as data that would be served through an API at any given client. The flexibility plus all the blows and whistles you would expect from a content hub like localization, content governance, and versioning not only makes it very easy to implement but also is a no brainer for my use case.
Revisiting Gatsby.js
These days if you can do it Static you should definitely do it. I knew that I wanted my page to be as fast and as simple as possible. I'm a huge React fan so for me, Gatsby.js was the only way of doing it. I have used it in the past, but I have never used it to truly autogenerate static sites from a content source. I thought that would be too much overhead, but I'm happy to say that I couldn't be more wrong.
Let's start with the basics, the concept behind Gatsby.js its pretty simple, you can fetch data from anywhere and use it to create static pages based on React Components. That sounds cool right, but it's not even the coolest part. It uses GraphQL, so all the external data can be query directly from an autogenerated schema. This means we don't need to be worried about managing the networking for our content at all.
Gatsby.js has a huge plugin inventory and one of those is the gatsby-source-contentful. This is an official plugin that you can use to fetch content from any given space without much effort. You just need to provide two options, your SPACE_ID and ACCESS_TOKEN, and the plugin will automatically fetch and load all your content into the GraphQL schema.
It works like this:
How everything works together
As you can tell Contentful and Gatsby.js work pretty well side by side. But let me explain to you how everything comes together on my page.
Pages Generation
Usually what you would do for a site like this is create pages based on your content and that would be it, but I wanted to have i18n support and I want to do it a little bit differently. You could use one of the i18n plugins available for Gatsby. Those are not that flexible and usually worked by having one template per locale. However, I wanted to have just one file per template and create the pages based on the different Contentful locales.
The gatsby-source-contentful plugin lets you query content by locale easily, but something odd is that this plugin doesn't expose the list of the available locales at your space. Which for some general things like navigation, redirects, or even changing locales would be helpful. The obvious way to do it would be to use the Contentful SDK or doing a direct call to the locales endpoint, but I knew this was an issue that other developers had so I decided to build a new Gatsby plugin to fetch this data, its called gatsby-source-contentful-locales.
With the locales list on my GraphQL schema, It was really easy to create all the pages. Since I'm using a subdirectory approach for internationalization on the URLs (domain/locale/path) I wanted to create a redirect page for each one that was created. Here is where the locales list was very useful. I'm checking on the client-side the locale of the user and I'm redirecting it that locale. If it's not supported I'm using the fallback/default locale of the space.
To put this in perspective the blog page works like this:
Automatic Builds on Content Changes
I didn't want to deal with manual deploys, even if those are just clicking on a button. I want everything to be as automated as possible. I used Netlify Build Hooks to trigger a new build any time content changes in my space. This does not only remove the middle man when publishing content, but it also gives me peace of mind that if something goes wrong with the build those new static assets won't be pushed to my production page. And I will have time to figure out why the build is broken.
Content Previews with Gatsby Cloud
I used a relatively new service call Gatsby Cloud (made by Gatsby itself) that has a couple of cool features. I went with the real-time previews. Integration was relatively easy because there's an add-on Contentful app ready to use. In some minutes and without much effort you would have a real-time preview service setup on your Contentful space.
Wrapping up
When I started working on this project I had no idea how many things I would learn by the end. I was looking for an easy way of putting content out there but in a very developer way. I'm very happy with the results and I'm so excited to use this architecture for future endeavors.
For me, Gatby.js and Contentful are a great combo if you want to have complete control over your site without the hustle of managing content in an odd way. It's so convenient because you can use all the latest Front End technologies, TypeScript type generation (stay tuned for that), and a robust ecosystem like React as a baseline.
I would highly recommend to try it out and see if it makes sense for you. There's a 5-minute tutorial that would help you set up a Gatsby project and a Contentful Space. Also if you ran into an issue, don't worry Gatsby.js has a huge community that's constantly growing so there's plenty of people willing to help.
I hope you enjoyed this post, and I want to let you know that hopefully I will be writing and publishing at least once per week.
It's all about getting out of your comfort zone ✌️