Configuration API Design: Making Static Sites Configurable

✍️

While static sites don’t have REST APIs, they do have configuration APIs—the interfaces through which developers customize and extend the site. In Jekyll-based sites like Analytiq Pages Starter, good configuration design is crucial for usability and maintainability.

What is a Configuration API?

In static site generators, the configuration API includes:

  • Site configuration (_config.yml): Global settings and metadata
  • Front matter: Page-specific configuration
  • Template variables: Data available in Liquid templates
  • Includes: Reusable components with parameters

Design Principles

1. Clear and Intuitive Structure

Configuration should be self-documenting:

# Good: Clear, hierarchical structure
header_pages:
  - title: "Products"
    url: "#"
    children:
      - title: "Overview"
        url: "/products"

# Bad: Flat, unclear structure
nav_products_title: "Products"
nav_products_url: "/products"

2. Sensible Defaults

Provide defaults that work out of the box:

# Theme provides sensible defaults
theme: analytiq-pages-theme

# Pagination has reasonable defaults
pagination:
  enabled: true
  per_page: 5  # Not too many, not too few

3. Consistent Naming Conventions

Use consistent patterns throughout:

  • kebab-case for URLs: /docs/getting-started/
  • snake_case for YAML keys: header_pages, site_map
  • camelCase for JavaScript variables (if needed)

4. Type Safety Through Documentation

Document expected types clearly:

# Site Configuration API
title: string          # Required
author:
  name: string         # Optional
  email: string        # Optional
pagination:
  enabled: boolean     # Required
  per_page: integer    # Required

Front Matter API Design

Front matter provides page-specific configuration:

Essential Fields

Every page should have:

---
layout: page          # Required: Which template to use
title: Page Title     # Required: Page title
permalink: /page/     # Recommended: Explicit URL
---

Optional but Useful

---
description: SEO description
image: Featured image URL
categories: Content organization
---

Template Variable API

Make data easily accessible in templates:

Site-Wide Variables

Your Company Name           # Site title
Your company provides innovative solutions and expert guidance for growing businesses.
     # Site description
{"title"=>"Products", "url"=>"#", "children"=>[{"title"=>"Overview", "url"=>"/products"}, {"title"=>"Features", "url"=>"/features"}]}{"title"=>"Docs", "url"=>"#", "children"=>[{"title"=>"Getting Started", "url"=>"/docs/getting-started"}, {"title"=>"User Guide", "url"=>"/docs/user-guide"}, {"title"=>"API Reference", "url"=>"/docs/api-reference"}, {"title"=>"Architecture", "url"=>"/docs/architecture"}]}{"title"=>"Resources", "url"=>"#", "children"=>[{"title"=>"Blog", "url"=>"/blog"}, {"title"=>"Talks", "url"=>"/talks"}, {"title"=>"Case Studies", "url"=>"/case-studies"}]}{"title"=>"Company", "url"=>"#", "children"=>[{"title"=>"About", "url"=>"/about"}, {"title"=>"Contact", "url"=>"/contact"}]}{"title"=>"Get Started", "url"=>"/contact", "button_style"=>"solid"}    # Navigation structure
This blog post serves as a comprehensive test of all Markdown features available in Jekyll. It demonstrates formatting, syntax, and rendering capabilities.

## Headers

All header levels are demonstrated below:

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

## Text Formatting

### Basic Formatting

- **Bold text** using double asterisks
- *Italic text* using single asterisks
- ***Bold and italic*** using triple asterisks
- ~~Strikethrough text~~ using double tildes
- `Inline code` using backticks
- <mark>Highlighted text</mark> using HTML

### Emphasis Variations

- **Bold** (alternative: __Bold__)
- *Italic* (alternative: _Italic_)
- ***Bold Italic*** (alternative: ___Bold Italic___)

## Lists

### Unordered Lists

- First item
- Second item
- Third item
  - Nested item 1
  - Nested item 2
    - Deeply nested item
- Fourth item

### Ordered Lists

1. First numbered item
2. Second numbered item
3. Third numbered item
   1. Nested numbered item
   2. Another nested item
