Blog Content Management Guide

Complete documentation for managing the Nextgen Software blog system.

Table of Contents

1. System Overview
2. Quick Start Guide
3. Creating a New Blog Post
4. Editing & Updating Articles
5. Global Configuration (blogConfig.json)
6. Per-Article Customization
7. Blog Listing Page (React)
8. Blog Article Page (Hugo)
9. Featured Posts
10. Categories, Tags & Filters
11. Working with Images
12. Shortcodes Reference
13. Local Development
14. Troubleshooting
15. Quick Reference

System Overview

Architecture

The blog uses a hybrid Hugo + React architecture:

┌─────────────────────────────────────────────────────────────────────┐
│                        CONTENT LAYER                                 │
│   Markdown files (_index.md, card.md) with YAML frontmatter         │
└─────────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     HUGO PROCESSING                                  │
│   • Generates blog article pages (HTML)                             │
│   • Generates blogs.json (data for React listing)                   │
│   • Generates blogConfig.json (configuration for React)             │
└─────────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     OUTPUT                                          │
│                                                                      │
│   ┌─────────────────────┐    ┌──────────────────────┐              │
│   │ Blog Article Pages  │    │  Blog Listing Page   │              │
│   │    (Hugo HTML)      │    │     (React SPA)      │              │
│   │                     │    │                      │              │
│   │ • Author card       │    │ • Featured carousel  │              │
│   │ • Related articles  │    │ • Category filters   │              │
│   │ • Share buttons     │    │ • Search & sort      │              │
│   │ • Reading progress  │    │ • Pagination         │              │
│   └─────────────────────┘    └──────────────────────┘              │
└─────────────────────────────────────────────────────────────────────┘

Key Components

Key Files & Directories

content/blog/
├── _index.md                    # Blog landing page configuration
├── BLOG_GUIDE.md               # This documentation
├── img/                         # Shared blog images
└── tabs/
    └── YEAR/                    # Year-organized posts
        └── post-slug/           # Individual post folder
            ├── _index.md        # Main article content
            ├── card.md          # Card metadata for listings
            ├── section-*.md     # Content sections
            └── img/             # Post-specific images

layouts/
├── _default/blog-page.html      # Article page template
├── blog/blog-listing.html       # Listing page template
└── partials/blog/
    ├── config.html              # Configuration loader
    ├── author-card.html         # Author bio section
    ├── related-articles.html    # Related posts section
    ├── share-buttons.html       # Social sharing
    └── reading-progress.html    # Progress bar

assets/
└── blogConfig.json              # Global configuration file

src/components/blog/
├── BlogApp.tsx                  # Main React application
├── BlogFeaturedSection.tsx      # Featured posts carousel
├── BlogListSection.tsx          # Article grid
└── BlogPagination.tsx           # Pagination controls

Quick Start Guide

Creating a New Post in 5 Steps

Step 1: Create the folder structure

mkdir -p content/blog/tabs/2025/your-post-slug/img

Step 2: Create _index.md with required frontmatter

---
title: "Your Post Title"
date: 2025-01-30T00:00:00+03:00
draft: false
author: "Security Team"
category: "CYBERSECURITY"
image: "featured.jpg"
layout: blog-page
type: content
---

Your content here...



    

        

                
                    
                    
                        

    

      

          
          
Cybersecurity
      

      

        Get strategic guidance
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Development
      

      

        Tailored functionality
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Implementation
      

      

        Optimized deployment
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Post-implementing
      

      

        Expert-driven monitoring
        Get Started 
      
    


                    
                
            
        
    

Step 3: Create card.md for the listing page

---
title: "Your Post Title"
type: blog
link: "/blog/tabs/2025/your-post-slug/"
image: "featured.jpg"
category: "CYBERSECURITY"
author: "Security Team"
---

Step 4: Add your featured image to img/ folder

Step 5: Start Hugo server and verify

./hugo server --noHTTPCache --disableFastRender

Visit http://localhost:1313/blog/ to see your post.

Creating a New Blog Post

Step 1: Create the Post Folder

Create a new folder under the appropriate year using kebab-case naming:

# Create folder structure
mkdir -p content/blog/tabs/2025/your-post-slug
mkdir -p content/blog/tabs/2025/your-post-slug/img

Naming Convention:

