next your home banner

🏠 Blog

1. Focus on Content
2. Focus on UI/UX
3. Focus on Performance
4. Focus on Intuitive Layout
5. Focus on Maintanance
6. Focus on Customizability

💡

Visit Next Your Home Guide built with this template

🛠 Tech stack

1. Language 📜
   • typescript
2. Framework ⚙️
   • NextJs
3. Styling 💅
   • styled-components
4. Markup 📝
   • mdx
     • 📌 More than markdown, it's rich
     • 📌 Use javascript expressions
     • 📌 Use JSX
     • 🔎 Explore more features on official MDX site
   • mdx-bundler
     • 📦 Import pure react component in .mdx post files
     • 🔎 Visit mdx-bundler for more config options

😀 Easy to start

• 📌 You know react
• 📌 Zero env configuration
• 📌 Easy deploying via vercel (Power of vercel + NextJs 🔎)
• 📦 Easy posting with built in CLI🎉 tool

🔥 Performance

• 📌 Light house score 100
• 📌 SEO support with next-seo (More info about this package 🔎)
• 📌 Bundle size optimized
  • Preact on production build (3kb) (What is Preact? 🔎)
  • etc...

😲 Intuitive post grouping

• 📌 Category based grouping
  • And you can describe the category
• 📌 Category pagination
  • Configurable with blog.config.ts
• 📌 Post series
  • Group your post by subtitle

📔 Reading focused UI/UX

• 📌 Intuitive UI Elements
• 📌 Easy navigation with post controller
• 📌 Less vertical scrolling for searching post
• 📌 Device width based, sized text content

🎨 Show your personality with colors

• 📌 You can set color for each category and post
• 📌 Your personal color will be adapted
• 📌 Different, but consistent design

🍻 Features

• 📌 Light/Dark mode full support
• 📌 Intergrate Profile with full feature of mdx
• 📌 Table of content on desktop/mobile (optional on mobile)
• 📌 Image optimization with next/image (More info about next/image 🔎)
• 📌 Automatic image size support for static/external
• 📌 Automatic pagination
• 📌 Recover scroll position when navigating to previous page
• 📌 Analyze visitors with Google Analytics! Run it on the partytown🎉 thread and get the performance (partytown 🔎)
• 📌 Support sitemap, rss generation on build
• 📌 Math katex support (optional)
• 📌 Automatic post refreshing in dev mode
• 📌 Specific error informations about blog posts
• 📌 Decent code block with code copy button
• etc...

1. Click Use this template button in this page and make own repo with 1commit

   • Get this repo to your local development env

2. Install packages

   pnpm i
   bash

   • this project use pnpm for package managing

   • if pnpm is not installed, visit pnpm install guide

     npm install -g pnpm
     bash

3. Update 📜 blog.config.ts, 📜 public/robots.txt

   1. blog.config.ts:
      • authorInfo
        • name
        • currentState
        • currentGoal
        • contacts
      • blogInfo
        • url: deploy url
        • siteName
        • subtitle
        • language
   2. at public/robots.txt:
      • update Sitemap to your deploy url

4. Dev test

   pnpm dev
   bash

   port 3000 will be used by default

5. First post

   pnpm post
   bash

6. Build test

   pnpm build
   bash

   build result in .next folder

7. Deploy with vercel

   1. make account
   2. choose blog repo
   3. follow vercel deploy step or click deploy button below

• Check config options in blog.config.ts
• Easy to customize
  1. 🙌 You know react
  2. 🙌 You know styled-components
  3. 🙌 Just modify the style that you want to
• Whole project includes README.md about structures and description

const LICENSE = "MIT 🎉"
const KOR = "감사합니다 😎"
const ENG = "Thanks 😎"
ts

MIT