Welcome to the Herd Mentality blog repository! This is where we share our technical insights, tutorials, and experiences in data science, software engineering, and cloud technologies.

Want to write for the blog? Check out our Contributing Guide for detailed instructions on:

• Adding new blog posts
• Creating author profiles
• Using custom components
• Image management
• Best practices and style guidelines

• Node.js 14.x or higher
• npm or yarn

1. Clone the repository:

git clone https://github.com/herd-mentality/hm_blog.git
cd hm_blog

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

The site will auto-reload as you make changes!

Built with modern web technologies and best practices:

• Next.js - React framework with SSR and static generation
• TypeScript - Type-safe JavaScript
• Tailwind CSS 3.0 - Utility-first CSS framework
• MDX - Write JSX in markdown documents

• 📝 Multiple author support
• 🏷️ Tag-based organization (each tag gets its own page)
• 🔢 Table of contents generation
• 📊 Math display via KaTeX
• 📚 Citation and bibliography support via rehype-citation
• 🎨 Custom React components in blog posts
• 🗂️ Nested routing for blog posts

• 💻 Server-side syntax highlighting with line numbers (rehype-prism-plus)
• 🖼️ Automatic image optimization via next/image
• 🌓 Light and dark theme
• 📱 Fully responsive design
• ⚡ Lightweight (45kB first load JS)
• 🎯 Near-perfect Lighthouse scores

• 🔍 SEO-friendly with RSS feeds and sitemaps
• 📈 Analytics support (Plausible, Simple Analytics, Google Analytics)
• 🔒 Preconfigured security headers

Key directories and files:

my-blog/
├── components/          # React components
│   ├── InPostComponents.tsx  # Custom components for blog posts
│   ├── MDXComponents.tsx     # MDX component mappings
│   └── ...
├── data/
│   ├── blog/           # Blog posts (.mdx files)
│   ├── authors/        # Author profiles
│   ├── siteMetadata.js # Site configuration
│   └── headerNavLinks.ts
├── layouts/            # Page layout templates
├── pages/              # Next.js pages and routing
├── public/
│   └── static/
│       └── images/     # Blog post images
├── css/                # Global styles and themes
└── contentlayer.config.ts

• data/siteMetadata.js - Site metadata (title, description, social links, etc.)
• data/headerNavLinks.ts - Navigation menu links
• tailwind.config.js - Tailwind CSS theme customization
• css/tailwind.css - Global styles and color schemes
• css/prism.css - Code block syntax highlighting theme
• next.config.js - Next.js configuration and Content Security Policy

The site uses Tailwind CSS for styling. To customize the look:

1. Modify colors in tailwind.config.js
2. Update global styles in css/tailwind.css
3. Change code block themes by editing css/prism.css (or use Prism themes)

• components/InPostComponents.tsx - Custom blog post components (<Caption>, <Highlight>)
• components/MDXComponents.tsx - Maps HTML elements to custom React components
• components/social-icons/ - Social media icons (add more from Simple Icons)

npm run dev          # Start development server
npm run build        # Build for production
npm start            # Start production server
npm run analyze      # Analyze bundle size

The blog is deployed on Vercel, which provides seamless integration with Next.js:

1. Push your changes to the main branch
2. Vercel automatically builds and deploys
3. Visit your live site!

For other deployment platforms (Netlify, GitHub Pages, etc.), see the Next.js deployment documentation.

• Sheep icon: From IconScout by Icograms (color modified to #A5A5A5)
• Favicons: Generated via favicon.io

Ongoing development and feature planning tracked on Trello

This blog is built on the excellent Tailwind Next.js Starter Blog template by Timothy Lin.

MIT © Timothy Lin

Built with 🐏 by the Herd Mentality team