• Good: zero-trust-implementation, api-security-guide
• Bad: Zero_Trust, APISecurityGuide, my post name

Step 2: Create the Main Content File (_index.md)

Create content/blog/tabs/2025/your-post-slug/_index.md:

---
# Required fields
title: "Your Complete Blog Post Title: With Optional Subtitle"
description: "SEO meta description (150-200 characters). Appears in search results."
date: 2025-01-30T00:00:00+03:00
draft: false
author: "Security Team"
category: "CYBERSECURITY"
image: "featured-image.jpg"
readTime: "8 min read"
layout: blog-page
type: content

# Optional fields
excerpt: "2-3 sentence summary for card display"
featured: false
featuredPosition: "main"
featuredOrder: 1
popularity: 75
tags: ["security", "compliance"]
---







Warning: File "introduction.md" not found at content/blog/introduction.md








Warning: File "main-content.md" not found at content/blog/main-content.md






    

        


    



    




    

        

                
                    
                    
                        

    

      

          
          
Cybersecurity
      

      

        Get strategic guidance
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Development
      

      

        Tailored functionality
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Implementation
      

      

        Optimized deployment
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Post-implementing
      

      

        Expert-driven monitoring
        Get Started 
      
    


                    
                
            
        
    

Step 3: Create the Card Metadata (card.md)

Create content/blog/tabs/2025/your-post-slug/card.md:

---
title: "Your Post Title"
type: blog
draft: false
date: 2025-01-30T00:00:00+03:00
description: "Brief description for the card"
image: "featured-image.jpg"
link: "/blog/tabs/2025/your-post-slug/"
category: "CYBERSECURITY"
author: "Security Team"
readTime: "8 min read"

# Optional - for filtering
tags: ["cybersecurity", "compliance"]
filters: ["CYBERSECURITY"]
topics: ["network-security"]
products: ["cyberquest-siem"]
contentType: "blog"
featured: false
priority: 5
popularity: 75

# Social sharing URLs
linkedin: "https://www.linkedin.com/sharing/share-offsite/?url=https://cyberquest.cloud/blog/tabs/2025/your-post-slug/"
facebook: "https://www.facebook.com/sharer/sharer.php?u=https://cyberquest.cloud/blog/tabs/2025/your-post-slug/"
---

Brief card body text (optional).

Step 4: Create Content Sections (Optional)

For longer posts, split content into sections:

Main file structure:

---
# frontmatter
---







Warning: File "section-1-intro.md" not found at content/blog/section-1-intro.md








Warning: File "section-2-overview.md" not found at content/blog/section-2-overview.md








Warning: File "section-3-details.md" not found at content/blog/section-3-details.md








Warning: File "section-4-conclusion.md" not found at content/blog/section-4-conclusion.md





    

        

                
                    
                    
                        

    

      

          
          
Cybersecurity
      

      

        Get strategic guidance
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Development
      

      

        Tailored functionality
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Implementation
      

      

        Optimized deployment
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Post-implementing
      

      

        Expert-driven monitoring
        Get Started 
      
    


                    
                
            
        
    

Section file (section-1-intro.md):

---
featured: true
partial: "partials/cards/text-section.html"
---

## Introduction

Your markdown content here...

- Bullet points
- **Bold text**
- `code snippets`

### Subsection Heading

More content...

Step 5: Add Images

1. Place images in your-post-slug/img/ folder
2. Reference by filename only in frontmatter: image: "my-image.jpg"
3. Recommended: Create both a featured image and card thumbnail

Editing & Updating Articles

Modifying Existing Content

1. Navigate to the post folder: content/blog/tabs/YEAR/post-slug/
2. Edit _index.md for article content changes
3. Edit card.md for how it appears in listings
4. Edit section files (.md) for specific content sections

Updating Metadata

Common updates to frontmatter:

# Change publication date
date: 2025-02-15T00:00:00+03:00

# Mark as draft (hides from production)
draft: true

# Update category
category: "COMPLIANCE"

# Update reading time (after content changes)
readTime: "12 min read"

# Boost/lower in popularity sorting
popularity: 95

Making an Article Featured

Update both _index.md and card.md:

# _index.md
featured: true
featuredPosition: "main"  # or "secondary"
featuredOrder: 1

# card.md
featured: true
priority: 1

