This is the source code of my personal blog felixmokross.dev. It is built with Next.js and Tailwind CSS. See this post for more information on the tech stack and how the blog works.

• Language: TypeScript
• Framework: Next.js, React
• Hosting: Vercel
• Content Source: GitHub
• Content Processing: unified
• Styling: Tailwind CSS
• Package Manager: pnpm
• Analytics: Plausible

The blog posts are hosted in a separate GitHub repository, the content repository. It has the following file structure:

• posts/ – All published posts are located in this directory.
  • example-post/ – Each post has a directory. The name of the directory is used as the post's slug.
    • post.md – This file contains the Markdown content of the post (including front matter).
    • … – The directory can contain any further assets used for the post.
  • another-post/
  • third-post/
  • …
• drafts/ – Drafts posts are created in this folder and are moved to posts to publish them. The blog does not read this folder.

The blog uses Static Site Generation (SSG) and therefore needs to be rebuilt and deployed when a post is added or updated. For this, the app exposes a deploy hook on Vercel. Whenever a pull request is merged on the main branch of the content repository, a GitHub Action calls the deploy hook, triggering a rebuild and deployment of the app. In the build, the posts are retrieved from the content repository to generate the static pages.

In the /app directory the routes are defined. They are:

• blog/ – Home page
  • [slug]/ – Post page

• Node.js 18.0.0 or later (needed for the Fetch API to be available, which is used in the RSS Feed and Sitemap scripts)
• pnpm

1. Create a .env file in the root directory to set the environment variables. .env.example can be used as a template.

2. Clone the repository and run the app in development mode.

   $ git clone https://github.com/felixmokross/felixmokross.dev
   $ cd felixmokross.dev
   $ pnpm install
   $ pnpm dev