Last year, I came across the popular British YouTuber and productivity expert Ali Abdaal, and after consuming countless hours of his videos, I decided to start this blog to document my career as a software developer and now blog post writer. When looking up how to start a blog, almost every guide recommends using one of the many popular hosting platforms such as Wix, SquareSpace, or Wordpress. Being in the industry of web development, I wanted to have full control over the code, features, and content of my blog. Therefore, I decided to go a different, more exciting route. In this blog post, I will share how I created this blog using NextJS and Contentful, what I learned from it, and some of the mistakes I made along the way.
NextJS
NextJS is a web development framework created by Vercel and initially released in 2016. It builds on top of Facebook’s extremely popular framework, React, and adds useful new features. The most important feature of NextJs that makes it ideal for starting a blog is its ability to generate pages on the server when new content is added, which offers great performance without sacrificing Search Engine Optimization. I had my eyes on NextJs for a while before deciding to start the blog, and once I learned about this feature, I decided this was the perfect opportunity. To learn more about the framework, I watched Fireship.io’s quick start video, which does a great job of explaining all the important basics, and got started.
Theme
From my experience working in many different teams on many different projects, as well as a number of personal projects, I learned to never waste time reinventing the wheel. After the setup of the framework from the previous step was finished, I started looking for a pre-built blog template that I could use, and I landed on this one on the Bootstrap themes website. This template is open-source under the MIT license, meaning it’s free to use for any and all purposes for anyone who downloads it. Once I downloaded the source code, I started incorporating it into the NextJs architecture. The hardest part about this step was getting Bootstrap to work properly with NextJS, and for that I referred to this well-written article which illustrates multiple methods of installing it. I went with the first method since, in my opinion, it was the cleanest. In order to speed up my development process, I worked on the division of the theme’s static HTML into NextJS components using the dummy data that is provided in the template itself, without worrying about the content of the blog.
Contentful
Once I finished implementing the Bootstrap theme into the application, it was time to decide on the source of the data. My first instinct was to go with a document database such as Firebase, but this meant that I would have to spend a lot of time designing and implementing data models into the application. Additionally, adding new blog posts in the future would require creating JSON documents in the database, which is not very intuitive or exciting. For this reason, I decided to instead use Contentful. For those unfamiliar, Contentful is a content platform that combines an interactive and easy-to-use interface to model and create content with powerful APIs to deliver the content to any application that needs it. Unlike Wordpress, where the backend content is tied to the front end code, Contentful provides the freedom to use any one or many front end technologies. Furthermore, Contentful provides a blog post content model that’s added by default.
Puting it all together
At this point, I had a few articles added to Contentful; all that was left was to update the NextJS application to retrieve and display the data. Since I had zero knowledge on how to get this done, I headed to the contentful api documentation to find a starting point. The documentation was not easy to navigate, so instead I did some research on YouTube and I found a guide that does something very similar. The trickiest part to figure out was how to set up incremental static regeneration. ISR makes my life easier because when I add a new blog post on contentful, NextJS will automatically generate the page for it. As it turns out, all I had to do was to add a "revalidate" flag to the "getStaticProps" as explained in the videos and illustrated in the official NextJS docs.
Hosting
The last challenge I had to face before going live with the blog was hosting. Naturally, my first instinct was to go with Firebase static hosting. After my first deployment, I quickly realised that static hosting wouldn’t work with ISR without additional tinkering. After a good deal of research and a couple of attempts, I conceded that this type of hosting won’t cut it and isn’t worth the time investment to get it to work. Instead, I opted to use Vercel's highly compatible and free-to-start hosting as an alternative. The reason I went with this is that it’s a fast and hassle-free way to get started. Furthermore, if the blog becomes more commercial in the future, I can easily transition to a paid plan or a self-hosted alternative.
Conclusion
I started this blog to document my journey as a software consultant, and part of that journey is this blog itself, so it’s only natural that I write about it. This article explains at a high level how I chose NextJS to build the front end of the blog and Contentful as the back end source for the data, how I put everything together with the help of YouTube and NextJS documentation, and the solution I chose for hosting everything. In an upcoming blog post, I will create a quick start guide for anyone interested in deploying a similar blog. I will share the pre-configured NextJS code and data model for Contentful to make it.