How It's Made - Tech Edition

UPDATE: Currently this website is built with Hugo Static Site Generator. As I have moved away from front-end development, I’ve migrated the website to Hugo for easier maintenance.

This website is build using Next.js and SSG (Static Site Generation). I use markdown to write the contents which turn into HTML on compile-time.

Core Website

Next.jsReact FrameworkWebsite
gray-matterParse front-matter from string or fileGithub
Highlight.jsJavaScript syntax highlighterGithub
remarkMarkdown processorGithub
remark-htmlSerialize markdown as HTMLGithub
remark-highlight.jsPlugin to highlight code blocks with highlight.jsGithub
remark-gfmPlugin for Github Flavored MarkdownGithub


I use TypeScript for all Node.js related projects.

Package Management

I’ve created a monorepo to manage everything related to this website. The front-end built with Next.js is a package along with some other packages.

I use lerna for managing the monorepo.

I choose to go with monorepo because, then everything related to my website will be in one place, and also it will enable better code sharing. Plus, I might create another PWA in the future for another experiment. If I do, I will be able to share the React Components between the website and PWA.


I’ve written multiple scripts to off-load some procedural works, such as

  • Generate a new post based on a predefined template

  • Generating post metadata by parsing front-matter

  • Markdown to HTML serialization

  • Generating a build for all packages etc.

Most of the scripts are written in TypeScript an executed with ts-node (a TypeScript execution and REPL for Node.js).

Others are written as bash scripts.


The design of this website is actually from a Hugo theme named Terminal. I loved it so much, that I recreated most of the components by watching its demo page. Also, icons are from FontAwesome and the favicon is from

Build and Deployment

Each package has its build command and the build procedure is defined in the root package. lerna automatically determines the precedence and executes those build commands.

The website is hosted on Vercel. The code of the monorepo is hosted on Github as a private repository. Vercel has access to the repository, so whenever I push code to my master branch, Vercel will automatically trigger build and deployment.

By default, all changes in any branch will create a preview build and changes in main (in my case master) will create a production branch.

But I’ve configured it to create preview deployments only from the dev branch. Thus changes on all other branches will result in canceled deployment.

What’s Next?

  • Create a serverless function to generate custom preview image from post title
  • Write some tests

Both of these goals have been fulfilled 🎉

I’ll be writing some tests, at least for the basic functionalities. This whole website and everything started as an experiment with new technologies. But now that I’ve turned it into my site and blog, I don’t want to break everything just because I was trying something new.

Thanks for reading, and have a nice day!