How This Site Was Built

Sir Panda

Overview

Less Likely is a modern static website built with Quarto, designed specifically for academic and scientific content with a focus on statistical methodology. This page documents the complete technology stack, architectural decisions, and evolution of the site.

Architecture Diagram

Technology Stack

Core Infrastructure

Quarto Publishing System

Quarto - Next-generation scientific publishing system
Version: 1.9+
Why Quarto?
- Native support for R, Python, Julia, and Observable
- Superior mathematical typesetting with KaTeX
- Built-in citation management
- Cross-reference capabilities
- Code execution and visualization
- Professional academic output

Content Creation

RMarkdown/Quarto Markdown - Primary authoring format
RStudio/VS Code - Integrated development environments
R Packages:
- Core statistical computing
- Data visualization (ggplot2)
- Tables (knitr, kableExtra)
- Special packages for specific analyses

Version Control & Deployment

Git/GitHub - Version control and source hosting
Netlify - Hosting, CDN, and build pipeline
- Automatic deployment on git push to master
- CSS/JS bundling and minification
- Custom HTTP headers and CSP
- Redirect rules for canonical URLs

Third-Party Services

Search & Discovery

Algolia - Full-text search with hosted index
- Index crawled via @algolia/netlify-plugin-crawler
- Instant results with keyboard shortcuts (f, /, s)
- Category filtering
- Custom icons for result types (injected by search-images.js)

Typography & Fonts

Google Fonts - Web typography
- Source Serif Pro / Source Serif 4 - Body text (serif)
- IBM Plex Mono - Code snippets (monospace)
Font loading: Preconnect to fonts.googleapis.com and fonts.gstatic.com for performance

Mathematics & Scientific Notation

KaTeX - Fast mathematical rendering
- LaTeX syntax support
- Inline and display math
- Fast client-side rendering
- No JavaScript dependencies for simple math

Quarto Extensions

Active extensions installed under _extensions/:

quarto-ext/lightbox - Lightbox image gallery (enabled globally with lightbox: auto)
quarto-ext/fontawesome - FontAwesome icon embedding in prose
quarto-ext/fancy-text - Styled text effects
quarto-ext/attribution - Content attribution blocks
quarto-ext/include-code-files - Import external code files into code blocks
mcanouil/iconify - Iconify icon set integration
mikemahoney218/arxiv - arXiv citation and link helpers
r-wasm/live - WebR live code execution in the browser
shafayetShafee/bsicons - Bootstrap icon set
shafayetShafee/collapse-callout - Collapsible callout blocks

Reference Management

Zotero - Bibliography and citation management
CSL - Citation Style Language for formatting
BibTeX - Bibliography format
Integration:
- Automatic citation insertion
- Multiple bibliography files
- Custom citation styles
- Hover previews for citations

Image Optimization

Cloudinary - Image CDN and optimization
- Automatic format conversion (WebP)
- Responsive images
- Lazy loading
- Compression and optimization

Analytics & Monitoring

Google Analytics 4 (G-9WVCJ5ZY42) - Traffic and event tracking
- Loaded via gtag.js in include-in-header.html
- Cookie consent (type: implied) wired through Quarto
Microsoft Clarity - User behavior analytics
- Session recordings
- Heatmaps
- User insights
Google Search Console - SEO monitoring
Bing Webmaster Tools - Additional search insights

Site Architecture

Frontend Design

Styling System

Bootstrap 5 - Base CSS framework (via Quarto/Bootswatch)
Custom SCSS - Theme customization
- Light theme: Paper (Bootswatch) + theme-mono.scss overrides
- Dark theme: standalone theme-dark.scss (no Bootswatch parent)
- Custom color variables
- Brand colors: #4895ab (primary), #d46c5b (accent)

Layout Components

Responsive Navigation - Mobile-friendly navbar
Sidebar Navigation - Contextual links
Table of Contents - Automatic generation
Code Blocks - Syntax highlighting with language badges
Copy Buttons - One-click code copying
Search Results - Custom icons and styling

Custom Features

