kuda.ai | code. guitar. life.

Building kuda.ai

created in March 2022, last update in July 2022

Blogging is for ever on my mind. With a full-time job and with being a parent, having the time to do side projects is not always easy. If you see the commit history of this website, you will notice that I started working on this website already in May 2021, almost a year back. That was one month prior to the birth of our daughter. Now is March 2022, and I finally invested more time into it.

Why I am building the website myself

There are plenty of opportunities to write and publish (e.g. medium, or blogs based on jekyll). If you build something, you usually want it to be used. If you have users, you need great experience. That's at least what I believe. And this website is a good chance to learn about many things:

  • Develop web experiences
  • Learn web frameworks (React, NextJS)
  • Understand how to deploy your frontend (Vercel makes this very easy)
  • Understand how the frontend interacts with backend and other services
  • Learn how to manage the content and data of a website (Contentful makes that very easy)
  • Learn how to build and deploy microservices / backends

You will find the source code of this blog on GitHub: https://github.com/davidkuda/blog-kuda-ai

The Tech Choices

  • JavaScript & React
  • Next.js Static Site Generation
  • Deployments on Vercel
  • Contentful

I like the idea of the "JAM-Stack": JavaScript, APIs and Markup. You have one html page, and you populate the data by calling apis with JavaScript.

The concepts of combining HTML with JavaScript in JSX was imo an ingenious invention. In the past I've built websites (example) where I have written long multiline html strings in JavaScript and used those strings to update the UI. JSX makes this experience very intuitive, and that's for sure one of the things I appreciate.

So I choose a JAM-Stack framework based on React: NextJS. NextJS is a great tech company, for instance, I enjoyed watching the launch of NextJS 12.

NextJS offers many starter projects with starter code. It makes some complicated things such as routing easy.

One popular concept that I have noticed was "Headless CMS". If you google it, you will find many results. The demand must be very high, given how many suppliers there are.

To manage my content, I have chosen Contentful. I think that Contentful is one of Berlin's greatest tech companies. On many websites that I visit, I check out how the website was built. And I have noticed that Contentful has been used on many great websites, e.g. codecademy (where my coding journey started in 2020).

I first thought that I'd keep my markdown files locally. Calling local files from the browser is normally a pain. Next.js makes it actually very simple to store data in local files. Nevertheless, I thought it would be better to use a backend for the content.

Deploying The Website

Vercel makes deployments super easy. I signed up to www.vercel.com with my GitHub account. On vercel, I choose a GitHub repository that I want to deploy. The deployment starts. Everytime I push new commits to that repo, the deployment starts again.

deployments-on-vercel

There is one thing which is not exactly ideal yet. When I add new content, the new content is not going to be rendered, until I manually trigger a new deployment. That's because of static side generation. The content is fetched at build time and then served as static files. The content is thus not fetched "live" from contentful. That's why redeployments are necessary.

Luckily, it is very easy to deploy. First, you install the vercel cli with npm i -g vercel. Then, you cd into the directory of your project and enter vercel. And it's done.

So the deployment still requires some manual effort, but that's acceptable.

Writing Content

To write content, I log in on www.contentful.com. On Contentful, you create "Content models". With content models, you define the fields of your content. For instance, this blog post has the following fields:

writing-content-on-contentful

  • id: A unique string without spaces that you see in the url
  • Creation Date
  • Title
  • Category (Code, Guitar, or Life)
  • Tags (e.g. #python, #react, etc.)
  • Description (The preview-text that you will see when you post the link in a chat such as in WhatsApp)
  • Body: The text content written in markdown