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
• Comment system via Gtihub API
• Custom markdown rules via remark-directive: see custom-component.md and preview
• Component lazy load via IntersectionObserver

Customize

Env

See .env.example file.

Directory

• posts: markdown files with category
• data/components: markdown custom component
• markdown/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/lib/node/markdown: markdown utils

File

• data/site.ts: site config data
• markdown/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

Uncomment (./.github/workflows/nextjs.yml)[./.github/workflows/nextjs.yml] and edit the RepoName in data/site.ts file and BasePath in next.config.ts file.

Warning

Github pages do not support api routes, so comments can't log in to Github.