4. Fourth numbered item

### Mixed Lists

1. Ordered item with unordered sub-items
   - Unordered sub-item 1
   - Unordered sub-item 2
2. Another ordered item
   - More unordered items
   - And another

### Task Lists

- [x] Completed task
- [x] Another completed task
- [ ] Incomplete task
- [ ] Another incomplete task
  - [x] Nested completed task
  - [ ] Nested incomplete task

### Definition Lists

Term 1
: Definition 1
: Alternative definition 1

Term 2
: Definition 2 with *italic* and **bold** text
: Another definition for term 2

## Links

### Inline Links

- [Link to Google](https://www.google.com)
- [Link with title](https://www.example.com "Example Website")
- [Relative link to about page](/about/)
- [Link to another blog post](/engineering/best-practices/building-scalable-systems/)

### Reference-Style Links

This is a [reference link][ref1] and here's [another one][ref2].

[ref1]: https://www.example.com "Example Reference"
[ref2]: /docs/getting-started/ "Getting Started Guide"

### Auto-links

- https://www.github.com
- <https://www.github.com>
- <user@example.com>

## Images

### Basic Image

![Alt text for image](/assets/images/blog/welcome.svg)

### Image with Title

![Scalable Systems](/assets/images/blog/scalable-systems.svg "Scalable Systems Architecture")

### Reference-Style Image

![API Design][api-image]

[api-image]: /assets/images/blog/api-design.svg "API Design Diagram"

## Code Blocks

### Inline Code

Use `console.log()` to output to the console. The `process.env.NODE_ENV` variable controls the environment.

### Code Blocks with Syntax Highlighting

#### JavaScript

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

const user = "World";
console.log(greet(user));

Python

def fibonacci(n):
    """Generate Fibonacci sequence up to n."""
    a, b = 0, 1
    while a < n:
        yield a
        a, b = b, a + b

# Usage
for num in fibonacci(100):
    print(num)

YAML

site:
  title: "My Site"
  author:
    name: "John Doe"
    email: "john@example.com"
  pagination:
    enabled: true
    per_page: 10

JSON

{
  "name": "Markdown Test",
  "version": "1.0.0",
  "features": [
    "headers",
    "lists",
    "code blocks",
    "tables"
  ]
}

HTML

<div class="container">
  <h1>Hello World</h1>
  <p>This is a <strong>test</strong> paragraph.</p>
</div>

CSS

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
  font-size: 2rem;
}

Shell/Bash

#!/bin/bash
echo "Installing dependencies..."
npm install
echo "Building project..."
npm run build

SQL

SELECT 
  users.id,
  users.name,
  COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5;

Ruby

class BlogPost
  attr_accessor :title, :content, :date
  
  def initialize(title, content, date)
    @title = title
    @content = content
    @date = date
  end
  
  def published?
    @date <= Date.today
  end
end

Liquid Template

{% if page.title %}
  <h1>{{ page.title }}</h1>
{% endif %}

{% for post in site.posts limit:5 %}
  <article>
    <h2>{{ post.title }}</h2>
    <p>{{ post.excerpt }}</p>
  </article>
{% endfor %}

Code Block Without Language

This is a plain code block
without syntax highlighting.
It preserves formatting and spacing.

Blockquotes

Simple Blockquote

This is a simple blockquote. It can span multiple lines. Each line starts with >.

Nested Blockquotes

This is the outer blockquote.

This is a nested blockquote. It can go multiple levels deep.

Back to the outer blockquote.

Blockquote with Formatting

This blockquote contains bold text, italic text, and inline code.

It can also contain:

  • Lists
  • Multiple items
  • And more

Blockquote with Code

Here’s a code example in a blockquote:

print("Hello from blockquote!")

Tables

Basic Table

Column 1 Column 2 Column 3
Row 1 Data 1 Data 2
Row 2 Data 3 Data 4
Row 3 Data 5 Data 6

Table with Alignment

Left Aligned Center Aligned Right Aligned
Left Center Right
More left More center More right
Even more Even more Even more

Table with Formatting

Feature Status Notes
Bold ✅ Working Italic works too
Code ✅ Working Inline code renders
Link ✅ Working Links are clickable
Strikethrough ✅ Working Text can be struck

Complex Table

Language Type Year Popularity
JavaScript Dynamic 1995 ⭐⭐⭐⭐⭐
Python Dynamic 1991 ⭐⭐⭐⭐⭐
Java Static 1995 ⭐⭐⭐⭐
C++ Static 1985 ⭐⭐⭐⭐
Ruby Dynamic 1995 ⭐⭐⭐

Horizontal Rules

Three or more hyphens, asterisks, or underscores create a horizontal rule:




Escaped Characters

Special characters can be escaped with backslashes:

  • *Not italic*
  • *Not bold*
  • `Not code`
  • [Not a link]
  • # Not a header

HTML Elements

Basic HTML

This is a div with custom styling.

HTML Lists

  • Custom styled list item 1
  • Custom styled list item 2

HTML Details/Summary

Click to expand This is hidden content that appears when you click the summary. - It can contain lists - And other markdown - **Including formatting**

HTML Abbreviations

HTML and CSS are web technologies.

Math (if supported)

Inline math: $E = mc^2$

Block math: \(\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}\)