Unpublishing an Article

Set draft: true in both files:

draft: true

Global Configuration (blogConfig.json)

The assets/blogConfig.json file controls global settings for the entire blog system. Changes here affect all blog pages.

File Location

assets/blogConfig.json

Complete Configuration Reference

{
  "theme": "light",

  "i18n": {
    "authorCard": {
      "writtenByLabel": "Written by",
      "defaultRole": "Cybersecurity Expert",
      "defaultBioTemplate": "Our {author} brings deep expertise in enterprise security...",
      "socialLinks": {
        "linkedin": "https://www.linkedin.com/company/nextgen-software/",
        "twitter": "https://twitter.com/nextgensoftware",
        "email": "[email protected]"
      }
    },
    "relatedArticles": {
      "sectionTitle": "Continue <span>Reading</span>",
      "viewAllText": "View all articles",
      "viewAllUrl": "/blog/"
    },
    "blogPage": {
      "authorRole": "Nextgen Software",
      "breadcrumbBlog": "Blog"
    },
    "featuredSection": {
      "eyebrow": "Featured",
      "heading": "Latest <span>Insights</span>",
      "subtitle": "Expert analysis and industry perspectives on cybersecurity"
    },
    "badges": {
      "trending": "Trending",
      "new": "New"
    },
    "pagination": {
      "previous": "Previous",
      "next": "Next",
      "loading": "Loading...",
      "loadMore": "Load More",
      "showingCount": "Showing {current} of {total} articles"
    },
    "errors": {
      "loadingText": "Loading articles...",
      "errorTitle": "Error Loading Blog Posts",
      "retryButton": "Try Again"
    }
  },

  "images": {
    "defaultBlogImage": "/img/blog-default.jpg",
    "blogImagePrefix": "/blog/img/"
  },

  "layout": {
    "heroStyle": "split",
    "featuredCount": 3,
    "carouselCategories": ["Security", "AI & Automation", "Compliance", "Cloud"],
    "itemsPerCarousel": 6,
    "latestArticlesPerPage": 9
  },

  "categoryColors": {
    "Security": "#e91e63",
    "AI & Automation": "#9c27b0",
    "Cloud": "#2196f3",
    "Compliance": "#ff9800"
  },

  "filters": {
    "categories": [
      { "id": "cat-security", "label": "Security", "value": "Security" }
    ],
    "topics": [
      { "id": "topic-siem", "label": "SIEM Solutions", "value": "SIEM" }
    ],
    "tags": [
      { "id": "tag-ai-ml", "label": "AI & Machine Learning", "value": "AI & ML" }
    ],
    "authors": [
      { "id": "author-security-team", "label": "Security Team", "value": "Security Team" }
    ]
  },

  "sortOptions": [
    { "value": "manual", "label": "Manual Order" },
    { "value": "date-desc", "label": "Date (Newest First)" },
    { "value": "date-asc", "label": "Date (Oldest First)" },
    { "value": "popularity", "label": "Most Popular" },
    { "value": "title-asc", "label": "Title (A-Z)" },
    { "value": "title-desc", "label": "Title (Z-A)" }
  ],

  "pagination": {
    "itemsPerPage": 9,
    "showPagination": true,
    "maxPaginationButtons": 7
  },

  "featuredPosts": {
    "showFeatured": true,
    "maxFeatured": 1
  }
}

Configuration Sections Explained

i18n (Internationalization)

Controls all user-facing text in the blog:

Layout Options

Category Colors

Define colors for each category (used in badges and accents):

"categoryColors": {
  "Security": "#e91e63",
  "AI & Automation": "#9c27b0",
  "Cloud": "#2196f3",
  "Compliance": "#ff9800"
}

Filters Configuration

Define available filter options for the React listing page:

"filters": {
  "categories": [
    { "id": "unique-id", "label": "Display Label", "value": "filter-value" }
  ]
}

Per-Article Customization

Any i18n field can be overridden at the article level via frontmatter. This allows customizing individual articles without changing global settings.

Override Priority

Article Frontmatter → Global Config (blogConfig.json) → Hardcoded Defaults

Available Override Fields

Add these to your _index.md frontmatter to override global settings:

Author Card Overrides

