Personal blog and portfolio site for Ashish Singh Baghel — Cloud Solution Architect writing about Azure, DevOps, Kubernetes, and AI-driven engineering.
🌐 Live site:techhackswithash.com
| Layer | Technology |
|---|---|
| Framework | Next.js 15 — Pages Router, Static Site Generation |
| Styling | Tailwind CSS + @tailwindcss/typography |
| Content | MDX via next-mdx-remote |
| Syntax highlighting | rehype-highlight + highlight.js |
| Dark mode | next-themes |
| Icons | @heroicons/react |
| Deployment | Vercel |
├── pages/ # Next.js pages
│ ├── index.js # Homepage — hero, stats, videos, latest posts
│ ├── about.js # About — story, career timeline, skills, certifications
│ ├── blog/
│ │ ├── index.js # Blog listing
│ │ └── [id].js # Dynamic blog post page
│ ├── speaking.js # Speaking — talks and events
│ └── videos.js # Videos — curated YouTube content
├── posts/ # Blog content (MDX files)
├── components/ # Reusable React components
│ ├── card/ # Blog post card
│ ├── layout/ # Page layout wrapper with SEO meta tags
│ ├── logo/ # Site logo
│ ├── sections/ # Header and Footer
│ ├── social/ # Social icon links
│ └── youtube/ # YouTube embed component
├── lib/
│ ├── config.js # Site-wide config (name, author, social links)
│ └── posts.js # Blog post data utilities
├── public/ # Static assets
└── styles/ # Global CSS
git clone https://github.com/mechdeveloper/techhackswithash.com.git
cd techhackswithash.com
npm install
npm run devSite is now running at http://localhost:3000
| Command | Description |
|---|---|
npm run dev | Start dev server with Turbopack at localhost:3000 |
npm run build | Build for production |
npm run start | Serve the production build locally |
npm run lint | Run ESLint |
Create a new folder under /posts using the format YYYY-MM-DD-post-slug/ containing an index.mdx file:
posts/
└── 2026-05-21-my-new-post/
└── index.mdx
Start the file with a YAML frontmatter block:
---title: "My Post Title"date: "2026-05-21"excerpt: "A short description shown on the blog listing page."---
Your content here. Supports Markdown, GFM (tables, task lists), and JSX components.
## Code blocks are syntax highlighted```bashecho"hello world"```## Embed a YouTube video
<YouTubeid="VIDEO_ID" />The post will be picked up automatically on the next build — no registration needed.
Open pages/videos.js and add an entry to the videos array:
{id: 'YOUTUBE_VIDEO_ID',// the part after ?v= in the YouTube URLtitle: 'Your Video Title',description: 'A short description of what the video covers.',tags: ['Azure','DevOps'],isLive: false,// set to true for live stream recordings},The thumbnail is fetched automatically from YouTube. Clicking it plays the video inline.
All site-wide settings live in lib/config.js:
constconfig={siteUrl: 'https://techhackswithash.com',siteName: 'Tech hacks with Ash',author: 'Ashish Singh Baghel',social: {github: '...',linkedin: '...',youtube: '...',twitter: '...',},};The site is deployed on Vercel with automatic preview deployments for every branch push. Merging to main triggers a production deployment.
To deploy your own fork, click the button at the top of this README or run:
npm i -g vercel
vercel