Revamp my site with Next.js and Tailwind CSS

#The reasons

So in the last article, I mentioned moving to using Hugo instead of Jekyll. It was great for a while but then it got me thinking. I always want to try things out with my site, but the fact that Hugo is written in Go is a bit of a pain for me. I have no experience with Go, and its template engine can be a bit of a pain to get started with.

Here’s another example of a simple if statement:

Hugo

{{ if (and (eq .Type "blog") (isset .Params "hascaniuse")) }}
<--! Do something if condition is true -->
{{ end }}

Jekyll

{% if page.is_post and page.hascaniuse %}
{% comment %}
Do something if condition is true
{% endcomment %}
{% endif %}

As someone working mainly with JavaScript, I find Jekyll to be much more intuitive. Then you might ask, why not use Gatsby 🤷‍♂️? To be honest, I dread the idea of having an enormous node_modules directory and then having to update all the dependencies just for a simple website. I love how Hugo works with just one single library. But will I accept its limitations, choose one of the pre-made themes and be done with it? I think not.

At some point, I did try Gatsby. But something didn’t click. It’s undoubted that Gatsby is popular. You get convenient plugins, little to no setup, and the fantastic power of GraphQL. But as someone said…

In reality, users (like myself) do not utilize GraphQL in Gatsby for what it’s worth. The real power comes when you have multiple data sources to build your website. For example, you load content from your local files, plus you have some content living in some headless CMS. In that case, GraphQL may become very useful. In other cases, it is overkill, I believe (unless you want to get the hang of GraphQL).

#The move

Some people find it hard to move from one site to another. For me, I already decided to start from the beginning then I will move my content later. But that not meant I was confident to build a site from scratch.

Instead, I used a starter template called Tailwind Nextjs Starter Blog. Huge thanks to Tim Lin for the minimal, lightweight, and super easy-to-customize blog starter.

This site also got BIG inspiration from Marcelo](https://twitter.com/marceloavf) Formentão](https://twitter.com/marceloavf). I can’t say thank you enough to him for his phenomenal design and customization of the original theme 🙏.

I hope with these setups, I can start my own Next.js and Tailwind CSS playground and get a better understanding of the possibilities.

#The deployment

At first, I wanted to continue to use Cloudflare Pages to host my site. But I found that it was not the best option (for Next.js app at least). The problem lies in the Image Optimization service that Next.js uses. Next.js is built by Vercel, of course, it will support their solution out of the box. Meanwhile, to use the same functionality in Cloudflare Pages would require a lot of work and Cloudflare’s solution is not available on the free tier. Therefore, I found it was better to use Vercel.