Footnotes

Here’s a sentence with a footnote1. And another reference2.

Line Breaks

This line ends with two spaces.
This creates a line break.

This line ends normally. This continues on the same line.

Special Characters and Entities

  • Copyright: ©
  • Trademark: ™
  • Registered: ®
  • Em dash: —
  • En dash: –
  • Ellipsis: …
  • Less than: <
  • Greater than: >
  • Ampersand: &

Mixed Content Example

Here’s a paragraph with bold, italic, code, and a link.

  1. First item with bold text
  2. Second item with italic text
    • Nested item with code
    • Another nested item
  3. Third item

This is a blockquote with:

  • A list
  • Bold text
  • Inline code

And a code block:

console.log("Hello!");

Liquid Template Examples

Escaped Liquid Code

When documenting Liquid syntax, use {% raw %} tags:

{% raw %}

{{ site.title }}
{% if page.title %}
  <h1>{{ page.title }}</h1>
{% endif %}

{% endraw %}

Actual Liquid Code

The site title is: {{ site.title }}

{% if page.title %} This page has a title: {{ page.title }} {% endif %}

Excalidraw Diagram

Here’s an example of embedding an Excalidraw diagram:

{% include excalidraw-static.html file=”/assets/excalidraw/analytiq-pages-architecture.excalidraw” %}

Long Content Test

This section tests how the markdown renderer handles longer content blocks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Conclusion

This post demonstrates all major Markdown features including:

  • ✅ Headers (all 6 levels)
  • ✅ Text formatting (bold, italic, strikethrough)
  • ✅ Lists (ordered, unordered, nested, task lists)
  • ✅ Links (inline, reference, auto-links)
  • ✅ Images (inline, reference)
  • ✅ Code blocks (with and without syntax highlighting)
  • ✅ Blockquotes (simple, nested, with formatting)
  • ✅ Tables (basic, aligned, formatted)
  • ✅ Horizontal rules
  • ✅ Escaped characters
  • ✅ HTML elements
  • ✅ Footnotes
  • ✅ Line breaks
  • ✅ Special characters
  • ✅ Liquid template syntax
  • ✅ Excalidraw diagrams

All features should render correctly in the Jekyll static site generator.


Posted by Documentation Team on November 29, 2025

While static sites don’t have REST APIs, they do have configuration APIs—the interfaces through which developers customize and extend the site. In Jekyll-based sites like Analytiq Pages Starter, good configuration design is crucial for usability and maintainability.

What is a Configuration API?

In static site generators, the configuration API includes:

  • Site configuration (_config.yml): Global settings and metadata
  • Front matter: Page-specific configuration
  • Template variables: Data available in Liquid templates
  • Includes: Reusable components with parameters

Design Principles

1. Clear and Intuitive Structure