Language Badges - Visual code block identifiers
Copy Code Functionality - Enhanced clipboard integration
Search Icons - Category-specific visual indicators
Image Centering - Consistent image display
Table Styling - Professional data presentation
Dark Mode - System preference detection

Content Organization

my-quarto-site/
├── _quarto.yml              # Site configuration
├── index.qmd                # Homepage
├── about.qmd                # About page
├── blog.qmd                 # Blog listing
├── posts.qmd                # Alternative post view
├── projects.qmd             # Projects showcase
├── contact.qmd              # Contact information
├── support.qmd              # Support page
├── blogroll.qmd            # Links to other sites
├── datasets.qmd            # Data repositories
├── 404.qmd                  # Custom error page
├── build.qmd                # This page!
│
├── statistics/             # Statistical methodology posts
├── medicine/               # Medical research posts
├── nutrition/              # Nutritional science posts
│
├── images/                  # Site images and assets
├── styles/                  # Custom CSS
└── _site/                   # Generated output

Metadata & SEO

Comprehensive Tags (100+)

Basic SEO: Title, description, keywords, author
Open Graph: Facebook, LinkedIn sharing
Twitter Cards: Rich Twitter previews
Academic: Google Scholar, Dublin Core
Structured Data: JSON-LD schemas
Mobile: iOS, Android optimization
Verification: Google, Bing, Yandex

Schema.org Structured Data

WebSite schema with site search
Organization schema
Person schema (author)
BlogPosting schema (articles)

Content Workflow

Writing Process

Create New Post

# Create new .qmd file in statistics/ (or medicine/, nutrition/)
touch statistics/new-post.qmd

Write Content
- Use RMarkdown syntax
- Execute R code inline
- Create visualizations
- Add citations with @citekey
- Include mathematical notation
Preview Locally
```
quarto preview
```
Build Site
```
quarto render
```

Deploy

git add .
git commit -m "Add new post"
git push
# Netlify automatically deploys on push to master

Post Template

---
title: "Your Post Title"
author:
  - name: Sir Panda
    orcid: "0000-0003-1545-8199"
date: "2025-01-08"
categories: [statistics, methodology]
description: "Brief description of your post"
image: "featured-image.png"
citation:
  type: article
  container-title: "Less Likely"
  url: https://lesslikely.com/statistics/your-post
bibliography: references.bib
---

## Introduction

Your content here...

Historical Evolution

WordPress Era (Early Years)

Platform: WordPress with SiteGround hosting
Theme: GeneratePress Premium
Challenges:
- Plugin dependency (WP Rocket, Imagify, Yoast SEO)
- Database vulnerabilities
- Performance issues with LaTeX
- Maintenance overhead
- Security concerns

Hugo Migration (Mid Period)

Platform: Hugo static site generator
Workflow: RMarkdown → blogdown → Hugo
Improvements:
- Eliminated database vulnerabilities
- Better LaTeX/mathematical content support
- Faster page loads
- Lower hosting costs
- Custom theme development

Quarto Evolution (Current)

Platform: Quarto publishing system
Why the switch?
- Modern scientific publishing features
- Better multi-language support (R, Python, Julia)
- Enhanced code execution
- Improved citation handling
- Cross-referencing capabilities
- Better maintenance and community
- Future-proof technology

Key Benefits of Quarto: - No plugin dependencies - Superior mathematical typesetting - Native academic features - Better documentation - Active development - Cross-platform compatibility

Design Philosophy

Principles

Content First
- Clean, readable typography
- Minimal distractions
- Focus on the writing
Academic Rigor
- Proper citations
- Mathematical precision
- Code reproducibility
- Data transparency
Performance
- Static generation
- CDN delivery
- Image optimization
- Minimal JavaScript
Accessibility
- Semantic HTML
- ARIA labels
- Keyboard navigation
- Screen reader support
Responsive Design
- Mobile-first approach
- Flexible layouts
- Touch-friendly interfaces
- Readable on all devices

Color Scheme

Brand Colors: - Primary: #4895ab (Teal blue) - Accent: #d46c5b (Coral red) - Neutral: #343a40 (Dark gray) - Light: #f8f9fa (Off white)

