┌──────────────────────────────────────────────────────────────┐
│ │
│ ██████╗ ██╗ ██████╗ ██████╗ │
│ ██╔══██╗██║ ██╔═══██╗██╔════╝ │
│ ██████╔╝██║ ██║ ██║██║ ███╗ │
│ ██╔══██╗██║ ██║ ██║██║ ██║ │
│ ██████╔╝███████╗╚██████╔╝╚██████╔╝ │
│ ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ │
│ │
│ A terminal-themed personal blog built with Next.js │
│ │
└──────────────────────────────────────────────────────────────┘
$ ls -la ./features- Terminal Aesthetic - Dark/light theme with terminal-inspired UI
- MDX Support - Write blog posts in MDX with custom components
- Syntax Highlighting - Code blocks styled like terminal output
- Responsive Design - Works on all devices
- SEO Optimized - Meta tags and structured data
- Fast Performance - Static generation with Next.js
- CI/CD Pipeline - Automated testing and deployment
$ cat ./stack.json| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| Content | MDX |
| Deployment | Vercel |
| CI/CD | GitHub Actions |
$ node --version
v20.x.x
$ yarn --version
1.22.x# Clone the repository
$ git clone https://github.com/WasathTheekshana/blog.git
# Navigate to project directory
$ cd blog
# Install dependencies
$ yarn install
# Start development server
$ yarn devOpen http://localhost:3000 to view the blog.
$ tree -L 2blog/
├── app/ # Next.js app router pages
│ ├── about/ # About page
│ ├── blog/ # Blog listing & posts
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── blog/ # Blog-specific components
│ ├── layout/ # Header, Footer
│ └── ThemeProvider.tsx # Dark/light theme
├── content/
│ └── posts/ # MDX blog posts
├── data/
│ └── aboutme.json # Personal information
├── lib/ # Utility functions
├── types/ # TypeScript types
└── public/ # Static assets
Create a new .mdx file in content/posts/:
$ touch content/posts/my-new-post.mdxAdd frontmatter and content:
---
title: "My New Post"
description: "A brief description"
date: "2024-02-21"
tags: ["devops", "terraform"]
published: true
author: "Wasath Theekshana"
---
Your content here...Edit data/aboutme.json to update your profile:
$ vim data/aboutme.jsonModify CSS variables in app/globals.css:
/* Dark theme */
[data-theme="dark"] {
--terminal-green: #3fb950;
--terminal-cyan: #58a6ff;
/* ... */
}
/* Light theme */
[data-theme="light"] {
--terminal-green: #1a7f37;
--terminal-cyan: #0969da;
/* ... */
}$ yarn dev # Start development server
$ yarn build # Build for production
$ yarn start # Start production server
$ yarn lint # Run ESLint
$ yarn typecheck # Run TypeScript checksThe project includes a CI/CD pipeline that automatically deploys to Vercel.
Required Secrets:
VERCEL_TOKEN # Vercel API token
VERCEL_ORG_ID # Organization ID
VERCEL_PROJECT_ID # Project IDGet these by running:
$ vercel link
$ cat .vercel/project.json$ cat LICENSEMIT License - feel free to use this for your own blog!
┌─────────────────────────────────────┐
│ Made with ♥ by Wasath Theekshana │
│ │
│ $ echo "Happy coding!" │
└─────────────────────────────────────┘