<

How This Site Was Built

A comprehensive overview of the technology stack, architecture, and design decisions behind Less Likely.
Author

Sir Panda

Published

January 8, 2025

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.8+
  • 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
  • GitHub Actions - Continuous integration/deployment
  • AWS Amplify - Hosting and global CDN
  • CloudFront - Content delivery network
  • Automatic deployment on git push

Third-Party Services

Search & Discovery

  • Quarto Search - Built-in search with Algolia-style UI
  • Features:
    • Instant search results
    • Keyboard shortcuts (f, /, s)
    • Category filtering
    • Full-text indexing
    • Custom icons for result types

Typography & Fonts

  • Google Fonts - Web typography
    • Fira Code - Code snippets
    • Inconsolata - Monospace alternative
    • Roboto - Body text
    • Lato - Headings
    • Merriweather - Elegant serif
    • PT Serif - Academic feel
  • Font loading: Preconnect and DNS prefetch 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

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

  • 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
  • Custom SCSS - Theme customization
    • Light theme: Cosmo variant
    • Dark theme: Darkly variant
    • 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!
│
├── posts/
│   ├── statistics/          # Statistical methodology
│   ├── medicine/            # Medical research
│   └── nutrition/           # Nutritional science
│
├── 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

    # Create new .qmd file in posts/statistics/
touch posts/statistics/new-post.qmd

  2. Write Content

    • Use RMarkdown syntax
    • Execute R code inline
    • Create visualizations
    • Add citations with
    • Include mathematical notation

  3. Preview Locally

    quarto preview

  4. Build Site

    quarto render

  5. Deploy

    git add .
git commit -m "Add new post"
git push
# AWS Amplify automatically deploys

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/posts/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 (CloudFront)
  • 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

Technical Improvements

Content Additions

Development Setup

Requirements

  • R (4.0+)
  • RStudio or VS Code
  • Quarto (1.8+)
  • 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

  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

Design Inspiration

Community

Contact & Feedback

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

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: January 8, 2025

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

Citation

BibTeX citation:
@online{panda2025,
  author = {Panda, Sir},
  title = {How {This} {Site} {Was} {Built}},
  date = {2025-01-08},
  url = {https://lesslikely.com/build.html},
  langid = {en}
}
For attribution, please cite this work as:
1. Panda S. (2025). ‘How This Site Was Built’. https://lesslikely.com/build.html.