Dark Mode: - Background: #2d2d2d - Text: #e0e0e0 - Links: #5aa9bd - Borders: #404040

Performance Optimizations

Build Time

Freeze feature for code execution
Incremental builds
Cached computations
Parallel processing

Runtime

Static HTML (no server processing)
CDN distribution (Netlify Edge)
Font subsetting
Image lazy loading
Code splitting

Metrics

Lighthouse scores: 95+ across categories
First Contentful Paint: < 1s
Time to Interactive: < 2s
Total Blocking Time: < 100ms

Development Setup

Requirements

R (4.6+)
RStudio or VS Code
Quarto (1.9+)
Git
Node.js (for extensions)

Installation

# Install Quarto
# Download from https://quarto.org/docs/get-started/

# Clone repository
git clone https://github.com/zadrafi/lesslikely.git
cd lesslikely/my-quarto-site

# Install R packages
Rscript -e "install.packages(c('knitr', 'rmarkdown', 'ggplot2'))"

# Preview site
quarto preview

# Build site
quarto render

Configuration Files

**_quarto.yml** - Main configuration - Project settings - Website metadata - Navigation structure - Format options - Extensions

styles.css - Custom styling - Brand colors - Component styles - Dark mode - Responsive design

include-in-header.html - Head content - Metadata tags - Analytics scripts - Font loading - Structured data

Lessons Learned

What Worked Well

Static Generation - Fast, secure, reliable
Version Control - Complete history and rollback
Quarto - Excellent for academic content
CDN Hosting - Global performance
Custom Theme - Full design control

Challenges Overcome

Migration - Moving from Hugo to Quarto
Dark Mode - Consistent styling across themes
Search - Implementing custom icons
Citations - Managing multiple bibliographies
Performance - Optimizing large R computations

Best Practices

Always preview changes locally
Use meaningful commit messages
Keep dependencies minimal
Document custom features
Test on multiple devices
Monitor analytics regularly
Maintain backup copies

Resources & Credits

Tools & Technologies

Quarto - Publishing system
RStudio - Development environment
GitHub - Version control
Netlify - Hosting and deployment

Design Inspiration

Edward Tufte - Data visualization
Butterick’s Practical Typography
Material Design - UI patterns
Academic journals and publications

Community

Contact & Feedback

Have questions about the site architecture? Want to implement something similar?

Email: zad@lesslikely.com
Twitter: @dailyzad
GitHub: zadrafi

Open Source

While the content is copyrighted, the site’s technical implementation can serve as a reference for building academic websites with Quarto.

Key Takeaway: A well-designed static site with Quarto can deliver excellent performance, maintainability, and user experience for academic and scientific content without the complexity and overhead of dynamic CMS platforms.

Last updated: July 9, 2026

This page itself is built with Quarto, demonstrating the capabilities we describe!

