liamka / next-your-home

🏠 Powerful Blog for you

0. 한글이 좋아요

1. What is it?

   • 🏠 Blog
   • 🛠 Tech stack

2. Why should I use it?

   • 😀 Easy to start
   • 🔥 Performance
   • 😲 Intuitive post grouping
   • 📔 Reading focused UI/UX
   • 🎨 Show your personality with colors
   • 🍻 Features

3. How can I start?

4. How can I customize?

5. Questions you might have

6. LICENSE

What is it?

🏠 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

Why should I use it?

😀 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...

How can I start?

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

   • this project use pnpm for package managing

   • if pnpm is not installed, visit pnpm install guide

     npm install -g pnpm

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

   port 3000 will be used by default

5. First post

   pnpm post

6. Build test

   pnpm build

   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

      

How can I customize?

• 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

Questions you might have!

🤔 Why not use gatsby?

1. Stricter than NextJs

2. Use graphql for content api

   • just use typescript
   • for the people don't know about graphql

3. Rely on gatsby community to implement some feature

🤔 How much fast you mean?

1. Run pagespeed test

   • desktop result: 100 / 100 / 100 / 100
   • mobile result: 100 / 97 / 100 / 100

2. Run Webpage Test: pretty good

3. Check build bundle size result below

   Page                                         Size     First Load JS
   ┌ ● /                                        1.46 kB        91.1 kB
   ├   /_app                                    0 B            70.3 kB
   ├ ● /[category]                              748 B          90.4 kB
   ├ ● /[category]/[pageNumber]                 832 B          90.5 kB
   ├ ● /[category]/[pageNumber]/[postTitle]     1.64 kB        96.8 kB
   ├ ○ /404                                     269 B          70.6 kB
   ├ ○ /500                                     269 B          70.6 kB
   ├ ● /category                                3.21 kB        78.1 kB
   └ ● /profile                                 2.68  kB       89   kB
   + First Load JS shared by all                70.3 kB
   ├ chunks/main-be00b42900d433cc.js            36.8 kB
   ├ chunks/pages/_app-764e610a6d9ea0f7.js      32.7 kB
   ├ chunks/webpack-3373b0f21806983f.js         827 B
   └ css/a36597fbcc4c45ff.css                   813 B

LICENSE

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

MIT