Plumbiu's blog

Performance

Phone:

PC:

Features

• Static stite generate(SSG)
• Lightweight: 110kB first load JS(mostly react)
• Highly designed by remark and rehype
• Static syntax highlighting via shiki
• Light/dark theme width persistent storage and system theme listener
• Image optimization via sharp and next/image
• SEO friendly with RSS feed
• Module css an self-designed components
• Custom markdown rules via remark-directive: see custom-component.md and preview
• Component lazy load via IntersectionObserver

Customize

Directory

• data/posts: markdown files with category
• data/components: markdown custom component
• src/plugins: rehype and remark plugins
• src/styles: global style
• public/images: markdown static image, you don't need write the /images/ prefix, see getAssetImagePath in /src/utils/node/fs.ts file
• src/utils/node/markdown: markdown utils

File

• data/site.ts: site config data
• src/plugins/remark/data/variable.ts: inject variable in markdown, markdown content ${ bar.test.a } will be replaced with Test string
• src/constants.ts: edit PostDir variable if you don't want write the category post
• src/app/posts/styles/md.css: markdown style
• src/app/posts/styles/shiki.css: shiki style, generated by shiki-class-transformer
• scripts/feed.ts: rss data

Post

Front matter must have at least the following configuration to display post:

---
title: Title
date: Publish Date
desc: The article introduction, it can be a number, indicating that the introduction is the nth line of the article body (starting from 1)
---

Deploy to Github pages

Edit the RepoName in data/variable.ts file and BasePath in next.config.js file.

Warning

Github pages only support static resources, rewrites will not work, see next.config.js

However, you can create src/app/page.tsx src/app/list/page.tsx and src/app/list/[type]/page.tsx files to generate

// src/app/list/page.tsx
// src/app/page.tsx
import ArtlistAll from '@/list/[id]/[pagenum]/page'

export default function Art() {
  return (
    <ArtlistAll
      params={{
        type: 'blog',
        pagenum: '1',
      }}
    />
  )
}

// src/app/list/[id]/page.tsx
import ArtlistAll from './[pagenum]/page'
import { PostDir } from '@/constants'

interface Params {
  type: string
}
export async function generateStaticParams() {
  return PostDir.map((type) => ({
    type,
  }))
}

interface ListProps {
  params: Params
}

async function ArtList({ params }: ListProps) {
  const type = params.type
  return (
    <ArtlistAll
      params={{
        type,
        pagenum: '1',
      }}
    />
  )
}
export default ArtList