Skip to content
Dijkstra Logo Dijkstra Docs

How to Recreate Blog

Overview

Section titled “Overview”

This guide explains how to recreate the Dijkstra Blog platform from the ground up.
The blog is built using Astro, focusing on performance, readability, and a content-first structure.

This process is useful if you want to:

  • Set up a new instance of the blog
  • Understand the project architecture
  • Contribute at a deeper technical level

1. Prerequisites

Section titled “1. Prerequisites”

Make sure you have the following installed:

  • Node.js (v18 or later recommended)
  • npm or pnpm
  • Git

Check versions:

Terminal window
node -v
npm -v
git --version

2. Create a New Astro Project

Section titled “2. Create a New Astro Project”

Initialize a fresh Astro project:

Terminal window
npm create astro@latest

Select:

  • Template → Minimal or Blog template
  • TypeScript → Yes (recommended)
  • Install dependencies → Yes

Navigate into the project:

Terminal window
cd your-project-name

3. Install Required Integrations

Section titled “3. Install Required Integrations”

Install core tools used in the Dijkstra Blog:

Terminal window
npm install @astrojs/mdx @astrojs/sitemap @astrojs/tailwind

Then add them to astro.config.mjs:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind';


export default defineConfig({
  integrations: [mdx(), sitemap(), tailwind()]
});

4. Project Structure

Section titled “4. Project Structure”

Recreate the folder structure:

src/
 ├── components/
 ├── layouts/
 ├── pages/
 ├── content/
 │    └── blog/
 └── styles/
  • components/ → Reusable UI elements
  • layouts/ → Blog post layout templates
  • pages/ → Static pages
  • content/blog/ → Markdown blog posts

5. Configure Content Collections

Section titled “5. Configure Content Collections”

Inside src/content/config.ts:

import { defineCollection, z } from 'astro:content';


const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date().optional(),
  }),
});


export const collections = { blog };

This ensures all blog posts follow the same structure.

6. Create a Blog Layout

Section titled “6. Create a Blog Layout”

Inside src/layouts/BlogLayout.astro:

---
const { title, description } = Astro.props;
---


<html>
  <head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <main>
      <slot />
    </main>
  </body>
</html>

7. Add a Sample Blog Post

Section titled “7. Add a Sample Blog Post”

Create src/content/blog/first-post.md:

---
title: My First Blog
description: Example post
pubDate: 2024-01-01
---


Welcome to the Dijkstra Blog platform built with Astro.

8. Run the Project

Section titled “8. Run the Project”
Terminal window
npm run dev

Open the local server URL to verify the blog loads correctly.

9. Build for Production

Section titled “9. Build for Production”
Terminal window
npm run build

This generates the optimized static site.

10. Deploy

Section titled “10. Deploy”

You can deploy using:

  • Vercel
  • Netlify
  • GitHub Pages
  • Any static hosting provider

Upload the dist/ folder generated after build.

Key Takeaway

Section titled “Key Takeaway”

The Dijkstra Blog architecture is designed to be:

  • Fast
  • Simple
  • Markdown-driven
  • Easy to scale

Recreating it requires only Astro, structured content, and clean component design.