Configuration should be self-documenting:

# Good: Clear, hierarchical structure
header_pages:
  - title: "Products"
    url: "#"
    children:
      - title: "Overview"
        url: "/products"

# Bad: Flat, unclear structure
nav_products_title: "Products"
nav_products_url: "/products"

2. Sensible Defaults

Provide defaults that work out of the box:

# Theme provides sensible defaults
theme: analytiq-pages-theme

# Pagination has reasonable defaults
pagination:
  enabled: true
  per_page: 5  # Not too many, not too few

3. Consistent Naming Conventions

Use consistent patterns throughout:

  • kebab-case for URLs: /docs/getting-started/
  • snake_case for YAML keys: header_pages, site_map
  • camelCase for JavaScript variables (if needed)

4. Type Safety Through Documentation

Document expected types clearly:

# Site Configuration API
title: string          # Required
author:
  name: string         # Optional
  email: string        # Optional
pagination:
  enabled: boolean     # Required
  per_page: integer    # Required

Front Matter API Design

Front matter provides page-specific configuration:

Essential Fields

Every page should have:

---
layout: page          # Required: Which template to use
title: Page Title     # Required: Page title
permalink: /page/     # Recommended: Explicit URL
---

Optional but Useful

---
description: SEO description
image: Featured image URL
categories: Content organization
---

Template Variable API

Make data easily accessible in templates:

Site-Wide Variables

{{ site.title }}           # Site title
{{ site.description }}     # Site description
{{ site.header_pages }}    # Navigation structure
{{ site.posts }}           # All blog posts

Page Variables

{{ page.title }}           # Page title
{{ page.url }}            # Page URL
{{ page.content }}        # Page content
{{ page.date }}           # Publication date

Pagination Variables

{{ paginator.page }}              # Current page
{{ paginator.total_pages }}       # Total pages
{{ paginator.next_page_path }}    # Next page URL

Include API Design

Includes should be flexible and well-documented:

Parameter Documentation

{% comment %}
  Parameters:
    - file: (required) Path to .excalidraw file
    - mode: (optional) "static", "interactive", or "link"
{% endcomment %}
{% include excalidraw.html file="/path/to/file.excalidraw" mode="static" %}

Sensible Defaults

# Works with just required parameter
{% include excalidraw-static.html file="/diagram.excalidraw" %}

# Optional parameters enhance functionality
{% include excalidraw.html file="/diagram.excalidraw" mode="interactive" height="800px" %}

Error Handling

Clear Error Messages

When configuration is invalid:

# Jekyll will show clear errors:
# "Liquid Exception: Invalid syntax for include tag"
# "Configuration file contains invalid YAML"

Validation Patterns

  • Required fields: Document clearly, fail fast if missing
  • Type checking: Use appropriate YAML types
  • Value validation: Check ranges, formats where applicable

Documentation Best Practices

Provide Examples

Every configuration option should have examples:

# Example: Multi-level navigation
header_pages:
  - title: "Products"
    url: "#"
    children:
      - title: "Overview"
        url: "/products"

Show Common Patterns

Document typical use cases:

# Pattern: Simple page
---
layout: page
title: About
permalink: /about/
---

# Pattern: Blog post
---
layout: post
title: "Post Title"
date: 2025-11-29 10:00:00 -0400
categories: engineering
---

Versioning and Compatibility

Backward Compatibility

When adding new configuration options:

  • Make them optional with sensible defaults
  • Don’t break existing configurations
  • Document migration paths for breaking changes

Theme Versioning

# Gemfile
gem "analytiq-pages-theme",
    git: "https://github.com/analytiq-hub/analytiq-pages-theme.git",
    tag: "v0.1.8"  # Pin to specific version

Real-World Example: Analytiq Pages Starter

The Analytiq Pages Starter demonstrates these principles:

Clean Configuration Structure

# Site metadata (clear, required fields)
title: Your Company Name
author:
  name: Your Name
  email: "hello@yourcompany.com"

# Navigation (hierarchical, intuitive)
header_pages:
  - title: "Products"
    children:
      - title: "Overview"
        url: "/products"

