Blog

Supaplate에는 마크다운과 MDX 파일을 사용하여 블로그를 만들고 게시할 수 있는 최소한의 블로그 기능이 내장되어 있습니다.

./app/features/blog/docs 폴더에 예시로 작성된 블로그 게시물 몇 개가 있으니, 이를 참조하여 나만의 블로그 게시물을 작성할 수 있습니다.

블로그 페이지

블로그 기능에는 두 개의 페이지가 있습니다: /blog 와 /blog/:slug 입니다.

/blog 페이지

/blog 페이지의 loader 기능은 파일 시스템을 통해 './app/features/blog/docs` 폴더에 있는 모든 MDX 파일을 읽습니다.

frontmatter를 사용하여 블로그 게시물 리스트를 생성합니다.

초기 포맷은 다음과 같습니다:

---
title: <title>
description: <description>
date: <date>
category: <category>
author: <author>
slug: <slug>
---

<content>

/blog 페이지는 ./public/blog 폴더에 있어야 하며, {slug}.jpg 의 이름과 같은 이미지를 표시할 수 있습니다.

/blog/:slug 페이지

/blog/:slug 페이지의 loader 함수는 파일 시스템에서 {slug}.mdx의 이름과 같은 MDX 파일을 읽고 렌더링합니다.

또한 /blog/:slug 페이지는 './public/blog' 폴더에 있어야 하며 {slug}.jpg의 이름과 같은 이미지를 표시할 수 있습니다.

프리 렌더링에 대한 참고 사항

블로그 페이지는 빌드 시점에 프리 렌더링되며, react-router.config.js 파일에 있는 prerender 함수를 활용합니다.

// 프리 렌더링할 블로그 게시물 목록을 가져오는 방법은 다음과 같습니다.
const urls = (
  await readdir(path.join(process.cwd(), 'app', 'features', 'blog', 'docs'))
)
  .filter((file) => file.endsWith('.mdx'))
  .map((file) => `/blog/${file.replace('.mdx', '')}`)

export default {
  ssr: true,
  async prerender() {
    return [
      '/blog', // The blog page
      ...urls, // The blog posts
      '/sitemap.xml', // The sitemap
      '/robots.txt', // The robots.txt file
      '/legal/terms-of-service', // The legal pages
      '/legal/privacy-policy', // The legal pages
    ]
  },
}

새 블로그 게시물을 추가할 때마다 애플리케이션을 다시 배포(re deploy)하여 블로그 페이지를 재구성(rebuild) 합니다. 이렇게 하면 새 게시물을 포함한 블로그 페이지가 보이게 됩니다.

오픈 그래프(Open Graph) 이미지

블로그 기능에는 블로그 게시물에 대한 오픈 그래프 이미지를 자동으로 생성하는 /app/features/blog/api/og.tsx의 API 라우터가 포함되어 있습니다.

이미지는 Vercel의 OG 이미지 생성기를 사용하여 생성됩니다.