Morising Tech Blog
JAEN

About This Blog's Tech Stack

Published on:

Tech Blog Development Log: Tech Stack and Design Philosophy

Hello everyone! This is the very first post on the Morising Tech Blog. In this article, I’ll walk you through the tech stack and design principles behind this blog, along with the reasons why I chose each technology.

The mission of this blog is to document my daily learnings and the hurdles I overcome during work and study, hoping they might be useful to someone out there. To make this happen, I prioritized the following:

  • Clean, readable code blocks
  • SEO optimization for better search visibility
  • Bilingual support (Japanese and English)
  • A simple, distraction-free UI

In addition, to keep development manageable within my busy daily routine, I focused on:

  • "Done is better than perfect"
  • Keeping the architecture simple
  • Minimizing the learning curve

Tech Stack

Why These Technologies?

1. Next.js (App Router)

  • It allows me to flexibly use Static Site Generation (SSG), Server-Side Rendering (SSR), and Client-Side Rendering (CSR). Fast page loads via SSG/SSR are a huge plus for SEO.
  • The App Router makes managing layouts and routing intuitive, and it simplifies things like i18n and separating the admin dashboard.
  • It’s the de facto standard for modern frontend development with SSR capabilities.

2. Vercel

  • Deployment is lightning-fast and seamless for Next.js projects.
  • Domain management is straightforward within the platform.
  • The free tier is generous enough for personal projects.

3. Supabase

  • An open-source, Firebase-like BaaS. Since a blog is content-driven, I wanted an RDB (Relational Database). Being based on PostgreSQL, it’s also easy to migrate data later if needed.
  • It’s an all-in-one package for personal projects, handling auth, storage, and auto-generated APIs.
  • Setting up authentication is incredibly easy, keeping the learning curve low.

4. Markdown

  • It’s the standard for tech writing. I wanted to write in Markdown and implement real-time previews and syntax highlighting.
  • Using react-markdown and react-syntax-highlighter allows me to render tables and code blocks beautifully.

What’s Next?

  • Image upload and display features
  • Tagging and category systems
  • Search and filtering functionality

Morising Tech Blog aims to be "the tech blog I’ve always wanted to use." I’ll continue to evolve its features and design using the latest tech stacks.

I’ll be sharing more development logs and technical tips soon, so stay tuned!

Back to Home