# Pagination (sensible defaults)
pagination:
  enabled: true
  per_page: 5

Well-Documented APIs

  • API Reference documents all configuration options
  • Examples for every major feature
  • Clear parameter tables with types and descriptions

Conclusion

Good configuration API design makes static sites more maintainable and easier to customize. By following these principles—clear structure, sensible defaults, consistent naming, and comprehensive documentation—you create an interface that’s both powerful and approachable.

Check out our API Reference to see these principles in action with the Analytiq Pages Starter.


Posted by Engineering Team on November 22, 2025 <!DOCTYPE html>

Building Scalable Static Sites: Why Jekyll and GitHub Pages Scale | Your Company Name

Building Scalable Static Sites: Why Jekyll and GitHub Pages Scale

✍️

When building websites, scalability is often associated with complex server architectures and database optimization. But for many use cases, static sites built with Jekyll and deployed to GitHub Pages offer a surprisingly scalable solution. Here’s why.

The Static Site Advantage

Static sites are pre-rendered HTML files served directly to users. This simple architecture provides several scalability benefits:

1. Infinite Horizontal Scaling

GitHub Pages uses a global CDN (Content Delivery Network) that automatically distributes your site across multiple servers worldwide. This means:

  • No server management: GitHub handles all infrastructure
  • Automatic scaling: Traffic spikes are handled seamlessly
  • Global performance: Content is served from locations closest to users
  • Zero cost: Free hosting for public repositories

2. Built-in Caching

Static sites are inherently cacheable:

  • CDN caching: GitHub Pages CDN caches your content at edge locations
  • Browser caching: Static assets can be cached indefinitely
  • No database queries: Every request is just a file serve
# Jekyll's build process creates optimized static files
# No runtime processing needed

3. Cost Efficiency

Compare static site hosting costs:

  • GitHub Pages: Free for public repos
  • Traditional hosting: $5-50/month minimum
  • Cloud platforms: Pay-per-use, can get expensive with traffic

For a company website or documentation site, static hosting is often the most cost-effective solution.

Jekyll’s Build-Time Optimization

Jekyll processes your content at build time, not runtime:

Pre-rendering Benefits

  • Markdown to HTML: All content is converted to HTML during build
  • Asset optimization: Images and CSS are processed once
  • Link generation: All internal links are resolved at build time
  • SEO optimization: Meta tags and structured data are generated

Build Performance

Even large sites build quickly:

  • Incremental builds: Only changed files are rebuilt
  • Parallel processing: Jekyll can process multiple files simultaneously
  • GitHub Actions: Builds run in parallel with your deployments

GitHub Pages Architecture

GitHub Pages provides enterprise-grade infrastructure:

User Request
    ↓
GitHub CDN (Global)
    ↓
Edge Server (Nearest Location)
    ↓
Static HTML File
    ↓
User Browser

This architecture handles millions of requests per day without breaking a sweat.

When Static Sites Scale Best

Static sites excel for:

  • Company websites: Marketing pages, product information
  • Documentation: Technical docs, user guides, API references
  • Blogs: Content-focused sites with regular updates
  • Portfolios: Showcase sites for individuals or agencies

Scaling Beyond Static

If you need dynamic features, you can still use static sites as the foundation:

  • Forms: Use services like Formspree or Netlify Forms
  • Comments: Integrate Disqus or similar services
  • Search: Add client-side search with Lunr.js
  • Analytics: Use Google Analytics or Plausible

Best Practices for Scalable Static Sites

1. Optimize Assets

  • Compress images before committing
  • Use SVG for icons and simple graphics
  • Minimize CSS and JavaScript

2. Leverage CDN

  • GitHub Pages CDN handles global distribution
  • Use relative URLs for all internal links
  • Enable browser caching with proper headers

3. Incremental Builds

  • Use Jekyll’s incremental build flag locally
  • GitHub Actions only rebuilds changed files
  • Keep build times fast as your site grows

4. Content Strategy

  • Use collections for organized content
  • Implement pagination for large lists
  • Structure content with clear hierarchies

