·4 min read

Creating a blog with Nuxt

Jekyll이나 Hugo와 같은 정적 사이트 생성기로 블로그 만드는 것은 유연성, 빠른 로딩 속도, 개발자 친화적 등 다양한 장점이 있지만, 만들기 귀찮고 자칫하면 미완성 사이트 처럼 보일 수 있다는 단점이 있다. 이 글은 상기 단점을 줄이고 쉬운 블로그 개발을 위해서 작성되었다.

우리가 만들어볼 블로그의 특징은 다음과 같다.

  • Nuxt3 기반 프로젝트
  • 이 블로그를 축소한 디자인과 기능
  • UI 라이브러리를 사용하지 않고 직접 개발
  • 다크 모드 지원
  • 다국어 지원
  • 목차 지원

프로젝트 시작하기

이 프로젝트는 Node.js 인터프리터 및 패키지 매니저로 bun을 사용하는데, 유의미한 성능 이점을 얻을 수 있어서 독자들도 이용하길 권해본다.

Nuxt 새 프로젝트 생성

먼저, Nuxt 프로젝트를 생성해 보도록 하겠다.

bunx nuxi@latest init simple-blog

필자는 이 프로젝트의 이름을 simple-blog로 정했고, 패키지 매니저로 bun을 선택했다.

✔ Which package manager would you like to use?
bun
◐ Installing dependencies...                                       12:51:44 AM
bun install v1.1.27 (267afa29)

$ nuxt prepare
✔ Types generated in .nuxt                                        12:51:49 AM

+ nuxt@3.13.1
+ vue@3.5.5
+ vue-router@4.4.5

612 packages installed [4.47s]
✔ Installation completed.                                         12:51:49 AM

✔ Initialize git repository?
Yes
ℹ Initializing git repository...                                  12:51:51 AM

Initialized empty Git repository in /Users/hwan/WebstormProjects/product/simple-blog/.git/
                                                                   12:51:51 AM
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd simple-blog                                                  12:51:51 AM
 › Start development server with bun run dev

프로젝트 초기화가 완료된 뒤, 프로젝트가 정상적으로 실행되는지 확인을 해주겠다.

bun run dev

린팅 도구 설정 (선택사항)

Eslint를 직접 설치해서 사용해도 되지만, 우리는 Nuxt와 Eslint를 쉽게 통합해주는 Eslint Module을 사용하도록 하겠다.

nuxt module add eslint

Eslint 규칙은 eslint.config.mjs에 작성하면 되는데, 모듈 설치 후에 nuxt prepare를 입력해주면 자동으로 생성된다.

nuxt prepare

Prettier나 dprint와 같은 code formatter 사용하지 않으려 한다. 그 이유는 최근 Anthony Fu의 Why I don't use Prettier를 읽고 동의하게 됐기 때문이다. 다만 성격상array-bracket-newline 규칙이 필요해서 Eslint Stylistic을 대안으로 이용하고 있다.

bun i -D @stylistic/eslint-plugin-js

기본 구조 잡기

이 프로젝트에서는 각 페이지의 구조가 크게 다르지는 않아서 layout 컴포넌트를 사용하지 않을 것이며, app.vue 컴포넌트에 직접 아래와 같이 구조를 설계할 것이다.

<template>
  <div>
    <nuxt-loading-indicator />
    <the-header />
    <nuxt-page />
    <the-footer />
  </div>
</template>

페이지를 동기적으로 이동할 것이기 때문에 상단 프로그레스 바가 필요해서 빌트인 컴포넌트인 nuxt-loading-indicator을 사용했다. 그리고 아직 만들지 않은 the-header와 the-footer 컴포넌트로 구조를 잡아주었다.

Dev Nuxt Build Nuxt Blog