--- title: "How This Site Was Built" description: "A comprehensive overview of the technology stack, architecture, and design decisions behind Less Likely." image: "images/HomeLogo-static.png" date: "2026-05-24" date-modified: "2026-07-09" author: - name: Sir Panda orcid: "0000-0003-1545-8199" url: https://twitter.com/dailyzad toc: true toc-depth: 3 title-block-banner: true --- ## Overview Less Likely is a modern static website built with **Quarto**, designed specifically for academic and scientific content with a focus on statistical methodology. This page documents the complete technology stack, architectural decisions, and evolution of the site. ### Architecture Diagram ![][1] [1]: images/paste-1.png ## Technology Stack ### Core Infrastructure #### Quarto Publishing System - [**Quarto**] - Next-generation scientific publishing system - Version: 1.9+ - Why Quarto? - Native support for R, Python, Julia, and Observable - Superior mathematical typesetting with KaTeX - Built-in citation management - Cross-reference capabilities - Code execution and visualization - Professional academic output [**Quarto**]: https://quarto.org/ #### Content Creation - **RMarkdown/Quarto Markdown** - Primary authoring format - **RStudio/VS Code** - Integrated development environments - **R Packages**: - Core statistical computing - Data visualization (ggplot2) - Tables (knitr, kableExtra) - Special packages for specific analyses #### Version Control & Deployment - **Git/GitHub** - Version control and source hosting - **Netlify** - Hosting, CDN, and build pipeline - Automatic deployment on git push to `master` - CSS/JS bundling and minification - Custom HTTP headers and CSP - Redirect rules for canonical URLs ### Third-Party Services #### Search & Discovery - **Algolia** - Full-text search with hosted index - Index crawled via `@algolia/netlify-plugin-crawler` - Instant results with keyboard shortcuts (f, /, s) - Category filtering - Custom icons for result types (injected by `search-images.js`) #### Typography & Fonts - **Google Fonts** - Web typography - Source Serif Pro / Source Serif 4 - Body text (serif) - IBM Plex Mono - Code snippets (monospace) - **Font loading**: Preconnect to fonts.googleapis.com and fonts.gstatic.com for performance #### Mathematics & Scientific Notation - **KaTeX** - Fast mathematical rendering - LaTeX syntax support - Inline and display math - Fast client-side rendering - No JavaScript dependencies for simple math #### Quarto Extensions Active extensions installed under `_extensions/`: - **quarto-ext/lightbox** - Lightbox image gallery (enabled globally with `lightbox: auto`) - **quarto-ext/fontawesome** - FontAwesome icon embedding in prose - **quarto-ext/fancy-text** - Styled text effects - **quarto-ext/attribution** - Content attribution blocks - **quarto-ext/include-code-files** - Import external code files into code blocks - **mcanouil/iconify** - Iconify icon set integration - **mikemahoney218/arxiv** - arXiv citation and link helpers - **r-wasm/live** - WebR live code execution in the browser - **shafayetShafee/bsicons** - Bootstrap icon set - **shafayetShafee/collapse-callout** - Collapsible callout blocks #### Reference Management - **Zotero** - Bibliography and citation management - **CSL** - Citation Style Language for formatting - **BibTeX** - Bibliography format - Integration: - Automatic citation insertion - Multiple bibliography files - Custom citation styles - Hover previews for citations #### Image Optimization - **Cloudinary** - Image CDN and optimization - Automatic format conversion (WebP) - Responsive images - Lazy loading - Compression and optimization #### Analytics & Monitoring - **Google Analytics 4** (G-9WVCJ5ZY42) - Traffic and event tracking - Loaded via gtag.js in `include-in-header.html` - Cookie consent (`type: implied`) wired through Quarto - **Microsoft Clarity** - User behavior analytics - Session recordings - Heatmaps - User insights - **Google Search Console** - SEO monitoring - **Bing Webmaster Tools** - Additional search insights #### Social Features - **Webmentions** - Decentralized social interactions - **Twitter Cards** - Rich social media previews - **Open Graph** - Social sharing optimization ## Site Architecture ### Frontend Design #### Styling System - **Bootstrap 5** - Base CSS framework (via Quarto/Bootswatch) - **Custom SCSS** - Theme customization - Light theme: Paper (Bootswatch) + `theme-mono.scss` overrides - Dark theme: standalone `theme-dark.scss` (no Bootswatch parent) - Custom color variables - Brand colors: #4895ab (primary), #d46c5b (accent) #### Layout Components - **Responsive Navigation** - Mobile-friendly navbar - **Sidebar Navigation** - Contextual links - **Table of Contents** - Automatic generation - **Code Blocks** - Syntax highlighting with language badges - **Copy Buttons** - One-click code copying - **Search Results** - Custom icons and styling #### Custom Features 1. **Language Badges** - Visual code block identifiers 2. **Copy Code Functionality** - Enhanced clipboard integration 3. **Search Icons** - Category-specific visual indicators 4. **Image Centering** - Consistent image display 5. **Table Styling** - Professional data presentation 6. **Dark Mode** - System preference detection ### Content Organization ``` my-quarto-site/ ├── _quarto.yml # Site configuration ├── index.qmd # Homepage ├── about.qmd # About page ├── blog.qmd # Blog listing ├── posts.qmd # Alternative post view ├── projects.qmd # Projects showcase ├── contact.qmd # Contact information ├── support.qmd # Support page ├── blogroll.qmd # Links to other sites ├── datasets.qmd # Data repositories ├── 404.qmd # Custom error page ├── build.qmd # This page! │ ├── statistics/ # Statistical methodology posts ├── medicine/ # Medical research posts ├── nutrition/ # Nutritional science posts │ ├── images/ # Site images and assets ├── styles/ # Custom CSS └── _site/ # Generated output ``` ### Metadata & SEO #### Comprehensive Tags (100+) - **Basic SEO**: Title, description, keywords, author - **Open Graph**: Facebook, LinkedIn sharing - **Twitter Cards**: Rich Twitter previews - **Academic**: Google Scholar, Dublin Core - **Structured Data**: JSON-LD schemas - **Mobile**: iOS, Android optimization - **Verification**: Google, Bing, Yandex #### Schema.org Structured Data - WebSite schema with site search - Organization schema - Person schema (author) - BlogPosting schema (articles) ## Content Workflow ### Writing Process 1. **Create New Post** ``` bash # Create new .qmd file in statistics/ (or medicine/, nutrition/) touch statistics/new-post.qmd ``` 2. **Write Content** - Use RMarkdown syntax - Execute R code inline - Create visualizations - Add citations with @citekey - Include mathematical notation 3. **Preview Locally** ``` bash quarto preview ``` 4. **Build Site** ``` bash quarto render ``` 5. **Deploy** ``` bash git add . git commit -m "Add new post" git push # Netlify automatically deploys on push to master ``` ### Post Template ``` yaml --- title: "Your Post Title" author: - name: Sir Panda orcid: "0000-0003-1545-8199" date: "2025-01-08" categories: [statistics, methodology] description: "Brief description of your post" image: "featured-image.png" citation: type: article container-title: "Less Likely" url: https://lesslikely.com/statistics/your-post bibliography: references.bib --- ## Introduction Your content here... ``` ## Historical Evolution ### WordPress Era (Early Years) - **Platform**: WordPress with SiteGround hosting - **Theme**: GeneratePress Premium - **Challenges**: - Plugin dependency (WP Rocket, Imagify, Yoast SEO) - Database vulnerabilities - Performance issues with LaTeX - Maintenance overhead - Security concerns ### Hugo Migration (Mid Period) - **Platform**: Hugo static site generator - **Workflow**: RMarkdown → blogdown → Hugo - **Improvements**: - Eliminated database vulnerabilities - Better LaTeX/mathematical content support - Faster page loads - Lower hosting costs - Custom theme development ### Quarto Evolution (Current) - **Platform**: Quarto publishing system - **Why the switch?** - Modern scientific publishing features - Better multi-language support (R, Python, Julia) - Enhanced code execution - Improved citation handling - Cross-referencing capabilities - Better maintenance and community - Future-proof technology **Key Benefits of Quarto:** - No plugin dependencies - Superior mathematical typesetting - Native academic features - Better documentation - Active development - Cross-platform compatibility ## Design Philosophy ### Principles 1. **Content First** - Clean, readable typography - Minimal distractions - Focus on the writing 2. **Academic Rigor** - Proper citations - Mathematical precision - Code reproducibility - Data transparency 3. **Performance** - Static generation - CDN delivery - Image optimization - Minimal JavaScript 4. **Accessibility** - Semantic HTML - ARIA labels - Keyboard navigation - Screen reader support 5. **Responsive Design** - Mobile-first approach - Flexible layouts - Touch-friendly interfaces - Readable on all devices ### Color Scheme **Brand Colors:** - Primary: `#4895ab` (Teal blue) - Accent: `#d46c5b` (Coral red) - Neutral: `#343a40` (Dark gray) - Light: `#f8f9fa` (Off white) **Dark Mode:** - Background: `#2d2d2d` - Text: `#e0e0e0` - Links: `#5aa9bd` - Borders: `#404040` ## Performance Optimizations ### Build Time - Freeze feature for code execution - Incremental builds - Cached computations - Parallel processing ### Runtime - Static HTML (no server processing) - CDN distribution (Netlify Edge) - Font subsetting - Image lazy loading - Code splitting ### Metrics - Lighthouse scores: 95+ across categories - First Contentful Paint: \< 1s - Time to Interactive: \< 2s - Total Blocking Time: \< 100ms ## Future Enhancements ### Planned Features - [ ] Newsletter integration - [ ] RSS feed improvements - [ ] Series/collection pages - [ ] Advanced search filters - [ ] Related posts algorithm - [ ] Reading time estimates - [ ] Social share counts - [ ] Comment system (IndieWeb) ### Technical Improvements - [ ] Progressive Web App (PWA) - [ ] Offline support - [ ] Service worker caching - [ ] WebP image conversion - [ ] Critical CSS inlining - [ ] HTTP/3 support ### Content Additions - [ ] Video tutorials - [ ] Interactive visualizations - [ ] R package documentation - [ ] Course materials - [ ] Data repositories ## Development Setup ### Requirements - R (4.6+) - RStudio or VS Code - Quarto (1.9+) - Git - Node.js (for extensions) ### Installation ``` bash # Install Quarto # Download from https://quarto.org/docs/get-started/ # Clone repository git clone https://github.com/zadrafi/lesslikely.git cd lesslikely/my-quarto-site # Install R packages Rscript -e "install.packages(c('knitr', 'rmarkdown', 'ggplot2'))" # Preview site quarto preview # Build site quarto render ``` ### Configuration Files \*\*\_quarto.yml\*\* - Main configuration - Project settings - Website metadata - Navigation structure - Format options - Extensions **styles.css** - Custom styling - Brand colors - Component styles - Dark mode - Responsive design **include-in-header.html** - Head content - Metadata tags - Analytics scripts - Font loading - Structured data ## Lessons Learned ### What Worked Well 1. **Static Generation** - Fast, secure, reliable 2. **Version Control** - Complete history and rollback 3. **Quarto** - Excellent for academic content 4. **CDN Hosting** - Global performance 5. **Custom Theme** - Full design control ### Challenges Overcome 1. **Migration** - Moving from Hugo to Quarto 2. **Dark Mode** - Consistent styling across themes 3. **Search** - Implementing custom icons 4. **Citations** - Managing multiple bibliographies 5. **Performance** - Optimizing large R computations ### Best Practices 1. Always preview changes locally 2. Use meaningful commit messages 3. Keep dependencies minimal 4. Document custom features 5. Test on multiple devices 6. Monitor analytics regularly 7. Maintain backup copies ## Resources & Credits ### Tools & Technologies - [Quarto] - Publishing system - [RStudio] - Development environment - [GitHub] - Version control - [Netlify] - Hosting and deployment [Quarto]: https://quarto.org/ [RStudio]: https://posit.co/ [GitHub]: https://github.com/ [Netlify]: https://www.netlify.com/ ### Design Inspiration - [Edward Tufte] - Data visualization - [Butterick's Practical Typography] - [Material Design] - UI patterns - Academic journals and publications [Edward Tufte]: https://www.edwardtufte.com/ [Butterick's Practical Typography]: https://practicaltypography.com/ [Material Design]: https://material.io/ ### Community - [Quarto Community] - [R-Bloggers] - [Stack Overflow] [Quarto Community]: https://github.com/quarto-dev/quarto-cli/discussions [R-Bloggers]: https://www.r-bloggers.com/ [Stack Overflow]: https://stackoverflow.com/ ## Contact & Feedback Have questions about the site architecture? Want to implement something similar? - **Email**: [zad\@lesslikely.com] - **Twitter**: [\@dailyzad] - **GitHub**: [zadrafi] [zad\@lesslikely.com]: mailto:zad@lesslikely.com [\@dailyzad]: https://twitter.com/dailyzad [zadrafi]: https://github.com/zadrafi ## Open Source While the content is copyrighted, the site's technical implementation can serve as a reference for building academic websites with Quarto. **Key Takeaway**: A well-designed static site with Quarto can deliver excellent performance, maintainability, and user experience for academic and scientific content without the complexity and overhead of dynamic CMS platforms. ------------------------------------------------------------------------ *Last updated: July 9, 2026* *This page itself is built with Quarto, demonstrating the capabilities we describe!*