Building My Website: Journey and Tools

Creating this blog was a journey filled with trial and error, debugging late into the night, and reworking things until they felt just right. What started as a simple experiment turned into a fully functional site, optimized for speed, performance, and ease of use. While I’ve used different frameworks and CMS options in the past (looking at you, Gatsby), I finally landed on a tech stack that works best for me.

Technology Stack Breakdown

Frontend: Next.js

For the frontend, I chose Next.js. It offers a balance between server side rendering (SSR) and static site generation (SSG), which makes my blog load quickly while still being dynamic enough to adapt to future needs. The flexibility of Next.js allowed me to experiment with different approaches, and in the end, I opted for static site generation for most of my pages to improve load times.

Backend: WordPress (as a Headless CMS)

Yes, you read that right WordPress! While many associate WordPress with traditional blog sites, I’m using it as a headless CMS. That means I don’t use its built in themes or front end rendering, but instead, I pull content from WordPress’s REST API to feed into my Next.js frontend. This approach lets me take advantage of WordPress’s robust admin panel, plugin ecosystem, and content management features without being restricted by its theming system.

Database: MySQL

Since WordPress works best with MySQL, I decided to stick with its default database choice. It’s reliable, well-documented, and works seamlessly with the headless CMS approach I’m using.

Hosting: Netlify for Frontend, Linode for Backend

To keep things efficient, my frontend is deployed on Netlify, taking advantage of its automated build processes and CDN powered hosting. The backend, powered by WordPress, is hosted on Linode, which gives me greater control over my environment and scalability options. Linode’s pricing is also more predictable, making it a solid choice for hosting my WordPress backend.

Design Philosophy

While I primarily develop using JavaScript, I wanted to ensure my blog remained as optimized as possible. Using a static site generator (SSG) approach for most pages means that my blog doesn’t have to fetch data dynamically on each request, significantly improving load speeds.

I also made sure to optimize images and assets efficiently. With Netlify’s built in optimization tools and Next.js’s Image Optimization, I’ve been able to strike a balance between high quality visuals and performance.

Monorepos and Configuration

Managing multiple projects at once can get messy, but monorepos make life easier. My setup allows me to share configuration files between different parts of my stack and simplifies deployment. Since my blog is made up of both a frontend (Next.js) and a backend (WordPress), having a structured monorepo keeps everything in sync.

For local development and containerization, Docker is an essential part of my workflow. Here’s a quick example of how I organize my services:

version: '3.8'
services:
  frontend:
    image: node:latest
    volumes:
      - .:/app
    working_dir: /app
    command: npm run dev
    ports:
      - "3000:3000"

  backend:
    image: wordpress:latest
    volumes:
      - ./wordpress:/var/www/html
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: password
    ports:
      - "8080:80"

  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: wp_database
      MYSQL_USER: user
      MYSQL_PASSWORD: password