Building a Blog with Nuxt.js: Designing

Today, blogs have evolved into essential platforms not only for recording thoughts but also for sharing knowledge, showcasing expertise, and building personal branding. For developers, in particular, blogs serve as indispensable tools to share code snippets, archive projects, and document technical insights.

This article introduces how to create a simplified version of the Nuxt.js-based blog you are currently viewing. I hope it inspires you to design your own blog.

Deciding the Page Layout

When planning the blog, I set a goal to make it as minimal as possible. This was because flashy design elements can quickly feel bored, leading to frequent revisions and ultimately reducing the time spent on writing.

I decided on a layout without thumbnails or cover images. Although these elements are not essential for delivering information, choosing or creating images often requires more time and effort than expected. I believed this could become a distraction from writing.

With this minimalist design concept and a rough layout in mind, I finalized the structure by referring to several inspiring blogs. Below are the references I used:

• https://sveltekit-blog-template.vercel.app/: This served as the main reference for the structural design.
• https://alpine.nuxt.space/: It inspired me to utilize the index page as an About page instead of strictly featuring blog posts.
• https://integer-blog.themepatio.com/: Provided inspiration for how to display images.
• https://tailwindcss.com/: Helped me decide how to implement colors, especially for dark mode.
• https://www.adhamdannaway.com/about: I referenced this for the About page layout, incorporating clickable snap images that redirect to Instagram.
• https://bepyan.github.io/: Inspired the archive page, where all posts and tags are displayed at a glance.

SSG vs. SSR

For static content like blogs and portfolios, Static Site Generation (SSG) is more suitable than Server-Side Rendering (SSR), so I chose SSG.

SSG generates static HTML files during the build process, which can then be served directly from a CDN, resulting in faster response times. In contrast, SSR generates HTML on the server for every request, which can cause delays in serverless environments like Vercel or Netlify due to cold starts. This latency may negatively impact SEO performance.

Deployment Platform

Among popular platforms supporting static page hosting—Vercel, Netlify, GitHub Pages, and Cloudflare Pages—I opted for Cloudflare Pages using the process of elimination:

• Vercel and Netlify were excluded due to unreliable pre-rendering support for the Nuxt-Image module.
• GitHub Pages was excluded because i used it a lot and the GitHub Actions script became too complicated in certain scenarios.

Features to Implement

While aiming for a minimalist blog, I designed the specifications to ensure that finding and reading posts would not be inconvenient from a visitor's perspective.

• Comments: Implemented using Giscus, with some customization to better align with my blog's design.
• Dark Mode: Although I don’t use it often, it’s helpful for reducing eye strain when reading at night.
• Table of Contents: Added to provide quick access to specific sections of long posts, improving navigation.
• Tags: Designed to allow filtering posts by topic, as I plan to write on a variety of subjects.
• Sharing Options: Enabled easy sharing on major platforms like Facebook, Twitter, and LinkedIn.
• Multi-language Support: Writing exclusively in Korean limits the audience and feedback opportunities, so I included English pages for broader accessibility.
• Code Highlighting : Implemented a code group that bundles multiple code blocks and manages them with tabs, and features that highlight specific lines. We also implemented a diff function that displays added and removed lines.

Which UI library to choose?

Blogs often have a content-centric, one-way structure, which generally requires fewer complex UI components. This characteristic makes them a great environment for experimenting with creating custom UI components. For this reason, I decided not to use UI frameworks like Vuetify or Nuxt UI and instead build the components myself.

Component Directory Structure

components
├── App
├── Archive
├── Blog
├── Error
├── Portfolio
├── The
└── content

The directory structure we will create is as above, and I am organizing the directory structure with the following rules.

• The : Place components that are sure to be used only once on a page. These are usually TheHeader, TheFooter, etc., which are used for layout.
• App : Place components that are commonly used on all pages and do not belong in the The directory. These are Button, Modal, etc.
• content : Place components that will be extended for use in the Nuxt Content module.
• The rest : Create directories according to the path of each page and place components that are only used on that page.