Getting Started with Event Horizon

Event Horizon is a clean, fast blog template built with Next.js 14, Tailwind CSS, and Markdown. No CMS, no database — just files.

One config file. Drop in your posts. Deploy anywhere.

Prerequisites

You need Node.js (v18 or later) and a terminal.

Step 1 — Clone and Install

bash
git clone https://github.com/yourusername/event-horizon.git my-blog
cd my-blog
npm install

Step 2 — Configure Your Site

Open config/site.ts — this is the only file you need to edit to fully rebrand the template.

ts
export const siteConfig = {
  name: 'My Blog',
  title: 'My Blog — Articles & Tutorials',
  description: 'Your site description here.',
  url: 'https://yourdomain.com',
  domain: 'yourdomain.com',
  author: {
    name: 'Your Name',
    bio: 'Short bio shown below each post.',
    avatar: '/images/avatar.png',
    youtube: 'https://youtube.com/@yourhandle',
    x: 'https://x.com/yourhandle',
  },
}

This single file controls the site name, URL, author info, social links, navigation, hero text, topic cards, newsletter, and contact form — everywhere at once.

Step 3 — Add Your Avatar

Place your photo at public/images/avatar.png. It appears in the author bio card below every post.

Step 4 — Set Up Environment Variables

bash
cp .env.example .env.local

Edit .env.local:

bash
NEXTPUBLICGA_ID=G-XXXXXXXXXX   # optional — Google Analytics

Step 5 — Write Your First Post

Create a Markdown file in content/blog/:

bash
content/blog/my-first-post.md

markdown
---
title: My First Post
description: A short description shown in search results.
date: 2025-01-01
author: Your Name
tags: [beginner]
published: true
---
Your content starts here...

The filename becomes the URL: my-first-post.md → /blog/my-first-post

Step 6 — Preview Locally

bash
npm run dev

Open http://localhost:3000 to see your site.

Step 7 — Build and Deploy

bash
npm run build

The out/ folder is your complete static site. Deploy it to any platform:

- Vercel — connect your repo, auto-deploys on every push - Netlify — connect your repo or drag & drop the out/ folder - GitHub Pages — push out/ to the gh-pages branch - Cloudflare Pages — build command: npm run build, output: out

> See the Deployment Guide for detailed instructions for every platform.

Project Structure

Here's what the repo looks like and what each part does:

event-horizon/
├── config/
│   └── site.ts          ← Edit this to configure your entire site
├── content/
│   └── blog/            ← Your Markdown posts live here
├── app/
│   ├── components/      ← Header, Footer, TOC, ShareButtons, etc.
│   ├── blog/[slug]/     ← Individual post page
│   ├── tags/[tag]/      ← Posts filtered by tag
│   ├── layout.tsx       ← Root layout
│   ├── page.tsx         ← Home page
│   ├── sitemap.ts       ← Auto-generated sitemap
│   └── rss.xml/         ← RSS feed
├── lib/
│   └── posts.ts         ← Markdown reading utilities
└── public/
    └── images/          ← Avatar and static images

What's Next?

- Read the Content Guide to learn how to write posts and customize every part of the site - Read the Deployment Guide for step-by-step deploy instructions - Check the Features Overview to see everything the template includes