Content Manager’s Guide

This guide is for anyone responsible for managing content on this site. You don’t need technical knowledge — just follow these step-by-step instructions to add posts, update pages, manage images, and keep the site fresh.

Table of Contents

1. Understanding the Folder Structure
2. Adding a New Blog Post
3. Post Metadata (Front Matter)
4. Managing Essential (Featured) Posts
5. Adding SEO Metadata
6. Working with Images
7. Managing the Gallery
8. Editing Static Pages
9. Managing Navigation Menus
10. Previewing Your Changes
11. Publishing Workflow
12. Quick Reference Templates

Understanding the Folder Structure

Here’s where everything lives:

├── _posts/           # All blog posts go here
├── _pages/           # Static pages (About, Notes, Gallery, etc.)
├── _data/
│   └── settings.yml  # Site settings, navigation, author info
├── images/           # Post images and general images
│   └── gallery/      # Gallery-specific images
├── assets/           # Profile pictures, logos, other assets

Key folders you’ll work with:

• _posts/ — Where you add new blog posts
• images/ — Where you upload images for posts
• images/gallery/ — Where gallery images live
• _pages/ — Where static pages are stored
• _data/settings.yml — Where you update navigation and site settings

Adding a New Blog Post

Step 1: Create the File

Create a new file in the _posts/ folder with this naming format:

YYYY-MM-DD-your-post-title.markdown

Examples:

• 2024-03-15-how-to-manage-your-time.markdown
• 2024-03-20-lessons-from-product-management.markdown

Important rules:

• Always use the date format: YYYY-MM-DD (year-month-day)
• Use lowercase letters
• Replace spaces with hyphens (-)
• End with .markdown or .md

Step 2: Add Front Matter

Every post starts with “front matter” — metadata between two sets of --- lines. Here’s a basic template:

---
layout: post
title: "Your Post Title Here"
date: 2024-03-15 10:00:00 +0530
description: "A brief summary of your post (1-2 sentences)"
tags: [productivity, work]
image: '/images/your-image.jpg'
---

Step 3: Write Your Content

After the front matter, write your post using Markdown:

---
layout: post
title: "My First Post"
date: 2024-03-15 10:00:00 +0530
description: "An introduction to my thoughts on productivity."
tags: [productivity]
---

This is my first paragraph. You can write normally here.

## This is a Heading

Here's more content under the heading.

- Bullet point one
- Bullet point two
- Bullet point three

**This text is bold** and *this text is italic*.