---
# Custom author information
authorRole: "Regulatory Compliance Specialist"
authorBio: "Custom bio text for this specific article..."
writtenByLabel: "Authored by"

# Custom social links
authorLinkedin: "https://linkedin.com/in/specific-author"
authorTwitter: "https://twitter.com/specific-author"
authorEmail: "[email protected]"
---

Related Articles Overrides

---
# Custom "Related Articles" section
relatedTitle: "More on <span>Compliance</span>"
relatedViewAllText: "Explore all compliance articles"
relatedViewAllUrl: "/blog/category/compliance/"
---

Complete Override Example

---
title: "NIS2 Directive Implementation Guide"
date: 2025-01-30T00:00:00+03:00
author: "Compliance Team"
category: "COMPLIANCE"
image: "nis2-guide.jpg"
layout: blog-page
type: content

# Per-article author overrides
authorRole: "Regulatory Compliance Specialist"
authorBio: "Our Compliance Team specializes in EU cybersecurity regulations including NIS2 and DORA, helping organizations navigate complex compliance requirements."
writtenByLabel: "Authored by"

# Per-article related section overrides
relatedTitle: "More on <span>Compliance</span>"
relatedViewAllText: "View all compliance articles"
---

Override Behavior

Blog Listing Page (React)

The blog listing page (/blog/) is powered by a React application that provides interactive filtering, searching, and browsing.

Features

• Featured Section: Carousel of featured/highlighted posts
• Category Carousels: Horizontal scrolling sections by category
• Filter Panel: Multi-select filters (category, topic, tag, author)
• Search: Full-text search across titles and descriptions
• Sorting: Date, popularity, alphabetical sorting
• Pagination: Configurable page size with navigation
• View Modes: Grid and list view options

How It Works

1. Hugo generates blogs.json containing all blog post metadata
2. React app loads this JSON on page load
3. All filtering, sorting, and search happens client-side (no API calls)

Data Flow

card.md files → Hugo processes → blogs.json → React loads → Interactive UI

React Components

Customizing the Listing Page

Change items per page: Edit blogConfig.json:

"pagination": {
  "itemsPerPage": 12
}

Change featured count:

"featuredPosts": {
  "maxFeatured": 3
}

Add new filter categories: Update the filters section in blogConfig.json.

Blog Article Page (Hugo)

Individual blog article pages are rendered by Hugo using the blog-page.html template.

Page Structure

┌─────────────────────────────────────────────────────────────┐
│  Reading Progress Bar (scroll indicator)                    │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  HERO SECTION                                               │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Category Badge    │    Hero Image                    │  │
│  │  Title                                                │  │
│  │  Excerpt                                              │  │
│  │  Author Avatar | Author Name | Date | Read Time      │  │
│  │                               Share Buttons           │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                              │
├─────────────────────────────────────────────────────────────┤
│  Breadcrumb Navigation                                      │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌────┐  ┌─────────────────────────────────────────────┐  │
│  │Nav │  │                                              │  │
│  │Dots│  │           ARTICLE CONTENT                   │  │
│  │    │  │                                              │  │
│  │    │  │  Markdown content rendered here...          │  │
│  │    │  │                                              │  │
│  └────┘  │  ┌──────────────────────────────────────┐   │  │
│          │  │        AUTHOR CARD                    │   │  │
│  ┌────┐  │  │  Avatar | Name | Role | Bio          │   │  │
│  │Share│ │  │  Social Links                        │   │  │
│  │Btns │  │  └──────────────────────────────────────┘   │  │
│  └────┘  └─────────────────────────────────────────────┘  │
│                                                              │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  RELATED ARTICLES SECTION                                   │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐          │
│  │  Article 1  │ │  Article 2  │ │  Article 3  │          │
│  └─────────────┘ └─────────────┘ └─────────────┘          │
│                                                              │
├─────────────────────────────────────────────────────────────┤
│  Support & Services Section                                 │
└─────────────────────────────────────────────────────────────┘

Template Components

Template Variables Available

Within the blog-page template, these variables are available:

{{ .Title }}              // Article title
{{ .Params.author }}      // Author name
{{ .Params.category }}    // Category
{{ .Params.excerpt }}     // Article excerpt
{{ .Params.image }}       // Featured image filename
{{ .Date }}               // Publication date
{{ .ReadingTime }}        // Estimated reading time (Hugo calculated)
{{ .Content }}            // Rendered markdown content

