Migrating my blog from static site to Next.js

Blogging more about the work I do has always been in my mind. However, I kept procrastinating for years. From lack of time and "not good enough" self-speech, time has gone by without doing actual progress in this regard. After a two week vacation where I had time to disconnect and think, I set for myself the goal of blogging more often about topics that interest me. The goal of blogging is 2 fold:

• Learn new things. I've always believed that "writing is thinking". Those that work with me know that I tend to create way too many docs. I do it for my own sake of clarifying my understanding. Sometimes it also helps others ;)
• Build a network/audience. Building an audience is pretty hard and I don't expect it to happen anytime soon (damned! I don't even expect it to happen :lol:). However, reading through Doug's "Dont have F-You money? Build an F-You Network." made me think about how to make my career more resilient to single points of failure (aka: layoffs).

My requirements

As a first step, I decided to migrate my old static personal website built with Jekyll to a "proper website" built with latest web technologies. To start blogging, I didn't really need to migrate but I took the chance to learn more about:

• Vercel & Next.js: I've used them in the past for other side projects and wanted to simplify my stack.
• Cursor. Recently introduced at Shopify, I wanted to try it out on web dev project.

Furthermore, I was a fan of Phils Schmid's blog both on the content but also the look and feel.

Steps

1. Find a Vercel template

Blogging is not new. There are thousands of templates to choose from. After some research on Vercel templates, I found this template developed by Timothy Lin.

2. Create the Vercel project and repository.

With Vercel, it's straight forward to create a new project from a template. Just hit "Deploy" and you're done.

3. Migrate the content from old site

For that, is as easy as following the instructions in Github.

4. Customize the template

For now I barely did any customization as I focused mostly on getting it done. I did try to create a new logo SVG to replace the default one. I literally went to Phils Schmid's blog, took the following screenshot and used Cursor to generate the SVG for me:

Typed Cmd + L to open Cursor's chat and typed:

Create a SVG logo that resembles the one in the screenshot with the following initials "AC" and name "ALBERTO CASTELO"

It automatically provided me with the following SVG:

<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
  <style>
    .logo-text {
      fill: var(--color-text, #e0e0e0);
    }
    .logo-background {
      fill: var(--color-background, #1a1a1a);
    }
  </style>

  <!-- Circle with AC initials -->
  <circle cx="20" cy="20" r="18" class="logo-background" />
  <text
    x="20"
    y="26"
    font-family="Arial, sans-serif"
    font-size="16"
    class="logo-text"
    text-anchor="middle"
  >
    AC
  </text>

  <!-- Name -->
  <text
    x="55"
    y="24"
    font-family="Arial, sans-serif"
    font-size="14"
    font-weight="bold"
    class="logo-text"
  >
    ALBERTO CASTELO
  </text>
</svg>

Nice!

5. Write a first blogpost

Well... meta

6. Add my domain

In Vercel, I just went to the project settings and added my domain.

Then, I went to my domain register ("namecheap.com") and created the A Record and CNAME Record to point to Vercel's servers.

Take aways

• Setting up a free blogging platform is a matter of hours nowadays (it probably has been for years but I just realized it).
• Blogging is pretty hard. I have huge respect for those people that do it consistently over the years.
  • I'll try to not to take myself too seriously and just keep learning and keep posting.
  • The "not good enough" is a trap. Just ship it.
• I'm still a newbie with Cursor but:
  • I'm amazed by the suggestions it gives (this has been suggested by it).
  • It's super easy to provide context about the codebase that you are working on. For specific files, you can just click in the file and open the Cursor chat. It will automatically consider the file as context to provide to the LLM.
  • It's useful to design UI components. Specially for those of us that are not frontend devs. Just share an image of what you want to build with some prompt and the Chat will provide you with a fair solution.