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

### Image with Title

### 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 |
| ✅ 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
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.
- First item with bold text
- Second item with italic text
- Nested item with
code - Another nested item
- Nested item with
- Third item
This is a blockquote with:
- A list
- Bold text
Inline codeAnd 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
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
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:
- Click “Use this template” on GitHub to fork the repository
- Enable GitHub Pages in Settings → Pages
- 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