Tech ingredients of this blog

When building a blog, choosing the right technology stack is crucial. Once you've decided on a stack, you need to find a suitable template to help you get started. In this blog post, we'll look at how I approached this problem, and the steps I took to create a custom blog template.

I started by looking at two templates: a simple and minimal one¹, and a more complex one² with lots of options and customization. I decided to build my own template from the minimal example to gain a better understanding of the code. I added TypeScript support, as it is a statically-typed language that helps catch errors early on in the development process.

To maintain consistency in the code formatting and avoid errors, I added ESLint and Prettier to the project. ESLint is a linting tool that enforces consistent code style and identifies common errors, while Prettier is a code formatter that ensures the code is easy to read and consistent.

To maintain a consistent commit message format, I added Commitlint and Husky. Commitlint enforces a conventional commit message format, while Husky installs a pre-commit git hook to ensure that the commit message follows the format.

To improve the functionality of the blog, I referred to the second template, which had more features. I picked a few functionalities like a dark mode switcher, Tailwind CSS, and Rehype and Remark plugins configuration. I then created my own layout components by referring to the second template.

I also wanted to keep an eye on the bundle size and site performance while adding new packages. To accomplish this, I added @next/bundle-analyzer, a package that visualizes the bundle size and helps optimize the code. Additionally, I added @vercel/analytics and Google Analytics 4 to monitor real-time performance of the website.

Overall, this approach helped me create a custom blog template that met my needs while maintaining code quality and performance. By building the template myself and adding essential packages, I was able to create a customized blog that suited my needs.

Before I conclude this post, I want to provide a brief overview of my package.json file:

{
  "private": true,
  "scripts": {
    "dev": "next",
    "dev:watch": "next-remote-watch ./src/posts",
    "build": "next build",
    "analyze": "cross-env ANALYZE=true next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md}\"",
    "prepare": "husky install"
  },
  "commitlint": {
    "extends": ["@commitlint/config-conventional"],
    "rules": {
        "type-enum": [
            2,
            "always",
            ["build","chore","ci","docs","feat","fix","perf","refactor","revert","style","test"]
        ]
    }
  },
  "dependencies": {
    "@headlessui/react": "latest",
    "@fontsource/inter": "latest",
    "@tailwindcss/forms": "latest",
    "@tailwindcss/typography": "latest",
    "@vercel/analytics": "latest",
    "cross-env": "latest",
    "image-size": "latest",
    "github-slugger": "latest",
    "gray-matter": "latest",
    "rehype-slug": "latest",
    "rehype-autolink-headings": "latest",
    "rehype-prism-plus": "latest",
    "rehype-preset-minify": "latest",
    "next": "latest",
    "next-pwa": "latest",
    "next-mdx-remote": "latest",
    "next-remote-watch": "latest",
    "next-themes": "latest",
    "mdast-util-to-string": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-cookie-consent": "latest",
    "remark-gfm": "latest",
    "remark-footnotes": "latest",
    "unist-util-visit": "latest"
  },
  "devDependencies": {
    "@commitlint/cli": "latest",
    "@commitlint/config-conventional": "latest",
    "@next/bundle-analyzer": "latest",
    "@svgr/webpack": "latest",
    "@types/node": "latest",
    "@types/react": "latest",
    "@vercel/og": "latest",
    "autoprefixer": "latest",
    "cssnano": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "eslint-config-prettier": "latest",
    "husky": "latest",
    "postcss": "latest",
    "prettier": "latest",
    "prettier-plugin-tailwindcss": "latest",
    "tailwindcss": "latest",
    "typescript": "latest"
  }
}

In upcoming blog posts, I will break down the setup of each feature or module in more detail. I also plan to publish a public template once I standardize it properly.