Conclusion

Static sites built with Jekyll and deployed to GitHub Pages offer exceptional scalability for many use cases. They combine simplicity, performance, and cost-effectiveness in a way that’s hard to beat.

The Analytiq Pages Starter demonstrates these principles—a complete website template that scales effortlessly from startup to enterprise.

Want to learn more? Check out our Architecture documentation to see how it all works together.


Posted by Engineering Team on November 15, 2025

<!DOCTYPE html>

Introducing Analytiq Pages Starter: Build Professional Websites in Minutes | Your Company Name

Introducing Analytiq Pages Starter: Build Professional Websites in Minutes

✍️

We’re excited to announce the Analytiq Pages Starter—a professional Jekyll-based starter template that makes it incredibly easy to build beautiful company websites, product pages, and documentation sites.

What is Analytiq Pages Starter?

Analytiq Pages Starter is a complete website template built on Jekyll and powered by the Analytiq Pages Theme. It combines the simplicity of static site generation with modern design and powerful features.

Why We Built It

Creating a professional company website shouldn’t require weeks of development or expensive design agencies. We built Analytiq Pages Starter to provide:

  • Zero Configuration: Get started in just two steps—fork the template and enable GitHub Pages
  • Modern Design: Built with Tailwind CSS for a clean, professional look that works on all devices
  • Complete Features: Blog, documentation, case studies, and more—everything you need out of the box
  • Free Hosting: Deploy to GitHub Pages at no cost
  • Easy Customization: Simple configuration files and Markdown content

Key Features

The starter includes everything you need for a professional website:

  • Multi-level Navigation: Dropdown menus and footer sitemap
  • Blog System: Ready-to-use blog with pagination, categories, and RSS feed
  • Documentation: Specialized docs layout with sidebar navigation
  • Responsive Design: Mobile-first approach that looks great everywhere
  • SEO Optimized: Built-in meta tags and sitemap generation
  • Excalidraw Integration: Embed interactive diagrams in your content
  • GitHub Actions: Automatic deployment workflow included

Getting Started

Creating your website is incredibly simple:

  1. Click “Use this template” on GitHub to fork the repository
  2. Enable GitHub Pages in Settings → Pages
  3. Your site is live!

No coding required—just customize the content and configuration to match your brand.

What’s Next?

We’ll be sharing tips, tutorials, and best practices for:

  • Customizing your site’s design and content
  • Adding new pages and blog posts
  • Optimizing for search engines
  • Advanced customization techniques
  • Deployment strategies

Stay Connected

We’ll be publishing new content regularly covering web development, Jekyll tips, and best practices for static sites. Be sure to subscribe to our RSS feed to stay up to date!

Have questions or suggestions? Get in touch and let us know!


Posted by Analytiq Team on November 1, 2025

       # All blog posts ```

Page Variables

Configuration API Design: Making Static Sites Configurable           # Page title
/engineering/jekyll/api-design-best-practices/            # Page URL
While static sites don't have REST APIs, they do have configuration APIs—the interfaces through which developers customize and extend the site. In Jekyll-based sites like Analytiq Pages Starter, good configuration design is crucial for usability and maintainability.

## What is a Configuration API?

In static site generators, the configuration API includes:

- **Site configuration** (`_config.yml`): Global settings and metadata
- **Front matter**: Page-specific configuration
- **Template variables**: Data available in Liquid templates
- **Includes**: Reusable components with parameters

## Design Principles

### 1. Clear and Intuitive Structure

Configuration should be self-documenting:

