All In One, NextJs Blog Template๐Ÿ 

danpacho

danpacho

Posted on August 4, 2022

All In One, NextJs Blog Template๐Ÿ 

Introducing Projects ๐Ÿ˜ƒ

Visit Next Your Home Guide, built with this template!

Inspiration ๐Ÿง

I always think that writing is the best practice to fully absorb knowledge. But it was always difficult to make writing a habit. In order to make good writing habits, I thought making the best environment for writing is first.

After a long time of effort, I was able to create the blog environment that I wanted.

Easy to start, Reliable, Rich Feature and Fast Blog!

Demo of project ๐ŸŽ‰

dark-theme main page

dark-theme mobile page

I'm very happy about result of blog ๐Ÿ™‚

Goal of project โœ…

Tech ๐Ÿ› 

  1. Create a blog that anyone who's experienced development can start regardless of their skills.
  2. Performance and Maintenance.
  3. Add the features that are not supported on existing writing platforms.

Design ๐Ÿ›

  1. Taking off the consistent design that pursues simplicity and create different feelings.
  2. Content-Focused design
  3. Separates profiles into their own pages.
  4. Reduce fatigue by improving text access through pagination and reducing vertical scrolls.
  5. Categories, Series, and Tag based navigation.
  6. Easy to navigate posts
  7. Selectable Colors
  8. Familiar blogging UX

How it was built โš™๏ธ

  1. language ๐Ÿ“œ: typescript
  2. framework ๐Ÿ“ฆ: NextJs
  3. styling ๐Ÿ’…: styled-components
  4. markup ๐Ÿ“’: mdx

Rich Feature List ๐Ÿ–

  1. Light/Dark mode full support
  2. Integrate Profile with full feature of mdx
  3. Table of content on desktop/mobile
  4. Image optimization with next/image
  5. Automatic image size support for static/external
  6. Automatic pagination
  7. Recover scroll position when navigating to previous page
  8. Analyze visitors with Google Analytics! Run it on the partytown๐ŸŽ‰ thread and get the performance (partytown ๐Ÿ”Ž)
  9. Support sitemap, rss generation on build
  10. Math katex support (optional)
  11. Automatic post refreshing in dev mode
  12. Specific error informations about blog posts
  13. Decent code block with code copy button

etc...

How to Start? ๐Ÿ™Œ

Visit GitHub repo or Click the Next your home guide to start your writing journey!

I wrote down the kind explanation from start to finish!

Thank you for reading!

I hope it is useful for the blog starter๐Ÿ˜ƒ

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
danpacho
danpacho

Posted on August 4, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About