Blog Template Usage Guide

April 5, 2025 · 491 words

This is a Next.js blog template. This post walks through the basic usage.

1. How to Write Blog Posts

Blog files in this repository should be placed in src/content/blog. You can use either Markdown (.md) or MDX (.mdx).

Configure the following metadata as needed:

  • title: Post title
  • date: Publish date
  • updated: Updated date
  • keywords: SEO keywords
  • featured: Whether to show on the homepage
  • summary: Post summary

2. Blog Configuration

All blog-related settings are centralized in src/lib/config.ts. This gives you:

  1. Centralized management: all settings in one place
  2. Type safety: TypeScript checks and autocomplete
  3. Reusability: avoid duplicated config across files
  4. Consistency: shared values across the site

2.1 Site Basics

site: {
  title: "Your blog title",
  name: "Your blog name",
  description: "Blog description",
  keywords: ["keyword1", "keyword2"],
  url: "https://your-domain.com",
  baseUrl: "https://your-domain.com",
  image: "https://your-domain.com/og-image.png",
  favicon: {
    ico: "/favicon.ico",
    png: "/favicon.png",
    svg: "/favicon.svg",
    appleTouchIcon: "/favicon.png",
  },
  manifest: "/site.webmanifest",
}

These values are used for:

  • Basic site information
  • SEO setup
  • Browser tab icons
  • Social sharing previews

2.2 Author Information

author: {
  name: "Your name",
  email: "[email protected]",
  bio: "Short bio",
}

Author info is used in:

  • Homepage profile area
  • RSS feed metadata
  • Post author metadata

2.3 Social Links

social: {
  github: "https://github.com/your-username",
  x: "https://x.com/your-username",
  xiaohongshu: "https://www.xiaohongshu.com/user/profile/your-id",
  wechat: "Your WeChat QR image URL",
  buyMeACoffee: "https://www.buymeacoffee.com/your-username",
}

These links appear in:

  • Homepage social links section
  • Navigation social icons

2.4 Comment System

giscus: {
  repo: "your-github-repo",
  repoId: "repo-id",
  categoryId: "category-id",
}

To use Giscus:

  1. Install the Giscus app on GitHub
  2. Enable Discussions in your repository
  3. Fill in the generated config values

2.5 Navigation Menu

navigation: {
  main: [
    {
      title: "Articles",
      href: "/blog",
    },
    // Add more navigation items here
  ],
}

The navigation supports:

  • Standard links
  • Dropdown items with submenus

2.6 SEO Settings

seo: {
  metadataBase: new URL("https://your-domain.com"),
  alternates: {
    canonical: './',
  },
  openGraph: {
    type: "website" as const,
    locale: "en_US",
  },
  twitter: {
    card: "summary_large_image" as const,
    creator: "@your-twitter-handle",
  },
}

These values control:

  • Search engine optimization
  • Social media cards
  • Site metadata

2.7 RSS Settings

rss: {
  title: "Your blog title",
  description: "Blog description",
  feedLinks: {
    rss2: "/rss.xml",
    json: "/feed.json",
    atom: "/atom.xml",
  },
}

These are used to generate:

  • RSS 2.0 feed
  • JSON Feed
  • Atom feed

3. How to Update Configuration

  1. Open src/lib/config.ts
  2. Update the values you need
  3. Save the file; Next.js rebuilds and applies changes automatically

Notes:

  • Make sure all URLs are valid
  • Ensure image URLs are accessible
  • Use full URLs for social links
  • After updates, verify:
  • Homepage display
  • Navigation menu
  • SEO metadata
  • Social sharing previews
  • RSS feeds

4. How to Generate RSS

Update the config in scripts/generate-rss.js, then run:

npm run generate-rss

5. How to Generate Sitemap

Update the config in scripts/generate-sitemap.js, then run:

npm run generate-sitemap