```yaml
# Good: Clear, hierarchical structure
header_pages:
  - title: "Products"
    url: "#"
    children:
      - title: "Overview"
        url: "/products"

# Bad: Flat, unclear structure
nav_products_title: "Products"
nav_products_url: "/products"

2. Sensible Defaults

Provide defaults that work out of the box:

# Theme provides sensible defaults
theme: analytiq-pages-theme

# Pagination has reasonable defaults
pagination:
  enabled: true
  per_page: 5  # Not too many, not too few

3. Consistent Naming Conventions

Use consistent patterns throughout:

  • kebab-case for URLs: /docs/getting-started/
  • snake_case for YAML keys: header_pages, site_map
  • camelCase for JavaScript variables (if needed)

4. Type Safety Through Documentation

Document expected types clearly:

# Site Configuration API
title: string          # Required
author:
  name: string         # Optional
  email: string        # Optional
pagination:
  enabled: boolean     # Required
  per_page: integer    # Required

Front Matter API Design

Front matter provides page-specific configuration:

Essential Fields

Every page should have:

---
layout: page          # Required: Which template to use
title: Page Title     # Required: Page title
permalink: /page/     # Recommended: Explicit URL
---

Optional but Useful

---
description: SEO description
image: Featured image URL
categories: Content organization
---

Template Variable API

Make data easily accessible in templates:

Site-Wide Variables

{{ site.title }}           # Site title
{{ site.description }}     # Site description
{{ site.header_pages }}    # Navigation structure
{{ site.posts }}           # All blog posts

Page Variables

{{ page.title }}           # Page title
{{ page.url }}            # Page URL
{{ page.content }}        # Page content
{{ page.date }}           # Publication date

Pagination Variables

{{ paginator.page }}              # Current page
{{ paginator.total_pages }}       # Total pages
{{ paginator.next_page_path }}    # Next page URL

Include API Design

Includes should be flexible and well-documented:

Parameter Documentation

{% comment %}
  Parameters:
    - file: (required) Path to .excalidraw file
    - mode: (optional) "static", "interactive", or "link"
{% endcomment %}
{% include excalidraw.html file="/path/to/file.excalidraw" mode="static" %}

Sensible Defaults

# Works with just required parameter
{% include excalidraw-static.html file="/diagram.excalidraw" %}

# Optional parameters enhance functionality
{% include excalidraw.html file="/diagram.excalidraw" mode="interactive" height="800px" %}

Error Handling

Clear Error Messages

When configuration is invalid:

# Jekyll will show clear errors:
# "Liquid Exception: Invalid syntax for include tag"
# "Configuration file contains invalid YAML"

Validation Patterns

  • Required fields: Document clearly, fail fast if missing
  • Type checking: Use appropriate YAML types
  • Value validation: Check ranges, formats where applicable

Documentation Best Practices

Provide Examples

Every configuration option should have examples:

# Example: Multi-level navigation
header_pages:
  - title: "Products"
    url: "#"
    children:
      - title: "Overview"
        url: "/products"

Show Common Patterns

Document typical use cases:

# Pattern: Simple page
---
layout: page
title: About
permalink: /about/
---

# Pattern: Blog post
---
layout: post
title: "Post Title"
date: 2025-11-29 10:00:00 -0400
categories: engineering
---

Versioning and Compatibility

Backward Compatibility

When adding new configuration options:

  • Make them optional with sensible defaults
  • Don’t break existing configurations
  • Document migration paths for breaking changes

Theme Versioning

# Gemfile
gem "analytiq-pages-theme",
    git: "https://github.com/analytiq-hub/analytiq-pages-theme.git",
    tag: "v0.1.8"  # Pin to specific version

Real-World Example: Analytiq Pages Starter

The Analytiq Pages Starter demonstrates these principles:

Clean Configuration Structure

# Site metadata (clear, required fields)
title: Your Company Name
author:
  name: Your Name
  email: "hello@yourcompany.com"

# Navigation (hierarchical, intuitive)
header_pages:
  - title: "Products"
    children:
      - title: "Overview"
        url: "/products"

# Pagination (sensible defaults)
pagination:
  enabled: true
  per_page: 5

Well-Documented APIs

  • API Reference documents all configuration options
  • Examples for every major feature
  • Clear parameter tables with types and descriptions

Conclusion

Good configuration API design makes static sites more maintainable and easier to customize. By following these principles—clear structure, sensible defaults, consistent naming, and comprehensive documentation—you create an interface that’s both powerful and approachable.

Check out our API Reference to see these principles in action with the Analytiq Pages Starter.


Posted by Engineering Team on November 22, 2025 # Page content 2025-11-22 18:00:00 +0000 # Publication date


### Pagination Variables

```liquid
              # Current page
       # Total pages
    # Next page URL

