Introduction

The First Major Customization is to update the blog posts pages. it was done fairly easy by reading the official tutorial from vercel.

Blog summery page

The first feature is to edit the blog post consumption method. It is indeed hard to do update for each blog posts if we have to create a seperate HTML page fot them. After some searching from the web I find that it could be useful and fast if I were to take advantage on the official tutorial from vercel.

The tutorial suggests to use gray-matter to convert MarkDown into HTML, and to use Static Generation for generating necessnary data for static HTML page. I find this particularly useful for my use case: fast, easy and no need for a seperate function.

gray-matter is a library that help to fetch the front-matter (a format that could serve as metadata). In my project I defined the following metadata:

fullTitle:         Title for display in overall website
title:             Title for display in post content
titleHighLight:    Colored title for display in post content
tag:               Tag for the post
description:       Summary for the post
date:              Date of the post
month:             Month of the post
year:              Year of the post
img:               Image to the post

With this I can make the summary page for my webpage.

Blog post page

Using the metadata I can generate a nice format on the blog page. This is a whole new page to the modal pop-up feature in the original template.

The content has to be post-alike, therefore it has to be in a format that is easy to write. Again the module remark-html has come into my notice after some website search. It is handy for converting markdown into HTML format. Although it cannot convert a very complex syntax, it is enough to serve for blog post purpose.

The posts are then converted from markdown into HTML, with each of its own page thanks to Dynamic Routes feature in next.js. Then with some CSS this blog post page can be formatted and created.