status.health logo status.health logo status.health

status.health® Blog - High-Level Design Document

status.health® Blog - High-Level Design Document

Overview

Create a professional Jekyll-based blog for status.health® that focuses on sexual health education, privacy technology, and product updates. The blog should be easy to deploy on GitHub Pages, include newsletter functionality, and maintain a business-aligned design.

Core Requirements

1. Design & Branding

2. Technical Stack

3. Key Features

Newsletter Integration

Content Organization

SEO & Analytics

Automated Notifications

File Structure

status-health-blog/
├── _config.yml                    # Main Jekyll configuration
├── .gitignore                     # Git ignore file
├── CNAME                          # Custom domain (blog.status.health)
├── Gemfile                        # Ruby dependencies
├── README.md                      # Full documentation
├── QUICKSTART.md                  # 5-minute setup guide
├── index.html                     # Blog homepage
├── about.md                       # About page
├── categories.html                # Categories listing
├── newsletter.html                # Newsletter signup page
├── 404.html                       # Custom 404 page
├── feed.xml                       # RSS feed template
├── robots.txt                     # SEO directives
├── sitemap.xml                    # XML sitemap
├── _layouts/
│   ├── default.html               # Base layout
│   ├── post.html                  # Blog post layout
│   ├── category.html              # Category page layout
│   └── page.html                  # Generic page layout
├── _includes/
│   ├── head.html                  # HTML head with meta tags
│   ├── header.html                # Site navigation
│   ├── footer.html                # Site footer (includes Status Health SPC copyright)
│   ├── newsletter-signup.html     # Newsletter form component
│   ├── attest-badge.html          # AI attribution badges
│   └── analytics.html             # Analytics code
├── _posts/
│   └── YYYY-MM-DD-title.md        # Blog posts
├── _categories/
│   ├── product-updates.md
│   ├── sexual-health.md
│   ├── privacy.md
│   └── announcements.md
├── assets/
│   ├── css/
│   │   ├── main.css               # Core styles and variables
│   │   ├── blog.css               # Blog-specific styles
│   │   └── categories.css         # Category page styles
│   ├── js/
│   │   ├── main.js                # Core functionality
│   │   └── newsletter.js          # Newsletter handling
│   └── images/
│       ├── logo.svg               # status.health® logo (provided)
│       ├── favicon.ico            # Browser favicon (provided)
│       └── og-image.png           # Social share image (provided)
├── _data/
│   └── navigation.yml             # Navigation structure
└── .github/
    └── workflows/
        └── notify-subscribers.yml # Automated notifications

Configuration Requirements

_config.yml must include:

Key Variables:

title: status.health® Blog
tagline: Private test verification meets community care
company_name: status.health®
copyright_company: Status Health SPC
newsletter_provider: convertkit/mailchimp/generic
newsletter_form_id: YOUR_FORM_ID
google_analytics: GA_TRACKING_ID
company_url: https://status.health

# Brand colors for CSS
primary_gradient: "linear-gradient(135deg, rgba(255,200,200,0.8), rgba(255,230,200,0.8), rgba(255,255,200,0.8), rgba(200,255,200,0.8), rgba(200,230,255,0.8), rgba(220,200,255,0.8), rgba(255,200,230,0.8))"

Content Structure

Blog Post Front Matter:

---
layout: post
title: "Post Title"
date: YYYY-MM-DD HH:MM:SS -0500
categories: [category1, category2]
author: "Author Name"
excerpt: "Brief description"
featured: true/false
attribution: human/claude/chatgpt
---

Category Pages:

Each category needs a corresponding file in _categories/ with:

---
layout: category
title: "Category Name"
category: category-slug
permalink: /categories/category-slug/
description: "Category description"
---

Quick Start Instructions

  1. Fork/Clone the repository
  2. Update _config.yml with your settings (5 required fields minimum)
  3. Branding assets already included in assets/images/ (logo.svg, favicon.ico, og-image.png)
  4. Configure newsletter provider (optional but recommended)
  5. Push to GitHub
  6. Enable GitHub Pages (Settings → Pages → Deploy from branch)
  7. Configure custom domain (optional)

Design Specifications

Typography:

Color Palette:

Visual Elements:

Spacing System:

Responsive Breakpoints:

Newsletter Implementation

Providers Supported:

  1. ConvertKit: Form-based integration
  2. Mailchimp: Action URL integration
  3. Generic: JavaScript API endpoint

SEO Requirements

  1. Meta Tags: Title, description, Open Graph, Twitter Card
  2. Sitemap: Auto-generated XML sitemap
  3. RSS Feed: Full-text feed at /feed.xml
  4. Robots.txt: Allow all, block admin directories
  5. Canonical URLs: Automatic via Jekyll SEO plugin
  6. Structured Data: Blog and article schema

Performance Targets

Deployment Notes

GitHub Pages:

DNS Configuration:

A records: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
CNAME: www → username.github.io

Future Enhancements

  1. Search Functionality: Client-side search using Lunr.js
  2. Comments System: Disqus or utterances integration
  3. Multi-language Support: i18n plugin
  4. Advanced Analytics: Event tracking, scroll depth
  5. PWA Features: Offline support, install prompt

Success Metrics

Important Branding Notes

Brand Guidelines Document

A comprehensive BRAND-GUIDELINES.md file should be included with:

This design document provides the complete specification for building the status.health® blog. All features should be implemented with privacy, inclusivity, and community care as primary considerations.