Featured Posts

How to Feature a Post

1. Update _index.md:

featured: true
featuredPosition: "main"  # "main" = large card, "secondary" = smaller
featuredOrder: 1          # Order among featured (1, 2, 3...)

2. Update card.md:

featured: true
priority: 1               # Lower number = higher priority

Featured Positions

Featured Post Limits

The system shows a maximum of 3 featured posts (configurable in blogConfig.json):

• 1 main position
• 2 secondary positions

If more than 3 posts have featured: true, they’re ordered by:

1. featuredOrder (ascending)
2. priority (ascending)
3. date (descending)

Removing Featured Status

Set featured: false in both _index.md and card.md.

Categories, Tags & Filters

Available Categories

Adding New Categories

1. Add to blogConfig.json filters:

"filters": {
  "categories": [
    { "id": "cat-new", "label": "New Category", "value": "New Category" }
  ]
}

2. Add color (optional):

"categoryColors": {
  "New Category": "#4caf50"
}

Tags Best Practices

• Use 3-6 relevant tags per post
• Use existing tags when possible (check blogConfig.json filters)
• Format: lowercase, hyphenated (zero-trust, incident-response)

Example Tags by Topic

Security: cybersecurity, threat-detection, incident-response, zero-trust Compliance: nis2, dora, gdpr, compliance Technology: ai, automation, cloud-security, api-security Products: siem, ndr, soar, threat-intelligence

How Filters Work

The React listing page filters by matching:

• category field in card.md
• tags array in card.md
• topics array in card.md
• products array in card.md
• author field in card.md

Working with Images

Image Locations

Referencing Images in Frontmatter

# Just the filename - Hugo finds it in the img/ subfolder
image: "my-featured-image.jpg"

Recommended Sizes

Image Optimization

1. Compress images before adding (TinyPNG, ImageOptim)
2. Use JPG for photos, PNG for graphics/screenshots
3. Keep file sizes under 200KB when possible
4. Use descriptive filenames (cloud-security-diagram.jpg, not image1.jpg)

Image Path Resolution

Hugo looks for images in this order:

1. content/blog/tabs/YEAR/post-slug/img/[filename]
2. Falls back to blogConfig.json → images.defaultBlogImage

Shortcodes Reference

Include Markdown Section

Warning: File "filename.md" not found at content/blog/filename.md

Includes another markdown file from the same directory. Use for splitting long posts into sections.

YouTube Video

Embeds a YouTube video with a styled card. Replace VIDEO_ID with the video’s ID from the URL.

Example:

Services Section

    

        

                
                    
                    
                        

    

      

          
          
Cybersecurity
      

      

        Get strategic guidance
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Development
      

      

        Tailored functionality
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Implementation
      

      

        Optimized deployment
        Get Started 
      
    


                    
                
                    
                    
                        

    

      

          
          
Post-implementing
      

      

        Expert-driven monitoring
        Get Started 
      
    


                    
                
            
        
    

Adds a “Support & Professional Services” call-to-action block. Typically placed at the end of articles.

Note: This is automatically included via the template’s support-services-section.html partial, so manual inclusion may cause duplication.

Local Development

Prerequisites

• Hugo binary (included as ./hugo in repo root)
• Node.js 18+ (for React components)
• npm or pnpm

Starting the Development Server

cd nextgen-site-redesign

# Start Hugo server with hot reload
./hugo server --noHTTPCache --disableFastRender

# Or use the convenience script
./server.sh

Development URL: http://localhost:1313/blog/

Rebuilding React Components

If you modify any React/TypeScript files in src/:

npm run build        # Production build
npm run dev          # Development build with watch mode

Preview Draft Posts

Draft posts (draft: true) are hidden by default:

# Include drafts in development
./hugo server --buildDrafts

Full Development Setup

# Terminal 1: Hugo server
./hugo server --noHTTPCache --disableFastRender

# Terminal 2: React watch mode (if editing React components)
npm run dev

Building for Production

# Build React components
npm run build

# Build Hugo site
./hugo build

# Output is in /public/ directory

Troubleshooting

Post Not Appearing in Listing

1. Check draft status:

   draft: false  # Must be false for production
   

