How I Built My Website
With the amount of work that went into re-building my current website, but with a whole new look and a whole bunch of new features, I thought now this would be a good chance to share an overview of how I built it.
The Idea
I've always liked to have a space on the internet where I can share what I'm currently building, and what I'm thinking about.
Also, I've challenged myself to create a blog because I've never been good at writing articles and I think this could improve my writing skills.
Tech Stack
Choosing the right tech stack is not always easy, especially in this modern world where you have many great technologies and tools to work with.
Next.js
Next.js is a React framework that gives you all the features you need for production.
With Next.js, you have a few different options when it comes to page rendering:
- SSR (Server-side rendering) - it will pre-render this page on each request server-side.
- SSG (Static-site generation) - it will pre-render this page at build time.
- ISR (Incremental Static Regeneration) - it will pre-render this page at build time and then on-demand.
I've opted for SSG for blog and ISR for the collection of my favorite and most-listened tracks on Spotify, which are automatically updated every 24 hours.
I personally enjoy using Next.js because it comes with built-in performance benefits and it offers a great developer experience.
Tailwind
Tailwind is a utility-first CSS framework that allows you to rapidly build modern websites without ever leaving your HTML.
When it comes to the styling, I enjoy using Tailwind every time, it is easy to pick up and significantly speed up my workflow. It has also a VS Code extension for its autocomplete which reduced the number of times I referenced class names in the docs.
Contentlayer
Contentlayer is a content SDK that validates and transforms your content into type-safe JSON data.
A simple solution to manage content is a CMS, but I wanted to have an option to simply use custom React components in my posts. When using a rich-editor in a CMS, it's not at all clear how to do this and you're generally limited to the handful of HTML elements that these tools can render.
MDX is an extension of Markdown that allows you to use custom React components, but I didn't want to focus on setting up MDX with Next.js, so I chose Contentlayer for a few reasons:
- You can just import content as you would any other library or component.
- It comes with built-in and configurable content validations.
- It supports live reloading with Next.js.
Contentlayer just provides the missing piece needed to maximize developer experience for modern frameworks.
Framer Motion
Framer Motion is a production-ready motion library for React.
I wanted to have some cool small animations that add the elements more life, so Framer Motion is a good choice with a great developer experience.
Here is an animation when I'm listening to something on Spotify created with Framer Motion:
Vercel
I deploy this site on Vercel because they are the company behind Next.js, and honestly, I really like their platform.
Whenever I push a change to my GitHub repository, it is automatically deployed using Vercel's GitHub Integration. This allows me to focus on code and don't think about how to deploy my website.
Design
The design doesn't come naturally to me, so I gravitate towards minimalist websites that emphasize content, but just because the design is simple, it doesn't mean it should be plain.
This design reflects my values of performance and simplicity.