Include API Design

Includes should be flexible and well-documented:

Parameter Documentation







  <!-- Static SVG -->
  

<div
  class="excalidraw-static"
  data-excalidraw="/analytiq-pages-starter/path/to/file.excalidraw"
  style="margin: 2rem 0;">
  <div class="loading" style="padding: 2rem; text-align: center; color: #666;">Loading diagram...</div>
</div>


  <script type="module" src="/analytiq-pages-starter/assets/js/excalidraw/render-excalidraw.js" defer></script>
  





Sensible Defaults

# Works with just required parameter


<div
  class="excalidraw-static"
  data-excalidraw="/analytiq-pages-starter/diagram.excalidraw"
  style="margin: 2rem 0;">
  <div class="loading" style="padding: 2rem; text-align: center; color: #666;">Loading diagram...</div>
</div>


  <script type="module" src="/analytiq-pages-starter/assets/js/excalidraw/render-excalidraw.js" defer></script>
  



# Optional parameters enhance functionality





  <!-- Iframe embed -->
  





<div class="excalidraw-embed-container" style="margin: 2rem 0;">
  <iframe
    src="/analytiq-pages-starter/excalidraw-edit?file=/analytiq-pages-starter/diagram.excalidraw"
    width="100%"
    height="800px"
    frameborder="0"
    loading="lazy"
    allow="clipboard-write"
    style="border: 1px solid #e0e0e0; border-radius: 8px; display: block;"
    title="Excalidraw diagram: diagram">
  </iframe>
</div>




Error Handling

Clear Error Messages

When configuration is invalid:

# Jekyll will show clear errors:
# "Liquid Exception: Invalid syntax for include tag"
# "Configuration file contains invalid YAML"

Validation Patterns

  • Required fields: Document clearly, fail fast if missing
  • Type checking: Use appropriate YAML types
  • Value validation: Check ranges, formats where applicable

Documentation Best Practices

Provide Examples

Every configuration option should have examples:

# Example: Multi-level navigation
header_pages:
  - title: "Products"
    url: "#"
    children:
      - title: "Overview"
        url: "/products"

Show Common Patterns

Document typical use cases:

# Pattern: Simple page
---
layout: page
title: About
permalink: /about/
---

# Pattern: Blog post
---
layout: post
title: "Post Title"
date: 2025-11-29 10:00:00 -0400
categories: engineering
---

Versioning and Compatibility

Backward Compatibility

When adding new configuration options:

  • Make them optional with sensible defaults
  • Don’t break existing configurations
  • Document migration paths for breaking changes

Theme Versioning

# Gemfile
gem "analytiq-pages-theme",
    git: "https://github.com/analytiq-hub/analytiq-pages-theme.git",
    tag: "v0.1.8"  # Pin to specific version

Real-World Example: Analytiq Pages Starter

The Analytiq Pages Starter demonstrates these principles:

Clean Configuration Structure

# Site metadata (clear, required fields)
title: Your Company Name
author:
  name: Your Name
  email: "hello@yourcompany.com"

# Navigation (hierarchical, intuitive)
header_pages:
  - title: "Products"
    children:
      - title: "Overview"
        url: "/products"

# Pagination (sensible defaults)
pagination:
  enabled: true
  per_page: 5

Well-Documented APIs

  • API Reference documents all configuration options
  • Examples for every major feature
  • Clear parameter tables with types and descriptions

Conclusion

Good configuration API design makes static sites more maintainable and easier to customize. By following these principles—clear structure, sensible defaults, consistent naming, and comprehensive documentation—you create an interface that’s both powerful and approachable.

Check out our API Reference to see these principles in action with the Analytiq Pages Starter.


Posted by Engineering Team on November 22, 2025

  1. This is the first footnote. 

  2. This is the second footnote with bold and italic text.