2. Verify date is not in future:

   date: 2025-01-30T00:00:00+03:00  # Must be past or present
   

3. Ensure both files exist:

   • _index.md (article content)
   • card.md (listing metadata)

4. Check for YAML syntax errors:

   • Use a YAML validator
   • Common issues: missing quotes around colons, incorrect indentation

5. Rebuild and clear cache:

   ./hugo server --noHTTPCache --disableFastRender --gc
   

Images Not Loading

1. Verify image is in correct folder:

   content/blog/tabs/YEAR/post-slug/img/your-image.jpg
   

2. Check filename matches exactly (case-sensitive)

3. Verify image format is supported (jpg, png, gif, webp)

4. Check browser console for 404 errors

Featured Post Not Showing

1. Verify featured: true in both _index.md and card.md

2. Check featured count - only 3 posts can be featured

3. Verify featuredOrder is set (1, 2, or 3)

4. Check other featured posts - disable some if needed

Per-Article Overrides Not Working

1. Verify field name spelling:

   # Correct
   authorRole: "Custom Role"
   
   # Wrong
   author_role: "Custom Role"
   AuthorRole: "Custom Role"
   

2. Check frontmatter is in _index.md (not card.md)

3. Clear Hugo cache:

   ./hugo server --gc
   

YAML Syntax Errors

Common issues and fixes:

# Wrong - unquoted string with colon
title: NIS2: A Complete Guide

# Correct - quoted string
title: "NIS2: A Complete Guide"

# Wrong - incorrect indentation
author:
name: "John"

# Correct - proper indentation (2 spaces)
author:
  name: "John"

# Wrong - missing closing delimiter
---
title: "My Post"
draft: false

# Correct - has closing ---
---
title: "My Post"
draft: false
---

React Components Not Updating

1. Rebuild React bundle:

   npm run build
   

2. Hard refresh browser: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)

3. Check for TypeScript errors:

   npm run lint
   

Quick Reference

Frontmatter Cheat Sheet

Required Fields (_index.md)

---
title: "Post Title"
date: 2025-01-30T00:00:00+03:00
author: "Author Name"
category: "CATEGORY"
image: "image-filename.jpg"
layout: blog-page
type: content
---

Optional Fields (_index.md)

---
description: "SEO description"
excerpt: "Card summary"
draft: false
featured: false
featuredPosition: "main"
featuredOrder: 1
readTime: "8 min read"
popularity: 75
tags: ["tag1", "tag2"]

# Per-article overrides
authorRole: "Custom Role"
authorBio: "Custom bio..."
writtenByLabel: "Authored by"
authorLinkedin: "https://..."
authorTwitter: "https://..."
authorEmail: "email@..."
relatedTitle: "Custom Title"
relatedViewAllText: "Custom text"
relatedViewAllUrl: "/custom/url/"
---

Card Fields (card.md)

---
title: "Post Title"
type: blog
link: "/blog/tabs/YEAR/post-slug/"
image: "image-filename.jpg"
category: "CATEGORY"
author: "Author Name"
date: 2025-01-30T00:00:00+03:00
tags: ["tag1", "tag2"]
filters: ["FILTER"]
topics: ["topic"]
products: ["product"]
featured: false
priority: 5
popularity: 75
---

New Post Checklist

• Created folder: content/blog/tabs/YEAR/post-slug/
• Created _index.md with all required frontmatter
• Created card.md with card metadata
• Set correct link path in card.md
• Added featured image to img/ folder
• Referenced image correctly in frontmatter
• Set draft: false when ready to publish
• Added appropriate category and tags
• Tested locally with Hugo server
• Verified post appears in listing
• Verified article page renders correctly

File Structure Template

content/blog/tabs/2025/my-new-post/
├── _index.md        # Main article file
├── card.md          # Card/listing metadata
├── intro.md         # Optional: Introduction section
├── main.md          # Optional: Main content section
├── conclusion.md    # Optional: Conclusion section
└── img/
    ├── featured.jpg # Header/hero image
    └── diagram.png  # In-content images

Quick Commands

# Start development server
./hugo server --noHTTPCache --disableFastRender

# Start with drafts visible
./hugo server --buildDrafts

# Build for production
./hugo build

# Rebuild React components
npm run build

# Run linting
npm run lint

Last updated: January 2025