[This is a link](https://example.com)

Step 4: Save and Publish

Save the file and follow the Publishing Workflow section.

Post Metadata (Front Matter)

Front matter controls how your post appears and behaves. Here’s what each field does:

Required Fields

Recommended Fields

Optional Fields

Complete Example

---
layout: post
title: "10 Lessons from 5 Years in Product Management"
date: 2024-03-15 10:00:00 +0530
description: "Key insights and hard-won lessons from my journey as a product manager at tech startups."
tags: [product-management, career, lessons]
image: '/images/product-lessons.jpg'
essential: true
---

Managing Essential (Featured) Posts

“Essential” posts appear on the homepage. These should be your best, most important, or evergreen content.

How to Mark a Post as Essential

Add essential: true to the front matter:

---
layout: post
title: "My Best Post"
date: 2024-03-15 10:00:00 +0530
description: "This is one of my best pieces."
tags: [featured]
essential: true
---

How to Remove a Post from Featured

Either:

• Delete the essential: true line, or
• Change it to essential: false

Best Practices for Essential Posts

• Limit to 4-8 posts — Too many defeats the purpose
• Choose evergreen content — Posts that stay relevant over time
• Update periodically — Refresh which posts are essential as you publish new content
• Quality over recency — Your best work, not necessarily your newest

Adding SEO Metadata

Good SEO helps people find your content through search engines.

In Post Front Matter

---
layout: post
title: "Your SEO-Friendly Title (50-60 characters)"
description: "A compelling description that includes your main keyword. Keep it under 160 characters for best results in search."
image: '/images/social-share-image.jpg'
canonical_url: "https://original-source.com/article"  # Only if republished
---

SEO Best Practices

1. Title: Keep under 60 characters. Include your main keyword.
   • Good: “10 Productivity Tips for Remote Workers”
   • Too long: “Here Are My Top 10 Favourite Productivity Tips That I Use Every Day When Working From Home”
2. Description: 150-160 characters. Summarize the post and include keywords naturally.
   • Good: “Discover 10 proven productivity tips for remote workers. Learn how to stay focused, manage time, and maintain work-life balance from home.”

3. Image: Always include a featured image. It appears when shared on social media.

4. URL (from filename): Keep it short and descriptive.
   • Good: 2024-03-15-productivity-tips-remote-workers.markdown
   • Bad: 2024-03-15-here-are-my-top-10-tips.markdown

Working with Images

Where to Store Images

• Post images: images/ folder
• Gallery images: images/gallery/ folder
• Profile/logo images: assets/ folder

Image Naming Conventions

Use lowercase, descriptive names with hyphens:

Good:
- productivity-workspace-setup.jpg
- team-meeting-2024.png
- book-cover-atomic-habits.jpg

Bad:
- IMG_2847.jpg
- Screenshot 2024-03-15.png
- my image (1).jpeg

Recommended Image Sizes

Adding Images to Posts

Featured image (in front matter):

image: '/images/my-featured-image.jpg'

Image within post content:

![Description of the image](/images/my-image.jpg)

Image with a link:

[![Description](/images/my-image.jpg)](https://link-destination.com)

Alt Text Best Practices

Alt text describes images for accessibility and SEO. Always include it.

![A wooden desk with a laptop, notebook, and coffee cup in morning light](/images/workspace.jpg)

Good alt text:

• Describes what’s in the image
• Is concise (under 125 characters)
• Includes relevant keywords naturally

Bad alt text:

• “image” or “photo”
• Empty alt text
• Keyword stuffing: “productivity desk workspace office work home”

Theme-Aware Images

The site supports different images for light and dark modes. For the profile picture and default post image:

• Dark mode: Neeraj-Hirani.png and default-post.jpg
• Light mode: Neeraj-Hirani-light.png and default-post-light.jpg

If you need to update these, provide both versions with the -light suffix for the light mode variant.

Managing the Gallery

The gallery page displays a collection of images with optional captions.

Gallery Location

Gallery images and configuration are in _pages/gallery.md.

Adding Images to the Gallery

Open _pages/gallery.md and add to the images list:

images:
  - image_path: '/images/gallery/your-new-image.jpg'
    caption: 'Image Title'
    description: 'A longer description of this image (optional)'

Gallery Image Fields

Example Gallery Entry

images:
  - image_path: '/images/gallery/bangalore-sunset.jpg'
    caption: 'Bangalore Sunset'
    description: 'View from my apartment balcony during monsoon season'

  - image_path: '/images/gallery/book-stack.jpg'
    caption: 'Current Reading List'

Gallery Best Practices

• Use consistent image dimensions (1200 x 800 recommended)
• Keep captions short (2-5 words)
• Use descriptions for context when helpful
• Name files descriptively

Editing Static Pages

Static pages like About, Notes, and Gallery live in the _pages/ folder.

Available Pages

Editing a Page

1. Open the file in _pages/
2. Edit the content below the front matter
3. Save and publish

Page Front Matter

---
layout: page
title: About
permalink: /about/
---

Your page content here...

Example: Updating the About Page

Open _pages/about.md:

---
layout: page
title: About
permalink: /about/
---

<img src="/assets/Neeraj-Hirani.png">

Hi, I'm Neeraj. I'm a Product Manager based in Bangalore.

## What I Do

I build products and write about work, life, and lessons learned.

## Get in Touch

Email me at: your@email.com

Managing Navigation Menus

The navigation menu is controlled in _data/settings.yml.

Current Navigation Structure

menu_settings:
  menu_items:
    - title: "Home"
      url: "/"
    - title: "Notes"
      url: "/notes/"
    - title: "Tags"
      url: "/tags/"
    - title: "Gallery"
      url: "/gallery/"
    - title: "About"
      url: "/about/"

Adding a New Menu Item

Add a new entry to the list:

menu_settings:
  menu_items:
    - title: "Home"
      url: "/"
    - title: "Notes"
      url: "/notes/"
    - title: "Projects"      # New item
      url: "/projects/"      # New item
    - title: "Tags"
      url: "/tags/"
    - title: "Gallery"
      url: "/gallery/"
    - title: "About"
      url: "/about/"

Remember: If you add a new menu item, you also need to create the corresponding page in _pages/.

Removing a Menu Item

Delete the corresponding - title: and url: lines.

Reordering Menu Items

Simply rearrange the items in the list. They appear in the order listed.

Previewing Your Changes

Option 1: Local Preview (Recommended)

If you have Jekyll installed locally:

1. Open Terminal
2. Navigate to the site folder
3. Run: bundle exec jekyll serve
4. Open http://localhost:4000 in your browser

Your changes appear instantly as you save files.

Option 2: GitHub Preview

1. Commit and push your changes
2. Wait 1-2 minutes for GitHub Pages to build
3. Check your live site

Note: This affects the live site, so use local preview for testing when possible.

What to Check Before Publishing

• Post title displays correctly
• Date is accurate
• Featured image loads
• Links work
• Tags appear correctly
• Content formatting looks right
• Mobile view looks good (resize your browser)

Publishing Workflow

For Git/GitHub Users

1. Make your changes (add post, edit page, upload images)

2. Check what changed:

   git status
   

3. Stage your changes:

   git add .
   

4. Commit with a descriptive message:

   git commit -m "Add new post: Your Post Title"
   

5. Push to publish:

   git push
   

Commit Message Examples

Add new post: 10 Productivity Tips for Remote Workers
Update about page with new bio
Add 5 new gallery images
Fix typo in March 15 post
Mark 'Time Management' post as essential

File Naming Checklist

Before committing, verify:

• Post filename: YYYY-MM-DD-title-with-hyphens.markdown
• Image filenames: lowercase, hyphens, descriptive
• No spaces in any filenames
• No special characters (use only letters, numbers, hyphens)

Quick Reference Templates

New Blog Post Template

---
layout: post
title: "Your Post Title"
date: YYYY-MM-DD HH:MM:SS +0530
description: "Brief description for SEO and social sharing (under 160 characters)"
tags: [tag1, tag2]
image: '/images/your-image.jpg'
---

Your post content starts here.

## First Section Heading

Paragraph text goes here.

## Second Section Heading

More content here.

- Bullet point
- Another bullet point

**Bold text** and *italic text*.

[Link text](https://example.com)

![Image alt text](/images/inline-image.jpg)

Essential/Featured Post Template

---
layout: post
title: "Your Best Content Title"
date: YYYY-MM-DD HH:MM:SS +0530
description: "This is one of your flagship pieces of content"
tags: [important-topic]
image: '/images/featured-image.jpg'
essential: true
---

Gallery Image Entry Template

  - image_path: '/images/gallery/image-name.jpg'
    caption: 'Short Title'
    description: 'Optional longer description'

New Page Template

---
layout: page
title: Page Title
permalink: /page-url/
---

Page content goes here.

Common Tasks Quick Reference

Need Help?

If something isn’t working:

1. Check file names — Correct format? No spaces?
2. Check front matter — Are the --- lines present? Is YAML syntax correct?
3. Check image paths — Does the file exist? Is the path correct?
4. Preview locally — Jekyll error messages are helpful
5. Check recent changes — Did something work before you changed it?

For technical issues beyond content management, consult a developer.