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
| Name | Description | Link |
|---|---|---|
| Next.js | React Framework | Website |
| gray-matter | Parse front-matter from string or file | Github |
| Highlight.js | JavaScript syntax highlighter | Github |
| remark | Markdown processor | Github |
| remark-html | Serialize markdown as HTML | Github |
| remark-highlight.js | Plugin to highlight code blocks with highlight.js | Github |
| remark-gfm | Plugin for Github Flavored Markdown | Github |
Language
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.
Scripts
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.
Theme
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 favicon.io.
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!