🇺🇸

Summary and Review: The Birth of a Dazzling Tech Blog - Modern Next.js Blog Series #30

Published on

This article is also published at it 邦幫忙 2022 iThome Ironman Contest

This is the 30th article in the series "Building a Dazzling Personal Blog from Scratch Using Modern Technologies like Next.js, ContentLayer, i18next, and More".

Over these 30 days, we have gone from nothing to creating a dazzling tech blog together using modern technology.

​
Show me the code & demo!

I've open-sourced the outcome of these 30 days into the "Next.js Tailwind Contentlayer Blog Starter" template project on GitHub.

Next.js Tailwind Contentlayer Blog Starter

​
Github repo

You can see all the code by visiting the repo URL below:

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter

Github repo

Feel free to use it to build your own tech blog. Just click the green "Use this template" or "Fork" button!

I'd also appreciate a "Star" to support me if you find this series helpful!

If you discover any bugs or want to add more features, feel free to open an issue or PR to collaborate!

​
Demo

You can play around with it here:

https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/

My personal blog https://easonchang.com/ is also developed using this template. The repo is here: https://github.com/Kamigami55/easonchang.com-next. It contains many more articles related to front-end development, feel free to check it out!

​
Looking back at these 30 days, what have we achieved

Together, we started from scratch and used the most modern front-end technologies to build a dazzling personal blog from the ground up, covering everything from basic environment setup to final website deployment and maintenance.

​
Review of the Series

This 30-day journey was divided into three phases:

During days 1 to 13, we created a blog with basic functionality that looked good.

From day 14 to 19, after completing code blocks, SEO handling, sitemap, and RSS, we met all the conditions for a tech blog.

And finally, from day 20 to 30, we continued to add more dazzling and practical features to make our blog stand out!

The 30-day itinerary is as follows:

(Links to the specific posts within the series)

​
Review of Front-end Technologies Used

​
Review of Implemented Features

In addition to basic blog functionalities, we also implemented the following cool features:

  • Writing posts by editing local Markdown / MDX files
  • Excellent web performance
  • SEO-friendly
  • Dark mode
  • Multilingual support in Chinese and English
  • Command Palette
  • Comment system
  • Page transition progress bar
  • RSS Feed
  • Sitemap
  • Readable code blocks

​
Future Prospects

I will continue to maintain the "Next.js Tailwind Contentlayer Blog Starter" project, as my personal blog (easonchang.com) is developed based on it.

I have many more ideas, and my blog will continue to evolve, as will this project!

Below are some features planned for the future, which might continue into articles 31, 32...:

(List of planned features)

​
About Me

I am Eason Chang, a full-stack engineer who loves creating challenges for myself.

If you found this series helpful or wish to follow more articles, feel free to follow me through various channels for further discussions and exchanges!

Personal blog: https://easonchang.com/

Facebook: https://www.facebook.com/chang.ying.hsiang

Twitter: https://twitter.com/EasonChang_me

Github: https://github.com/Kamigami55

LinkedIn: https://www.linkedin.com/in/easonchang101/